:root {
    --font: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    --bg: #fcfcfe;
    --surface: #ffffff;
    --text: #2b2740;
    --muted: #8b86a0;
    --line: #e4eaf3;
    --sidebar: #003366;
    --accent: #123a6f;
    --accent-soft: #e7eef8;
    --green: #22c55e;
    --orange: #f5a623;
    --teal: #14b8a6;
    --yellow: #eab308;
    --red: #ef4444;
    --shadow: 0 1px 2px rgba(43, 39, 64, .04), 0 10px 28px rgba(43, 39, 64, .04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}
body.tra-body {
    overflow-x: clip;
    overscroll-behavior-x: none;
}
body {
    font: 14px/1.5 var(--font);
    color: var(--text);
    background: var(--bg);
}
button, input, select, textarea {
    font-family: inherit;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: 22px; }
h2, h4 { font-size: 16px; }
.muted { color: var(--muted); }
.ri { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.card,
.kpi,
.kpi-card,
.dept-tile,
.module-card,
.placeholder-panel,
.workspace-hero,
.auth-card,
.chart-card,
.overview-card,
.lead-card,
.panel,
.table-wrap,
table.data,
.btn, .btn-outline, .btn-dark, .btn-soft,
.search, .field, .badge, .alert, .progress-track,
.search-panel, .topbar-menu, .toast, .search-kbd, .refresh-veil,
input, select, button {
    border-radius: 0;
}
.swal-banner,
.swal-banner .swal-icon,
.swal-banner .swal-close,
.swal-banner .swal-dismiss-forever,
.swal-banner .swal-tip-nav {
    border-radius: 0;
}

.card, .kpi, .kpi-card, .chart-card, .overview-card, .lead-card, .panel,
.dept-tile, .module-card, .placeholder-panel, .workspace-hero, .auth-card, .table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.staff-body,
.portal-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-width: 0;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(43, 39, 64, .42);
    z-index: 55;
}
.sidebar-backdrop[hidden] { display: none !important; }

.sidebar {
    background: var(--sidebar);
    border-right: 1px solid rgba(255, 255, 255, .06);
    padding: 14px 12px 18px;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 88vw);
    z-index: 60;
    transform: translateX(-105%);
    transition: transform .38s cubic-bezier(.22, .9, .24, 1), width .28s ease;
    overflow: auto;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar.is-open { transform: translateX(0); }
@media (max-width: 1023px) {
    .sidebar { top: 64px; }
    body.sidebar-open .topbar,
    body.sidebar-open .portal-header { z-index: 70; }
    .brand { padding-right: 36px; }
    .sidebar-close { position: absolute; top: 6px; right: 0; z-index: 2; background: transparent; color: #e8eef8; }
}
.sidebar-close { margin-left: auto; }
.sidebar-foot {
    margin-top: auto;
    display: grid;
    gap: 8px;
    padding: 14px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.sidebar-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 400;
    text-decoration: none;
}
.sidebar-logout:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: #fff;
}
.sidebar-logout .ri,
.sidebar-logout svg {
    color: inherit;
    stroke: currentColor;
}
.sidebar-collapse {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin: 2px 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    background: transparent;
    color: #e8eef8;
    cursor: pointer;
}
.sidebar-collapse:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.sidebar-collapse.is-locked,
html.sidebar-locked .sidebar-collapse {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}
.sidebar-collapse .ri,
.sidebar-collapse svg {
    display: block;
    stroke: currentColor;
}
.brand {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 4px 4px 16px;
    min-width: 0;
}
.brand::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .14);
    transform: scaleX(1);
    transform-origin: left center;
}
.sidebar.is-arriving .brand::after { animation: brand-line .55s ease .12s forwards; }
.brand-link { display: flex; align-items: center; min-width: 0; flex: 1; }
.brand-plate {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 8px 10px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}
.brand-plate::before {
    content: none !important;
    display: none !important;
}
.sidebar.is-arriving .brand-plate { animation: brand-in .48s cubic-bezier(.2, .8, .2, 1) both; }
.brand-logo {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
}
.brand-mark-img {
    display: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: transparent;
}
@keyframes brand-in {
    from { opacity: 0; transform: translateY(-10px) scale(.94); }
    to { opacity: 1; transform: none; }
}
@keyframes brand-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brand-shine { to { left: 140%; } }
@keyframes side-item {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: none; }
}
.sidebar.is-arriving .nav-label,
.sidebar.is-arriving .side-nav > a,
.sidebar.is-arriving .side-group,
.sidebar.is-arriving .sidebar-foot,
.sidebar.is-arriving .sidebar-collapse {
    animation: side-item .42s ease backwards;
}
.sidebar.is-arriving .side-nav > :nth-child(1) { animation-delay: .05s; }
.sidebar.is-arriving .side-nav > :nth-child(2) { animation-delay: .1s; }
.sidebar.is-arriving .side-nav > :nth-child(3) { animation-delay: .15s; }
.sidebar.is-arriving .side-nav > :nth-child(4) { animation-delay: .2s; }
.sidebar.is-arriving .side-nav > :nth-child(5) { animation-delay: .25s; }
.sidebar.is-arriving .side-nav > :nth-child(6) { animation-delay: .3s; }
.sidebar.is-arriving .side-nav > :nth-child(7) { animation-delay: .35s; }
.sidebar.is-arriving .side-nav > :nth-child(8) { animation-delay: .4s; }
.side-nav a { transition: background .18s ease, color .18s ease; }
.side-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.side-nav a.is-active:hover { background: #fff; color: #003366; }
.brand-copy { min-width: 0; }
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}
.brand strong { display: block; font-size: 15px; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.sidebar-dept-title {
    margin: 10px 12px 2px;
    padding: 0 0 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    line-height: 1.3;
}
.nav-label {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 16px 8px 6px;
    font-weight: 600;
}
.sidebar-workspace .nav-label {
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}
.sidebar.sidebar-workspace .side-nav a,
.sidebar.sidebar-workspace .side-nav a[data-tone] {
    color: #fff;
}
.sidebar-workspace .side-nav a[data-tone="green"] { --ico: #e8eef8; color: #fff; }
.sidebar-workspace .side-nav a.is-active,
.sidebar-workspace .side-nav a.is-active:hover,
.sidebar-workspace .side-nav a.is-active[data-tone],
.sidebar-workspace .side-nav a.is-active[data-tone]:hover,
.sidebar-workspace .side-nav a.is-active[data-tone="green"],
.sidebar-workspace .side-nav a.is-active[data-tone="green"]:hover {
    background: #fff !important;
    color: #003366 !important;
    box-shadow: none;
}
.sidebar-workspace .side-nav a.is-active span,
.sidebar-workspace .side-nav a.is-active:hover span,
.sidebar-workspace .side-nav a.is-active[data-tone] span,
.sidebar-workspace .side-nav a.is-active[data-tone]:hover span {
    color: #003366 !important;
}
.sidebar-workspace .side-nav a.is-active .ri,
.sidebar-workspace .side-nav a.is-active:hover .ri,
.sidebar-workspace .side-nav a.is-active[data-tone] .ri,
.sidebar-workspace .side-nav a.is-active[data-tone]:hover .ri { color: #003366 !important; }
.side-nav { display: grid; gap: 8px; }
#app-sidebar.sidebar,
#app-sidebar.sidebar .side-nav,
#app-sidebar.sidebar .side-nav a,
#app-sidebar.sidebar .side-sub a,
.sidebar,
.sidebar .side-nav,
.sidebar .side-nav a {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
#app-sidebar.sidebar .side-nav a,
.sidebar .side-nav a,
.side-nav a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #fff;
    padding: 8px 10px;
    border-radius: 0;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
}
.side-nav a.is-active,
.side-nav a.is-active:hover,
.side-nav a.is-active[data-tone],
.side-nav a.is-active[data-tone]:hover {
    background: #fff !important;
    font-weight: 400 !important;
    color: #003366 !important;
    box-shadow: none;
}
.side-nav a.is-active span,
.side-nav a.is-active:hover span {
    color: #003366 !important;
}
.side-nav a .ri {
    color: var(--ico, #e8eef8);
    font-size: 1.15em;
    flex: 0 0 auto;
}
.side-nav a[data-tone="navy"] { --ico: #e8eef8; }
.side-nav a[data-tone="blue"] { --ico: #e8eef8; }
.side-nav a[data-tone="teal"] { --ico: #e8eef8; }
.side-nav a[data-tone="violet"] { --ico: #e8eef8; }
.side-nav a[data-tone="orange"] { --ico: #e8eef8; }
.side-nav a[data-tone="rose"] { --ico: #e8eef8; }
.side-nav a[data-tone="sky"] { --ico: #e8eef8; }
.side-nav a[data-tone="green"] { --ico: #e8eef8; }
.side-nav a[data-tone="amber"] { --ico: #e8eef8; }
.side-nav a[data-tone="slate"] { --ico: #e8eef8; }
.side-nav a.is-active .ri,
.side-nav a.is-active:hover .ri { color: #003366 !important; }
.side-nav a.is-active em { color: #123a6f !important; }
.side-nav em { color: var(--muted); font-size: 10px; margin-left: auto; font-style: normal; }
.side-group { display: grid; }
.side-group-row { display: flex; align-items: center; min-width: 0; }
.side-group-row a,
.side-group-row .side-group-toggle { flex: 1; min-width: 0; }
.side-group-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 8px 10px;
    border-radius: 0;
    font: inherit;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}
.side-group-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.side-group-toggle .side-caret {
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: #9aa8bb;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.side-group-toggle:hover .side-caret { color: #fff; }
.side-group.is-open > .side-group-row .side-caret { transform: rotate(180deg); }
.sidebar .side-group.is-open > .side-group-row > a,
.sidebar .side-group.is-open > .side-group-row > .side-group-toggle {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}
.sidebar .side-group.is-open > .side-group-row > a.is-active,
.sidebar .side-group.is-open > .side-group-row > a.is-active:hover,
.sidebar .side-group.is-open > .side-group-row > .side-group-toggle.is-active,
.sidebar .side-group.is-open > .side-group-row > .side-group-toggle.is-active:hover {
    background: #fff;
    color: #003366;
}
.sidebar .side-group.is-open > .side-group-row > a .ri,
.sidebar .side-group.is-open > .side-group-row > .side-group-toggle .ri { color: #fff; }
.sidebar .side-group.is-open > .side-group-row > a.is-active .ri,
.sidebar .side-group.is-open > .side-group-row > .side-group-toggle.is-active .ri { color: #003366; }
.sidebar .side-group.is-open > .side-group-row > .side-group-toggle.is-active .side-caret { color: #003366; }
.sidebar-workspace .side-group-toggle[data-tone="green"] { --ico: #e8eef8; color: #fff; }
.sidebar-workspace .side-group-toggle.is-active,
.sidebar-workspace .side-group-toggle.is-active:hover {
    background: #fff !important;
    color: #003366 !important;
}
.sidebar-workspace .side-group-toggle.is-active .ri,
.sidebar-workspace .side-group-toggle.is-active:hover .ri { color: #003366 !important; }
.side-sub {
    display: none;
    margin-top: 4px;
    padding: 0 0 6px 14px;
    gap: 3px;
}
.side-group.is-open > .side-sub { display: grid; }
#app-sidebar.sidebar .side-sub a,
.side-sub a {
    padding: 6px 10px;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    color: #fff;
    white-space: normal;
}
.side-group.is-open > .side-sub > a { animation: side-item .32s ease both; }
.side-group.is-open > .side-sub > a:nth-child(1) { animation-delay: .02s; }
.side-group.is-open > .side-sub > a:nth-child(2) { animation-delay: .06s; }
.side-group.is-open > .side-sub > a:nth-child(3) { animation-delay: .1s; }
.side-group.is-open > .side-sub > a:nth-child(4) { animation-delay: .14s; }
.side-group.is-open > .side-sub > a:nth-child(5) { animation-delay: .18s; }
.side-group.is-open > .side-sub > a:nth-child(6) { animation-delay: .22s; }
.side-group.is-open > .side-sub > a:nth-child(7) { animation-delay: .26s; }
.side-group.is-open > .side-sub > a:nth-child(8) { animation-delay: .3s; }
.side-group.is-open > .side-sub > a:nth-child(9) { animation-delay: .34s; }
.side-group.is-open > .side-sub > a:nth-child(10) { animation-delay: .38s; }
.side-group.is-open > .side-sub > a:nth-child(11) { animation-delay: .42s; }
.side-group.is-open > .side-sub > a:nth-child(12) { animation-delay: .46s; }

.staff-main, .portal-main, .auth-body {
    --pattern-size: 1680px;
    background-color: #fcfcfe;
}
.auth-body {
    position: relative;
    background-image: none;
}
.auth-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('../../../img/body-pattern.png');
    background-repeat: repeat;
    background-position: 0 0;
    background-size: var(--pattern-size) auto;
    opacity: .34;
    pointer-events: none;
    z-index: 0;
    animation: patternDrift 70s linear infinite;
}
.auth-shell {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    width: calc(100% - 32px);
    margin: 32px auto;
    padding: 8px 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.staff-main, .portal-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    position: relative;
    background-color: #f3f6fb;
    background-image: none;
}
.staff-main::before,
.portal-main::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('../../../img/body-pattern.png');
    background-repeat: repeat;
    background-position: 0 0;
    background-size: var(--pattern-size) auto;
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}
.staff-main > *,
.portal-main > * {
    position: relative;
    z-index: 1;
}
.page, .portal-page { background: transparent; }
.topbar, .portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    min-width: 0;
}
.topbar-start { display: flex; align-items: center; gap: 4px; }
.search-wrap {
    position: relative;
    flex: 0 1 380px;
    width: 100%;
    max-width: 400px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0;
    height: 42px;
    padding: 3px 3px 3px 12px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(27, 70, 137, .08);
    transition: max-width .28s ease, box-shadow .28s ease, border-color .28s ease, transform .28s ease, background .28s ease;
}
.search-wrap:hover {
    border-color: #c5d4ea;
    box-shadow: 0 8px 20px rgba(27, 70, 137, .12);
}
.search-wrap:focus-within,
body.search-centered .search-wrap {
    border-color: #1b4689;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(27, 70, 137, .14),
        0 14px 32px rgba(27, 70, 137, .16);
}
.search-pill-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: var(--muted);
}
.search-pill-field .ri {
    color: #64748b;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    transition: color .2s ease, transform .28s ease;
}
.search-wrap:focus-within .search-pill-need .ri {
    color: #1b4689;
    transform: scale(1.08);
}
.search-pill-field span { display: grid; min-width: 0; width: 100%; align-content: center; }
.search-pill-field strong {
    display: block;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    transition: opacity .2s ease, max-height .2s ease, margin .2s ease, transform .2s ease;
    max-height: 18px;
    overflow: hidden;
}
.search-pill-need:focus-within strong,
.search-pill-need:has(.search-pill-input:not(:placeholder-shown)) strong {
    opacity: 0;
    max-height: 0;
    margin: 0;
    transform: translateY(-4px);
    pointer-events: none;
}
.search-pill-input,
.search-pill-field select {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    min-height: 20px;
    height: auto;
    font: 600 13px/1.35 var(--font);
    color: #0f172a;
    caret-color: #1b4689;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}
.search-pill-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
    opacity: 1;
}
.search-pill-input::-webkit-search-decoration,
.search-pill-input::-webkit-search-cancel-button,
.search-pill-input::-webkit-search-results-button,
.search-pill-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.search-pill-go {
    width: auto;
    min-width: 92px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: #123a6f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.search-pill-go .ri { color: #fff; }
.search-pill-go:hover { background: #0c2749; transform: translateY(-1px); }
.search-wrap:focus-within .search-pill-go {
    box-shadow: 0 6px 14px rgba(18, 58, 111, .28);
}
.search-pill-divider {
    width: 1px;
    height: 28px;
    background: #e6ebf2;
    flex-shrink: 0;
    margin: 0 8px;
}
.search-pill-extra { display: none; }
.search-pill-extra > .ri:last-child { color: #cbd5e1; margin-left: 2px; }
.search-area { position: relative; cursor: pointer; }
.search-area-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    min-height: 0;
    height: 18px;
    font: 12px/1.2 var(--font);
    color: var(--muted);
    text-align: left;
    cursor: pointer;
}
.search-area-toggle em { font-style: normal; }
.search-area-menu {
    position: absolute;
    top: calc(100% + 28px);
    left: -12px;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(27, 70, 137, .16);
    z-index: 95;
    padding: 6px;
}
.search-area-menu button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    font: 14px/1.3 var(--font);
    color: #1f2937;
    cursor: pointer;
}
.search-area-menu button:hover,
.search-area-menu button.is-active { background: #eef6f7; color: #127f8a; }
.search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(71, 85, 105, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 200;
}
body.search-centered { overflow: hidden; }
body.search-centered .search-wrap {
    display: flex !important;
    position: fixed !important;
    z-index: 210;
    left: 50%;
    top: max(12px, env(safe-area-inset-top, 0px) + 12px);
    right: auto;
    bottom: auto;
    transform: translateX(-50%) scale(1.02);
    width: min(520px, calc(100vw - 24px));
    max-width: none;
    height: auto;
    min-height: 48px;
    padding: 4px 4px 4px 14px;
    animation: searchPillIn .32s cubic-bezier(.22, 1, .36, 1);
    visibility: visible !important;
    pointer-events: auto !important;
}
@keyframes searchPillIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.02);
    }
}
@media (max-width: 767px) {
    body.search-centered .search-wrap {
        top: max(64px, env(safe-area-inset-top, 0px) + 56px);
        flex-direction: row;
        align-items: center;
        border-radius: 999px;
        padding: 4px 4px 4px 12px;
    }
    body.search-centered .search-close {
        top: -48px;
        right: 0;
        left: auto;
    }
    .topbar {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
    }
    .topbar-start {
        flex: 0 0 auto;
    }
    .topbar-user {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 2px;
    }
    .topbar .search-toggle {
        display: inline-grid;
        flex: 0 0 auto;
    }
}
body.search-centered .search-pill-go {
    min-width: 96px;
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
}
body.search-centered .search-pill-field strong {
    font-size: 12px;
}
body.search-centered .search-pill-input,
body.search-centered .search-area-toggle {
    font-size: 14px;
    min-height: 22px;
    color: #0f172a;
}
body.search-centered .search-pill-extra { display: flex; }
body.search-centered .search-close {
    display: inline-grid;
    top: -52px;
    right: 0;
    left: auto;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
body.search-centered .search-panel {
    z-index: 1;
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, .18);
}
.search {
    width: 100%;
    border: 1px solid var(--line);
    background: #f8f7fc;
    padding: 9px 72px 9px 36px;
    color: var(--text);
}
.topbar-user { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #5c5773;
    position: relative;
    cursor: pointer;
}
.icon-btn .dot-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e03131;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.icon-btn .dot-badge[hidden],
.portal-bell.is-read .dot-badge {
    display: none !important;
}
.user-chip { display: flex; align-items: center; gap: 8px; padding-left: 8px; }
.user-chip small { display: block; color: var(--muted); font-size: 11px; }
.user-chip strong { display: block; font-size: 13px; }
.avatar {
    width: 32px; height: 32px; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
}

.page, .portal-page { padding: 16px 12px 32px; min-width: 0; flex: 1 1 auto; }
.user-chip { border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.menu-anchor { position: relative; }
.icon-btn.is-open, .user-chip.is-open { background: var(--accent-soft); color: var(--accent); }
.search-kbd { display: none; }
.search-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    min-width: 0;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(43, 39, 64, .12);
    z-index: 80;
    max-height: min(70vh, 420px);
    overflow: auto;
}
.search-hint, .menu-title {
    margin: 0;
    padding: 10px 12px 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.menu-meta { margin: 0 12px 8px; color: var(--muted); font-size: 12px; }
.search-item, .topbar-menu a, .topbar-menu button, .notice-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.search-item:hover, .search-item.is-active, .topbar-menu a:hover, .topbar-menu button:hover, .notice-item:hover {
    background: #f6f3ff;
}
.search-item strong, .notice-item strong { display: block; font-size: 13px; }
.search-item small, .notice-item small { display: block; color: var(--muted); font-size: 12px; }
.search-item em, .search-item-type {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}
.search-item-icon, .notice-dot {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.search-empty { padding: 16px 12px; color: var(--muted); }
.topbar-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(280px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(43, 39, 64, .12);
    z-index: 45;
    padding-bottom: 8px;
    max-height: min(70vh, 420px);
    overflow: auto;
}
.topbar-menu.apps-menu { width: min(340px, calc(100vw - 24px)); }
html.notice-open { overflow: hidden; }
.notice-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
}
.notice-drawer[hidden] { display: none !important; }
.notice-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 39, 64, .45);
    opacity: 0;
    transition: opacity .28s ease;
}
.notice-drawer.is-open .notice-drawer-backdrop { opacity: 1; }
.notice-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100vw);
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -12px 0 32px rgba(43, 39, 64, .14);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1;
}
.notice-drawer.is-open .notice-drawer-panel { transform: translateX(0); }
.notice-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 10px;
    flex-shrink: 0;
}
.notice-drawer-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.notice-drawer-actions { display: flex; align-items: center; gap: 6px; }
.notice-clear-btn {
    border: 1px solid #1b4689;
    background: #1b4689;
    color: #fff;
    font: 700 11px/1 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 12px;
    cursor: pointer;
}
.notice-clear-btn:hover { background: #163a73; border-color: #163a73; color: #fff; }
.notice-clear-btn[hidden] { display: none !important; }
.inbox-toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: min(420px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid #dbe3ef;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
    animation: inboxToastIn .34s cubic-bezier(.22, 1, .36, 1);
}
.inbox-toast[hidden] { display: none !important; }
.inbox-toast.is-document {
    border-color: #bfd3ef;
    box-shadow: 0 16px 40px rgba(27, 70, 137, .18);
}
.inbox-toast-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 14px 12px 14px 14px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.inbox-toast-card img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e8eef7;
}
.inbox-toast-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #2b579a;
    font-size: 28px;
    line-height: 1;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}
.inbox-toast-icon i,
.inbox-toast-icon .md-file-type-icon {
    display: block;
}
.inbox-toast-icon .md-file-type-icon {
    width: 32px;
    height: auto;
    object-fit: contain;
}
.inbox-toast-card strong {
    display: block;
    font-size: 14px;
    color: #0b3a6e;
}
.inbox-toast-card small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
.inbox-toast-close {
    border: 0;
    border-left: 1px solid #e6ebf2;
    background: transparent;
    color: #64748b;
    width: 36px;
    cursor: pointer;
}
.inbox-toast-close:hover { background: #f8fafc; color: #0f172a; }
@keyframes inboxToastIn {
    from { opacity: 0; transform: translateY(-14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes inboxDocPulse {
    0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(27, 70, 137, .12), 0 0 0 0 rgba(27, 70, 137, .18); }
    50% { transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(27, 70, 137, .18), 0 0 0 8px rgba(27, 70, 137, 0); }
}
@keyframes inboxDocBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-3px) rotate(-4deg); }
    70% { transform: translateY(1px) rotate(3deg); }
}
@keyframes inboxDocPop {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.12); }
    70% { transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
    .inbox-toast,
    .inbox-toast-icon,
    .inbox-toast-icon i,
    .notice-card-icon,
    .notice-card-icon i { animation: none; }
}
html.theme-dark .inbox-toast { background: var(--surface); color: var(--text); border-color: #334155; }
html.theme-dark .notice-clear-btn { background: #93c5fd; color: #0f172a; border-color: #93c5fd; }
html.theme-dark .inbox-toast-card strong { color: #93c5fd; }
html.theme-dark .inbox-toast-close { border-left-color: #334155; }
html.theme-dark .inbox-toast-icon {
    background: #1e293b;
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px #334155;
}
.notice-drawer-search {
    padding: 0 20px 12px;
    flex-shrink: 0;
}
.notice-drawer-search input {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    padding: 10px 12px;
    font: inherit;
    color: var(--text);
    border-radius: 8px;
}
.notice-drawer-kicker {
    margin: 0;
    padding: 4px 4px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.notice-drawer-list {
    flex: 1;
    overflow: auto;
    padding: 8px 16px 20px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.notice-empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: min(52vh, 420px);
    padding: 28px 18px;
    text-align: center;
    color: #64748b;
}
.notice-empty strong {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.notice-empty small {
    font-size: 13px;
    line-height: 1.4;
    max-width: 220px;
}
.notice-empty-icon {
    position: relative;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    color: #0b3a6e;
    margin-bottom: 4px;
}
.notice-empty-icon svg {
    position: relative;
    z-index: 1;
    animation: noticeEmptyFloat 2.4s ease-in-out infinite;
}
.notice-empty-ring {
    position: absolute;
    inset: 0;
    border: 1.5px dashed rgba(11, 58, 110, .28);
    border-radius: 50%;
    animation: noticeEmptyPulse 2.4s ease-out infinite;
}
.notice-empty-ring.is-delay {
    animation-delay: 1.1s;
}
@keyframes noticeEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes noticeEmptyPulse {
    0% { transform: scale(.72); opacity: .7; }
    70% { transform: scale(1.08); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .notice-empty-icon svg,
    .notice-empty-ring { animation: none; }
}
html.theme-dark .notice-empty strong { color: #e2e8f0; }
html.theme-dark .notice-empty-icon { color: #93c5fd; }
html.theme-dark .notice-empty-ring { border-color: rgba(147, 197, 253, .35); }
.notice-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    text-decoration: none;
}
.notice-card:hover { background: #f7f9fc; }
.notice-card.is-document {
    border-color: #c7dbf3;
    background: linear-gradient(180deg, #f7fafd 0%, #fff 70%);
}
.notice-card.is-document:hover { background: #eef5fc; }
.notice-card .table-avatar { width: 40px; height: 40px; }
.notice-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #2b579a;
    font-size: 24px;
    line-height: 1;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}
.notice-card-icon i,
.notice-card-icon .md-file-type-icon {
    display: block;
}
.notice-card-icon .md-file-type-icon {
    width: 28px;
    height: auto;
    object-fit: contain;
}
.notice-card strong { display: block; font-size: 14px; }
.notice-card small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.notice-card em { display: block; color: var(--muted); font-size: 11px; font-style: normal; margin-top: 6px; }
html.theme-dark .notice-drawer-panel,
html.theme-dark .notice-card,
html.theme-dark .notice-drawer-search input { background: var(--surface); color: var(--text); }
html.theme-dark .notice-card:hover { background: #2a2638; }
html.theme-dark .notice-card.is-document {
    background: linear-gradient(180deg, #1a2740 0%, var(--surface) 70%);
    border-color: #334155;
}
html.theme-dark .notice-card-icon {
    background: #1e293b;
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px #334155;
}
.apps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px 8px 10px;
}
.apps-grid a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    color: var(--text);
}
.apps-grid a:hover { background: #f6f3ff; }
.apps-grid span { font-size: 12px; font-weight: 600; }
.notice-item em { display: block; color: var(--muted); font-size: 11px; font-style: normal; margin-top: 2px; }

.refresh-veil {
    position: fixed;
    inset: 0;
    background: rgba(246, 244, 251, .72);
    display: none;
    place-items: center;
    gap: 8px;
    z-index: 80;
    color: var(--text);
    font-weight: 600;
}
.refresh-veil.is-on { display: grid; }
.refresh-veil span { display: flex; align-items: center; gap: 8px; }
html.is-waiting, html.is-waiting body { cursor: wait; }
.wait-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(255, 255, 255, .78);
    display: grid;
    place-items: center;
}
.wait-overlay[hidden] { display: none !important; }
html.theme-dark .wait-overlay { background: rgba(22, 20, 31, .78); }
.refresh-spinner { animation: spin .8s linear infinite; }
.swal-tip-host { margin: 0 0 16px; }
.swal-banner {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 16px 0;
    padding: 14px 16px;
    z-index: 28;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    background: #edf7ea;
    color: #222;
    border: 1px solid #cfe6c6;
    border-radius: 0;
    box-shadow: none;
}
.swal-banner.is-tip {
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
}
.swal-banner[hidden] { display: none !important; }
.swal-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: transparent;
    color: #1a1a1a;
}
.swal-banner.is-tip .swal-icon {
    width: 22px;
    height: 22px;
    color: #111;
}
.swal-copy { flex: 1; min-width: 0; padding-right: 8px; }
.swal-copy strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1f1f1f;
    font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif;
}
.swal-copy p {
    margin: 4px 0 0;
    max-width: 72rem;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
    font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif;
}
.swal-tip-nav {
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    font: 700 16px/1 "Trebuchet MS", Arial, sans-serif;
    padding: 4px 6px;
    flex-shrink: 0;
}
.swal-tip-nav[hidden] { display: none !important; }
.swal-tip-nav:hover { color: #0f766e; }
.swal-tip-tools {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}
.swal-dismiss-forever {
    border: 0;
    background: transparent;
    color: #0f766e;
    cursor: pointer;
    font: 600 13px/1.2 "Trebuchet MS", Arial, sans-serif;
    padding: 4px 2px;
    white-space: nowrap;
}
.swal-dismiss-forever:hover { text-decoration: underline; }
.swal-close {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    padding: 0;
}
.swal-close:hover { color: #111; background: rgba(0,0,0,.04); }
.swal-inline-link { color: #0f766e; font-weight: 700; }
.swal-banner.is-success { background: #edf7ea; border-color: #cfe6c6; }
.swal-banner.is-success .swal-icon { color: #111; }
.swal-banner.is-pending { background: #fff8e8; border-color: #f0dfb4; }
.swal-banner.is-pending .swal-icon { color: #b45309; }
.swal-banner.is-failed { background: #fff1f1; border-color: #f0c9c9; }
.swal-banner.is-failed .swal-icon { color: #be123c; }
.swal-banner.is-notfound { background: #f3f7fc; border-color: #d4e0f0; }
.swal-banner.is-notfound .swal-icon { color: #1b4689; }
@media (max-width: 720px) {
    .swal-banner.is-tip {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .swal-tip-tools {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
}
.auth-shell > .swal-banner {
    width: min(960px, 100%);
    margin: 0 0 22px;
    order: -1;
}
.auth-card .swal-banner,
.page-body > .swal-banner,
.portal-page > .swal-banner { margin: 0 0 16px; }
.portal-main { background-color: #f4f6fb; }
.portal-main::before { opacity: .18; }
.portal-page .feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0 0 18px;
}
.portal-page .feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 250px;
    padding: 28px 24px 22px;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}
.portal-page .feature-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #6d5efc;
    color: #fff;
}
.portal-page .feature-card h3 {
    margin: 0 0 10px;
    color: #1e2433;
    font-size: 18px;
    font-weight: 700;
}
.portal-page .feature-card p {
    margin: 0;
    color: #8b93a7;
    font-size: 14px;
    line-height: 1.6;
}
.portal-page .feature-more {
    margin-top: auto;
    padding-top: 22px;
    color: #2f6bff;
    font-size: 14px;
    font-weight: 600;
}
.portal-page .feature-more:hover { color: #1d4ed8; }
html.theme-dark .portal-page .feature-card { background: #2a2638; border-color: #443e58; }
html.theme-dark .portal-page .feature-card h3 { color: var(--text); }
html.theme-dark .portal-page .feature-card p { color: #b7b1c9; }
html.theme-dark .portal-page .feature-more { color: #93c5fd; }
@media (min-width: 768px) {
    .portal-page .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .portal-page .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}
html.theme-dark .swal-banner.is-success { background: #1c3a28; border-color: #2d5a3c; }
html.theme-dark .swal-banner.is-success .swal-copy strong,
html.theme-dark .swal-banner.is-success .swal-copy p,
html.theme-dark .swal-banner.is-success .swal-icon { color: #d8f3dc; }
html.theme-dark .swal-banner.is-pending { background: #3d2e14; border-color: #5a4318; }
html.theme-dark .swal-banner.is-pending .swal-copy strong,
html.theme-dark .swal-banner.is-pending .swal-copy p,
html.theme-dark .swal-banner.is-pending .swal-icon { color: #fde68a; }
html.theme-dark .swal-banner.is-failed { background: #3f1515; border-color: #5a2020; }
html.theme-dark .swal-banner.is-failed .swal-copy strong,
html.theme-dark .swal-banner.is-failed .swal-copy p,
html.theme-dark .swal-banner.is-failed .swal-icon { color: #fecaca; }
html.theme-dark .swal-banner.is-notfound { background: #15243d; border-color: #1e3560; }
html.theme-dark .swal-banner.is-notfound .swal-copy strong,
html.theme-dark .swal-banner.is-notfound .swal-copy p,
html.theme-dark .swal-banner.is-notfound .swal-icon { color: #bfdbfe; }
html.theme-dark .swal-dismiss-forever { color: #5eead4; }
html.theme-dark .swal-action {
    background: #fff;
    color: #111827;
    border-color: #fff;
}
html.theme-dark .swal-close { color: #fb7185; }
@media (max-width: 520px) {
    .swal-banner {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 16px 40px 14px 14px;
    }
    .swal-brand { min-width: 0; }
    .swal-copy { flex: 1 1 calc(100% - 90px); }
    .swal-action { min-height: 36px; }
}
.page-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-dim { opacity: .35; transition: opacity .2s ease; }

.settings-list { padding: 6px 0 12px; }
.settings-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}
.settings-row span { color: var(--muted); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 20px; }

html.theme-dark {
    --bg: #16141f;
    --surface: #211e2c;
    --text: #f4f1fb;
    --muted: #a8a2be;
    --line: #342f45;
    --sidebar: #1b1826;
    --accent-soft: #1a2d52;
    --shadow: 0 1px 2px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.18);
}
html.theme-dark body,
html.theme-dark .staff-body,
html.theme-dark .portal-shell { background: var(--bg); color: var(--text); }
html.theme-dark .staff-main,
html.theme-dark .portal-main {
    background-image: none;
    background-color: var(--bg);
}
html.theme-dark .staff-main::before,
html.theme-dark .portal-main::before { display: none; }
html.theme-dark .search,
html.theme-dark .search-wrap,
html.theme-dark .toolbar input,
html.theme-dark .toolbar select,
html.theme-dark .btn-outline,
html.theme-dark .search-kbd { background: #1a1724; color: var(--text); border-color: var(--line); }
html.theme-dark .search-pill-field strong { color: var(--text); }
html.theme-dark .search-pill-input,
html.theme-dark .search-pill-field select { color: var(--text); }
html.theme-dark .search-area-toggle { color: var(--muted); }
html.theme-dark .search-wrap:focus-within,
html.theme-dark body.search-centered .search-wrap {
    border-color: #60a5fa;
    box-shadow:
        0 0 0 3px rgba(96, 165, 250, .18),
        0 14px 32px rgba(0, 0, 0, .35);
}
html.theme-dark .search-area-menu { background: #211e2c; border-color: #342f45; }
html.theme-dark .search-area-menu button { color: var(--text); }
html.theme-dark .search-area-menu button:hover,
html.theme-dark .search-area-menu button.is-active { background: #2c2838; color: #7dd3c7; }
html.theme-dark a.action-btn,
html.theme-dark button.action-btn,
html.theme-dark span.action-btn {
    background: var(--surface);
    color: #9cbcde;
    border-color: #6d8fbf;
}
html.theme-dark a.action-btn:hover,
html.theme-dark button.action-btn:hover,
html.theme-dark span.action-btn:hover {
    background: var(--accent-soft);
    color: #c5d8ef;
}
html.theme-dark .search-item:hover,
html.theme-dark .topbar-menu a:hover,
html.theme-dark .topbar-menu button:hover,
html.theme-dark table.data th { background: #2a2638; }
html.theme-dark .side-nav a[data-tone="navy"] { --ico: #9ec0ef; }
html.theme-dark .side-nav a[data-tone="blue"] { --ico: #93c5fd; }
html.theme-dark .side-nav a[data-tone="teal"] { --ico: #5eead4; }
html.theme-dark .side-nav a[data-tone="violet"] { --ico: #c4b5fd; }
html.theme-dark .side-nav a[data-tone="orange"] { --ico: #fdba74; }
html.theme-dark .side-nav a[data-tone="rose"] { --ico: #f9a8d4; }
html.theme-dark .side-nav a[data-tone="sky"] { --ico: #7dd3fc; }
html.theme-dark .side-nav a[data-tone="green"] { --ico: #6ee7b7; }
html.theme-dark .side-nav a[data-tone="amber"] { --ico: #fcd34d; }
html.theme-dark .side-nav a[data-tone="slate"] { --ico: #cbd5e1; }
html.theme-dark .side-nav a.is-active {
    background: var(--accent);
    color: #fff;
}
html.theme-dark .side-group.is-open > .side-group-row > a {
    background: #2a3144;
    color: #dbe7ff;
    box-shadow: inset 3px 0 0 #7aa2e3;
}
html.theme-dark .side-group.is-open > .side-group-row > a .ri { color: #dbe7ff; }
html.theme-dark .sidebar-workspace .side-nav a.is-active,
html.theme-dark .sidebar-workspace .side-nav a.is-active:hover,
html.theme-dark .sidebar-workspace .side-nav a.is-active[data-tone],
html.theme-dark .sidebar-workspace .side-nav a.is-active[data-tone]:hover {
    background: #2a3144;
    color: #dbe7ff;
    box-shadow: inset 3px 0 0 #7aa2e3;
}
html.theme-dark .sidebar-workspace .side-nav a.is-active .ri,
html.theme-dark .sidebar-workspace .side-nav a.is-active:hover .ri,
html.theme-dark .sidebar-workspace .side-nav a.is-active[data-tone] .ri,
html.theme-dark .sidebar-workspace .side-nav a.is-active[data-tone]:hover .ri { color: #dbe7ff; }
html.theme-dark .brand-plate { background: #fff; border-color: #d7e3f3; }
html.theme-dark .refresh-veil { background: rgba(22, 20, 31, .72); }
html.theme-dark .seg button, html.theme-dark .btn-soft, html.theme-dark .kpi-icon-circle { background: #2a2638; color: var(--text); }
html.theme-dark .kpi-card, html.theme-dark .fin-card { background: #2a2638; border-color: #443e58; box-shadow: none; }
html.theme-dark .admin-dash .page { background: transparent; }
html.theme-dark .admin-dash .overview-card,
html.theme-dark .admin-dash .lead-card,
html.theme-dark .admin-dash .panel { background: #2a2638; border-color: #443e58; box-shadow: none; }
html.theme-dark .kpi-label, html.theme-dark .fin-body small, html.theme-dark .kpi-trend { color: #a8a2be; }
html.theme-dark .fin-head { color: var(--text); }
html.theme-dark .fin-badge.up { background: #1c3a28; color: #86efac; }
html.theme-dark .fin-badge.down { background: #3f1515; color: #fca5a5; }
html.theme-dark .fin-badge.flat { color: #86efac; border-color: #2d5a3c; }
html.theme-dark .ring-track { stroke: #3a3450; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dashCardIn {
    from { opacity: 0; transform: translateY(26px) scale(.98); }
    to { opacity: 1; transform: none; }
}
@keyframes dashChartIn {
    from { opacity: 0; transform: scaleX(.15); }
    to { opacity: 1; transform: scaleX(1); }
}
@keyframes dashRowIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes patternDrift {
    from { background-position: 0 0; }
    to { background-position: var(--pattern-size) var(--pattern-size); }
}
@keyframes authPop {
    from { opacity: 0; transform: translateY(36px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes swalIconPop {
    0% { transform: scale(.45); opacity: 0; }
    70% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes swalCheckDraw {
    to { stroke-dashoffset: 0; }
}

.page-body {
    animation: fadeIn .45s ease both;
}
.kpi-card, .overview-card, .lead-card, .panel, .placeholder-panel, .module-card, .dept-tile, .auth-card, .chart-card {
    transition: transform .22s ease, box-shadow .22s ease;
}
body.is-motion .kpi-card,
body.is-motion .overview-card,
body.is-motion .lead-card,
body.is-motion .panel,
body.is-motion .placeholder-panel,
body.is-motion .module-card,
body.is-motion .dept-tile,
body.is-motion .chart-card,
body.is-motion .page-header,
body.is-motion .card {
    animation: fadeUp .55s ease both;
}
.kpi-grid > *:nth-child(1) { animation-delay: .04s; }
.kpi-grid > *:nth-child(2) { animation-delay: .1s; }
.kpi-grid > *:nth-child(3) { animation-delay: .16s; }
.kpi-grid > *:nth-child(4) { animation-delay: .22s; }
.split-grid > *:nth-child(1) { animation-delay: .2s; }
.split-grid > *:nth-child(2) { animation-delay: .28s; }
.page-body > .panel, .portal-page > .panel { animation-delay: .34s; }

.kpi-card:hover, .overview-card:hover, .lead-card:hover, .panel:hover, .module-card:hover, .dept-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(43, 39, 64, .1);
}

table.data tbody tr {
    transition: background .18s ease;
}
body.is-motion table.data tbody tr {
    animation: dashRowIn .48s cubic-bezier(.22, .9, .24, 1) both;
}
table.data tbody tr:hover { background: #eef3f9; }
html.theme-dark table.data tbody tr:hover { background: #2a2638; }

@media (prefers-reduced-motion: reduce) {
    .page-body, .kpi-card, .overview-card, .lead-card, .panel, .placeholder-panel,
    .module-card, .dept-tile, .auth-card, .auth-logo, .auth-body, .auth-body::before, table.data tbody tr,
    .stat-card, .stat-chart,
    .sidebar.is-arriving .brand-plate, .sidebar.is-arriving .brand-plate::before,
    .sidebar.is-arriving .brand::after, .sidebar.is-arriving .nav-label,
    .sidebar.is-arriving .side-nav > a, .sidebar.is-arriving .side-group,
    .sidebar.is-arriving .sidebar-collapse,
    .side-group.is-open > .side-sub > a {
        animation: none !important;
        transition: none !important;
    }
}

.kpi-grid, .fin-grid, .split-grid, .dept-grid, .module-grid, .triple-grid {
    display: grid;
    gap: 14px;
    margin: 0 0 16px;
    min-width: 0;
    align-items: stretch;
}
.kpi-grid, .fin-grid, .split-grid, .triple-grid { grid-template-columns: minmax(0, 1fr); }
.dept-grid, .module-grid { grid-template-columns: minmax(0, 1fr); }

.kpi-card, .fin-card {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 132px;
    min-width: 0;
    background: #f6f4fb;
    border: 1px solid #d9d3e8;
    border-radius: 0;
    box-shadow: 0 10px 24px rgba(88, 72, 140, .06);
}
.admin-dash .page {
    background: transparent;
}
.ws-head { margin: 0 0 20px; }
.ws-kicker {
    margin-bottom: 4px;
    color: #047857;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}
.ws-head h1 {
    margin: 0;
    color: #020617;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}
.ws-head p {
    margin: 6px 0 0;
    max-width: 42rem;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}
.admin-dash .stat-card,
.admin-dash .sales-card,
.admin-dash .donut-card,
.admin-dash .panel,
.admin-dash .overview-card,
.admin-dash .lead-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.admin-dash .panel-head,
.admin-dash .sales-top,
.admin-dash .card-head {
    border-bottom: 1px solid #f1f5f9;
}
.ws-feed { display: grid; }
.ws-feed-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
}
.ws-feed-item:first-child { border-top: 0; }
.ws-feed-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #047857;
}
.ws-feed-item strong { display: block; color: #0f172a; font-size: 14px; font-weight: 600; }
.ws-feed-item p { margin: 2px 0 0; color: #64748b; font-size: 13px; }
.ws-feed-item small { color: #94a3b8; font-size: 12px; }
html.theme-dark .ws-head h1 { color: #f8fafc; }
html.theme-dark .ws-kicker { color: #6ee7b7; }
html.theme-dark .ws-feed-item strong { color: #f8fafc; }
html.theme-dark .ws-feed-mark { background: #064e3b; border-color: #065f46; color: #6ee7b7; }
.admin-dash .kpi-card,
.admin-dash .fin-card,
.admin-dash .overview-card,
.admin-dash .lead-card,
.admin-dash .panel {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 18px rgba(16, 24, 40, .05);
}
.kpi-top, .fin-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.kpi-left { min-width: 0; flex: 1; }
.kpi-label {
    display: block;
    color: #9a94ad;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}
.kpi-mid { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; min-width: 0; }
.kpi-icon-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #eceaf2;
    color: #6d6880;
    flex-shrink: 0;
}
.kpi-card strong, .fin-body strong {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.kpi-card strong.kpi-name, .fin-body strong.kpi-name { font-size: clamp(15px, 1.5vw, 18px); letter-spacing: 0; }
.kpi-trend { margin: 0; font-size: 12px; color: #8b86a0; display: flex; align-items: center; gap: 8px; }
.kpi-trend .up { color: #16a34a; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.kpi-trend .down { color: #ef4444; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.kpi-trend .flat { color: #8b86a0; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.kpi-chart { width: min(112px, 42%); height: 52px; flex: 0 1 112px; min-width: 0; }
.kpi-chart-ring { width: 58px; height: 58px; flex: 0 0 58px; }
.mini-chart, .mini-radial { width: 100%; height: 100%; display: block; }
.mini-radial { width: 58px; height: 58px; }
.fin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; color: #3c3752; }
.fin-head span { min-width: 0; }
.fin-badge {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.fin-badge.up { background: #e7f8ee; color: #16a34a; }
.fin-badge.down { background: #fdecec; color: #e11d48; }
.fin-badge.flat { background: transparent; color: #16a34a; border: 1px solid #b7ebc9; }
.fin-body { align-items: flex-end; }
.fin-body small { display: block; margin-top: 2px; color: #9a94ad; font-size: 12px; }
.fin-chart { width: min(118px, 46%); height: 52px; flex: 0 1 118px; min-width: 0; }
.fin-flip .fin-body { flex-direction: row-reverse; }
.fin-flip .fin-body > div:last-child { text-align: right; }
.burger-box {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.burger-box span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}
.menu-toggle.is-open .burger-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open .burger-box span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .burger-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.overview-card, .panel { padding: 0; overflow: hidden; }
.lead-card {
    padding: 0 0 12px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.crm-sms { margin: 0 0 16px; }
.admin-dash .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.intake-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; color: #64748b; font-size: 12px; font-weight: 600; }
.intake-legend span { display: inline-flex; align-items: center; gap: 6px; }
.intake-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.intake-empty { margin: 0; padding: 72px 16px; text-align: center; color: #64748b; }
#chart {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}
.share-donut { display: block; width: 100%; height: auto; overflow: visible; }
.share-donut .share-title { font-size: 16px; font-weight: 700; fill: #1e293b; }
.share-donut .share-name { font-size: 14px; font-weight: 600; fill: #1e293b; }
.share-donut .share-pct { font-size: 13px; font-weight: 700; stroke: #fff; stroke-width: 4px; paint-order: stroke; }
.share-donut .share-slice { stroke: #fff; stroke-width: 2; }
html.theme-dark .share-donut .share-title,
html.theme-dark .share-donut .share-name { fill: #e7e4f2; }
html.theme-dark .share-donut .share-pct { stroke: #2a2638; }
html.theme-dark .share-donut .share-slice { stroke: #2a2638; }
.overview-card .card-head { flex-wrap: wrap; }
.intake-set { display: flex; align-items: center; gap: 8px; }
.intake-set label { display: none; align-items: center; gap: 6px; color: #526075; font-size: 12px; font-weight: 700; }
.intake-set label.is-on { display: inline-flex; }
.intake-set input { min-height: 32px; border: 1px solid #d5dbe6; border-radius: 6px; padding: 0 8px; background: #fff; font: inherit; font-weight: 600; color: #1e293b; }
.intake-set em { font-style: normal; color: #1b4689; font-weight: 700; white-space: nowrap; }
.overview-svg { display: block; width: 100%; height: auto; max-height: none; }
.panel-head, .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.panel-head h2, .card-head h2 { margin: 0; font-size: 16px; }
.panel-head .sub { color: var(--muted); font-weight: 500; font-size: 13px; }
.panel-head-tools {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.table-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: min(400px, 100%);
    max-width: 420px;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #d8dce6;
    border-radius: 999px;
    background: #fff;
    color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .12);
    outline: 0;
}
.panel-head .table-search,
.panel-head .table-search.discover-search {
    width: min(400px, 100%);
    max-width: 420px;
    flex: 0 0 auto;
}
.panel-head .table-search .discover-go,
.table-search .discover-go,
.table-search .discover-icon:nth-of-type(n+2) {
    display: none !important;
}
.table-search:focus-within {
    border-color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .18);
}
.table-search input[type="search"] {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    outline: 0;
    background: transparent;
    color: #1d2433;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.table-search input[type="search"]:focus {
    outline: 0;
    border: 0 !important;
    box-shadow: none !important;
}
.table-search input[type="search"]::-webkit-search-decoration,
.table-search input[type="search"]::-webkit-search-cancel-button,
.table-search input[type="search"]::-webkit-search-results-button,
.table-search input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}
.table-search::after,
.table-search .discover-go,
.table-search .search-pill-divider,
.md-center-search::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.table-search input[type="search"]::placeholder {
    color: #64748b;
    font-weight: 600;
    opacity: 1;
}
.table-search svg,
.table-search .discover-icon {
    flex: 0 0 auto;
    color: #6d5efc;
}
.due-badge { white-space: nowrap; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.seg { display: flex; gap: 6px; }
.seg button, .btn-soft {
    border: 0;
    background: #f4f1fb;
    color: #5c5773;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.seg button.is-active { background: var(--accent); color: #fff; }
.overview-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; min-width: 0; align-items: stretch; }
.overview-body > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.stat-mini { margin-bottom: 14px; }
.stat-mini span { display: block; color: var(--muted); font-size: 12px; }
.stat-mini strong { display: block; font-size: 20px; margin: 4px 0; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    background: #eefbf3;
    color: var(--green);
}
.chip.down { background: #fef2f2; color: var(--red); }
.chip.flat { background: #f4f1fb; color: #5c5773; }
.lead-card .lead-body { padding: 12px 18px 18px; text-align: center; }
.donut { display: block; margin: 0 auto; }
.source-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; text-align: left; margin-top: 10px; }
.source-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.source-item small { color: var(--muted); font-weight: 600; }
.source-item .left { display: flex; align-items: center; gap: 6px; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .field, .toolbar select, .toolbar input[type="search"] {
    border: 1px solid var(--line);
    background: #fff;
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
    min-height: 44px;
    min-width: 0;
    flex: 1 1 140px;
}
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.data {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}
table.data th, table.data td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-family: var(--font);
}
table.data th {
    color: var(--muted);
    font-weight: 700;
    background: #faf9fd;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
}
table.data tr:last-child td { border-bottom: 0; }
table.data a { color: var(--text); font-weight: 600; }
table.data a.action-btn { color: var(--accent); font-weight: 500; }
table.data td:last-child { white-space: nowrap; width: 1%; }
.progress-track { display: flex; height: 8px; background: #f0ecf8; overflow: hidden; width: 120px; }
.progress-track i { display: block; height: 100%; flex: 1; background: #e8e4f3; }
.progress-track i.on { background: #22c55e; }
.progress-track i.danger { background: var(--red); }
.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    background: #e7f7f6;
    color: #0f8f88;
}
.badge.info { background: #d7f4f2; color: #0f8f88; }
.badge.warn { background: #fff1cc; color: #b7791f; }
.badge.ok { background: #d9f5e6; color: #14804a; }
.badge.danger { background: #ffe0e8; color: #d61f69; }
.badge.closed { background: #e8eaed; color: #5f6368; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person-copy { display: grid; min-width: 0; line-height: 1.25; }
.person-copy strong { display: block; font-size: 14px; font-weight: 700; color: #1e293b; }
.person-copy small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #64748b; }
html.theme-dark .person-copy strong,
html.theme-dark .dir-person strong { color: var(--text); }
html.theme-dark .person-copy small,
html.theme-dark .dir-person small { color: #94a3b8; }
.person > :not(.initial):not(.table-avatar) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.person > .person-copy { overflow: hidden; text-overflow: unset; white-space: normal; }
.table-avatar,
.initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.table-avatar {
    object-fit: cover;
    background: #d7e0ec;
    display: block;
}
.table-avatar.is-default-avatar {
    object-fit: cover;
    background: #d7e0ec;
}
.clients-table .table-avatar {
    width: 40px;
    height: 40px;
}
.client-view-body { padding: 16px 18px 22px; text-align: center; }
.client-view-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 0 auto 12px;
    background: var(--accent-soft);
    border: 1px solid var(--line);
}
.client-view-body h3 { margin-bottom: 4px; }
.client-view-body .settings-list { text-align: left; margin-top: 12px; }
.initial {
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #7c6cf0;
}
.initial.tone-0 { background: #7c6cf0; }
.initial.tone-1 { background: #14b8a6; }
.initial.tone-2 { background: #22c55e; }
.initial.tone-3 { background: #f59e0b; }
.initial.tone-4 { background: #ef4444; }
.initial.tone-5 { background: #f97316; }
.avatar { overflow: hidden; }
.avatar-img { border-radius: 50%; }

.timeline { padding: 8px 18px 16px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; }
.timeline-dot {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.timeline-dot.ok { background: #eefbf3; color: var(--green); }
.timeline-dot.warn { background: #fff6e5; color: var(--orange); }
.timeline-dot.info { background: #e8f4ff; color: #2563eb; }
.timeline-item h5 { margin: 0 0 4px; font-size: 13px; }
.timeline-item p { margin: 0; color: var(--muted); font-size: 12px; }

.btn, .btn-outline, .btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid transparent;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}
.btn-dark { background: var(--accent); color: #fff; }
.btn { background: var(--accent); color: #fff; }
.btn-outline { border-color: var(--line); background: #fff; color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
a.action-btn,
button.action-btn,
span.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 108px;
    min-height: 40px;
    padding: 8px 12px 8px 14px;
    background: #fff;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
}
a.action-btn:hover,
button.action-btn:hover,
span.action-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.action-btn .action-meta {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.workspace-hero, .placeholder-panel, .module-card, .dept-tile { padding: 18px; }
.dept-tile { border-left: 3px solid var(--accent, #1b4689); color: inherit; }
.dept-tile span, .module-card span { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }

.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
}
.auth-logo {
    display: block;
    width: min(280px, 86vw);
    height: auto;
    margin: 0 auto 20px;
    animation: fadeUp .55s ease both;
}
.auth-card { max-width: 440px; width: 100%; padding: 22px 18px; }
.auth-body .auth-card {
    animation: authPop .75s cubic-bezier(.2, .8, .2, 1) .06s both;
    box-shadow:
        0 8px 18px rgba(27, 70, 137, .10),
        0 22px 48px rgba(27, 70, 137, .16),
        0 2px 4px rgba(43, 39, 64, .06);
}
.auth-card .muted a {
    color: var(--accent);
    font-weight: 600;
}
.auth-card .muted a:hover {
    text-decoration: underline;
}
.eyebrow {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.auth-card form.stack > * {
    animation: fadeUp .45s ease both;
}
.auth-card form.stack > *:nth-child(1) { animation-delay: .12s; }
.auth-card form.stack > *:nth-child(2) { animation-delay: .18s; }
.auth-card form.stack > *:nth-child(3) { animation-delay: .24s; }
.auth-card form.stack > *:nth-child(4) { animation-delay: .3s; }
.auth-card form.stack > *:nth-child(5) { animation-delay: .36s; }
.auth-forgot {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 0;
}
.auth-forgot a {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}
.auth-forgot a:hover { text-decoration: underline; }
.pass-field { position: relative; display: block; }
.pass-field input { padding-right: 44px; }
.pass-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transform: translateY(-50%);
}
.pass-eye:hover { color: var(--accent, #1b4689); background: #f3f6fb; }
.landing { width: 100%; }
.stack { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 13px; }
input:not(.search):not([type="search"]):not([type="file"]) {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
}
.alert.error { background: #fef2f2; color: var(--red); padding: 10px 12px; }
.alert.ok { background: #eefbf3; color: #15803d; padding: 10px 12px; margin-bottom: 16px; }
.alert.error { margin-bottom: 16px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-row .btn, .btn-row .btn-outline { flex: 1 1 140px; }
.landing { display: grid; gap: 20px; }
.icon-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
.search-close, .search-toggle { display: inline-grid; }
.search-close {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
}
body.sidebar-open { overflow: hidden; }
.signout-btn span, .user-chip-copy { display: none; }
.topbar-user .icon-btn[data-action="refresh"],
.topbar-user .icon-btn[data-menu="apps"],
.topbar-user .icon-btn[data-menu="settings"] { display: none; }
.signout-btn { display: none; }
.progress-track { width: 100%; max-width: 120px; }

.panel:has(.profile-form) { border-radius: 12px; }
.profile-form { padding: 16px 18px 20px; }
.profile-form .btn { border-radius: 8px; }
.photo-preview {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.photo-preview-copy { min-width: 0; display: grid; gap: 12px; justify-items: start; }
.photo-preview-copy .muted { margin: 0; line-height: 1.5; }
.photo-preview .dropzone { width: 100%; margin: 0; }
.photo-preview img, .avatar-lg, .profile-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: var(--accent-soft);
    color: #fff;
    display: block;
    flex-shrink: 0;
    border: 1px solid var(--line);
    overflow: hidden;
}
.photo-preview .profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line), 0 10px 22px rgba(43, 39, 64, .12);
}
@media (max-width: 640px) {
    .photo-preview { grid-template-columns: 1fr; }
}
.avatar-img { object-fit: cover; padding: 0; width: 32px; height: 32px; }
.lead-card, .overview-card, .panel, .kpi-card { min-width: 0; }
.file-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px dashed var(--line);
    margin: 10px 0;
    cursor: pointer;
}
.file-field input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.settings-row { flex-wrap: wrap; }

@media (max-width: 767px) {
    table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    table.data, table.data tbody { display: block; width: 100%; max-width: 100%; min-width: 0 !important; }
    table.data tbody tr {
        display: grid;
        gap: 0;
        margin: 0 0 12px;
        border: 1px solid var(--line);
        background: var(--surface);
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }
    table.data th, table.data td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }
    table.data td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        min-width: 0;
        max-width: 100%;
        flex: 0 0 auto;
    }
    table.data td > * {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-align: left;
    }
    table.data td a {
        display: inline-block;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    table.data td[data-label=""] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    table.data td[data-label=""]::before { content: none; }
    table.data td:has(.app-row-actions),
    table.data td:has(.dir-icon),
    table.data td:has(.btn),
    table.data td:has(.btn-outline) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }
    table.data td:has(.app-row-actions)::before,
    table.data td:has(.dir-icon)::before,
    table.data td:has(.btn)::before,
    table.data td:has(.btn-outline)::before {
        flex: 0 0 auto;
        width: 100%;
        margin: 0;
        text-align: left;
    }
    table.data td:last-child {
        width: 100% !important;
        white-space: normal !important;
    }
    .app-row-actions,
    .md-doc-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }
    .app-row-actions > .btn,
    .app-row-actions > .btn-outline,
    .app-row-actions > button,
    .app-row-actions > a,
    .app-row-actions > form,
    .app-row-actions > .dir-icon,
    .md-doc-actions > .btn,
    .md-doc-actions > .btn-outline,
    .md-doc-actions > button,
    .md-doc-actions > a,
    .md-doc-actions > form,
    .md-doc-actions > .dir-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .app-row-actions > form,
    .md-doc-actions > form {
        display: flex;
        margin: 0;
    }
    .app-row-actions > form > .btn,
    .app-row-actions > form > .btn-outline,
    .app-row-actions > form > button,
    .app-row-actions > form > .dir-icon,
    .md-doc-actions > form > .btn,
    .md-doc-actions > form > .btn-outline,
    .md-doc-actions > form > button,
    .md-doc-actions > form > .dir-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 36px !important;
    }
    table.data td.col-hide-sm { display: none; }
    table.data tr.is-open td.col-hide-sm { display: grid; }
    .table-wrap,
    .table-responsive,
    .card-table,
    .md-table-wrap,
    .client-workspace-table-wrap,
    .report-table-board,
    .fit-table .table-wrap {
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        max-width: 100%;
        width: 100%;
        touch-action: pan-x pan-y;
    }
    /* Keep non-stacked tables scrollable; card/stacked tables must fit the viewport */
    .table-wrap > table:not(.data):not(.md-table),
    .table-responsive > table:not(.data):not(.md-table),
    .card-table table:not(.data):not(.md-table),
    .md-table-wrap table:not(.data):not(.md-table),
    .client-workspace-table-wrap table:not(.data):not(.md-table) {
        min-width: 640px;
    }
    .table-wrap > table.data,
    .table-wrap > table.md-table,
    .table-responsive > table.data,
    .table-responsive > table.md-table,
    .md-table-wrap > table.data,
    .md-table-wrap > table.md-table,
    .client-workspace-table-wrap > table.data,
    .client-workspace-table-wrap > table.md-table,
    table.data,
    table.md-table {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }
    .search-wrap {
        display: none;
        position: absolute;
        left: 8px;
        right: 8px;
        top: 8px;
        z-index: 35;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 16px 12px 12px;
        border-radius: 24px;
        max-width: none;
    }
    .topbar.search-open .search-wrap { display: flex; }
    .topbar.search-open .search-pill-extra { display: flex; }
    .topbar.search-open .search-pill-divider { display: none; }
    .topbar.search-open .search-pill-field { padding: 8px 4px; }
    .topbar.search-open .search-pill-go { align-self: flex-end; margin-top: 8px; }
    .topbar.search-open .topbar-user,
    .topbar.search-open .topbar-start { visibility: hidden; }
}

@media (min-width: 375px) {
    .page, .portal-page { padding: 16px 14px 36px; }
}

@media (min-width: 430px) {
    .kpi-grid, .fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dept-grid, .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .icon-btn { min-width: 40px; min-height: 40px; width: 40px; height: 40px; }
}

@media (min-width: 768px) {
    .topbar, .portal-header { padding: 12px 18px; gap: 12px; }
    .page, .portal-page { padding: 20px 18px 40px; }
    .search-wrap { max-width: 400px; flex: 0 1 380px; display: flex; position: relative; left: auto; right: auto; top: auto; height: 42px; flex-direction: row; padding: 3px 3px 3px 12px; border-radius: 999px; }
    .search-toggle, .search-close { display: none; }
    .topbar-user .icon-btn[data-action="refresh"],
    .topbar-user .icon-btn[data-menu="apps"],
    .topbar-user .icon-btn[data-menu="settings"] { display: grid; }
    .kpi-grid, .fin-grid, .triple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-grid { grid-template-columns: minmax(0, 1fr); }
    .swal-banner { margin: 16px 18px 0; }
    table.data thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: table-header-group; }
    table.data { display: table; width: 100%; }
    table.data tbody { display: table-row-group; width: auto; }
    table.data tbody tr { display: table-row; width: auto; margin: 0; border: 0; }
    table.data th, table.data td { display: table-cell; width: auto; }
    table.data td::before { content: none; }
    table.data td.col-hide-sm { display: table-cell; }
    table.data td:has([data-action="row-toggle"]) { display: none; }
    .clients-table th.col-hide-sm,
    .clients-table td.col-hide-sm { display: none; }
    .auth-shell { padding: 48px 24px; }
    .auth-card { padding: 28px; }
}

@keyframes sidebar-peek-fade {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
    .staff-body, .portal-shell {
        grid-template-columns: 216px minmax(0, 1fr);
    }
    html.sidebar-collapsed .staff-body,
    html.sidebar-collapsed .portal-shell { grid-template-columns: 72px minmax(0, 1fr); }
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        max-width: none;
        z-index: 40;
        transform: none;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition:
            width .36s cubic-bezier(.22, .9, .24, 1),
            max-width .36s cubic-bezier(.22, .9, .24, 1),
            box-shadow .36s cubic-bezier(.22, .9, .24, 1);
    }
    /* Unlocked collapsed: keep main layout on the 72px rail; peek overlays wider. */
    html.sidebar-collapsed:not(.sidebar-locked) .staff-body,
    html.sidebar-collapsed:not(.sidebar-locked) .portal-shell {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }
    html.sidebar-locked .staff-body,
    html.sidebar-locked .portal-shell,
    html:not(.sidebar-collapsed) .staff-body,
    html:not(.sidebar-collapsed) .portal-shell {
        grid-template-columns: 216px minmax(0, 1fr) !important;
    }
    html.sidebar-collapsed:not(.sidebar-locked):not(.sidebar-peek) #app-sidebar.sidebar {
        width: 72px !important;
        max-width: 72px !important;
        position: sticky !important;
        left: auto !important;
        box-shadow: none !important;
        overflow-x: hidden;
        overflow-y: auto;
    }
    /* Hover peek: slide open over content (grid stays 72px; width animates) */
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) #app-sidebar.sidebar {
        width: 216px !important;
        max-width: 216px !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 60 !important;
        box-shadow: 12px 0 32px rgba(0, 20, 50, .22) !important;
        overflow-x: hidden;
        overflow-y: auto;
    }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .brand-copy,
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .nav-label,
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .sidebar-dept-title,
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .sidebar-logout span,
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > a,
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > .side-group {
        animation: sidebar-peek-fade .34s cubic-bezier(.22, .9, .24, 1) both;
    }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(1) { animation-delay: .04s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(2) { animation-delay: .07s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(3) { animation-delay: .1s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(4) { animation-delay: .13s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(5) { animation-delay: .16s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(6) { animation-delay: .19s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(7) { animation-delay: .22s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(8) { animation-delay: .25s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(9) { animation-delay: .28s; }
    html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > :nth-child(10) { animation-delay: .31s; }
    @media (prefers-reduced-motion: reduce) {
        .sidebar { transition: none !important; }
        html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .brand-copy,
        html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .nav-label,
        html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .sidebar-dept-title,
        html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .sidebar-logout span,
        html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > a,
        html.sidebar-collapsed.sidebar-peek:not(.sidebar-locked) .side-nav > .side-group {
            animation: none !important;
        }
    }
    /* Icon-rail chrome only when collapsed AND not peeking */
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand { flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 4px 0 12px; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand::after { display: none; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand-link { flex: 0; justify-content: center; width: 100%; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand-plate { width: 44px; height: 44px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: hidden; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand-logo { display: none !important; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand-mark-img { display: block !important; width: 44px; height: 44px; object-fit: contain; background: transparent; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .brand-copy,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .nav-label,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .sidebar-dept-title,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .side-nav a span,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .side-nav em,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .side-caret,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .side-sub,
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .sidebar-logout span { display: none !important; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .side-nav a { justify-content: center; padding: 10px 0; }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .sidebar-foot {
        padding: 12px 6px 6px;
        border-top: 1px solid rgba(255, 255, 255, .18);
        justify-items: center;
    }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .sidebar-logout {
        width: 44px;
        min-height: 44px;
        margin: 0 auto;
        padding: 0;
        gap: 0;
        border: 1px solid rgba(255, 255, 255, .55);
    }
    html.sidebar-collapsed:not(.sidebar-peek):not(.sidebar-locked) .sidebar-collapse { margin: 0; }
    html.sidebar-locked #app-sidebar.sidebar {
        width: 100% !important;
        max-width: none !important;
        position: sticky !important;
        z-index: 40 !important;
        overflow-x: hidden;
        overflow-y: auto;
    }
    /* Keep topbar inside main column; never paint over sidebar */
    .staff-main,
    .portal-main {
        isolation: isolate;
        overflow-x: hidden;
    }
    .topbar,
    .portal-header {
        z-index: 20;
    }
    #app-sidebar.sidebar {
        z-index: 40;
    }
    html.sidebar-locked .sidebar-collapse,
    html.sidebar-locked .sidebar-collapse.is-locked {
        background: rgba(255, 255, 255, .2);
        border-color: rgba(255, 255, 255, .55);
        color: #fff;
    }
    .menu-toggle, .sidebar-close, .topbar-start { display: none; }
    .sidebar-collapse { display: inline-flex; }
    .sidebar-backdrop { display: none !important; }
    .kpi-grid, .fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, .95fr); }
    .split-grid:has(#chart) { grid-template-columns: minmax(0, 1.72fr) minmax(240px, 0.68fr); }
    .split-grid.split-activity { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.55fr); }
    .split-activity .fit-table table.data { min-width: 0; }
    .clients-table th.col-hide-sm,
    .clients-table td.col-hide-sm { display: none; }
    .triple-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .overview-body { grid-template-columns: 220px minmax(0, 1fr); }
    .signout-btn { display: inline-flex; }
    .user-chip-copy { display: block; }
    .search-wrap { max-width: 440px; flex: 0 1 420px; }
    .page, .portal-page { padding: 20px 24px 40px; }
    .swal-banner { margin: 16px 24px 0; }
}

@media (min-width: 1280px) {
    .kpi-grid, .fin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dept-grid, .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .topbar-menu.apps-menu { width: 360px; }
    .search-pill-need { flex: 1.35; }
}

@media (min-width: 1440px) {
    .page, .portal-page { padding: 24px 32px 48px; }
    .swal-banner { margin: 16px 32px 0; }
    .dept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
    .page, .portal-page { padding: 28px 40px 56px; max-width: 1760px; }
    .staff-main, .portal-main { align-items: stretch; }
}

@media (hover: none) {
    .kpi-card:hover, .overview-card:hover, .lead-card:hover, .panel:hover, .module-card:hover, .dept-tile:hover {
        transform: none;
    }
}

.bd-post { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.bd-post img { width: 72px; height: 52px; object-fit: cover; }
.tool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0 18px; }
.tool-card { background: #f3eefc; color: #3a315c; border-radius: 12px; box-shadow: 0 8px 20px rgba(80, 50, 140, .08); overflow: hidden; }
.tool-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px dotted rgba(90, 70, 140, .35); }
.tool-card header strong { font-size: 15px; line-height: 1.3; }
.tool-card-tools { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tool-card-tools button, .tool-card-tools a { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.72); color: #5c5478; display: grid; place-items: center; padding: 0; }
.tool-card-tools form { margin: 0; }
.tool-card-tools svg { width: 14px; height: 14px; }
.tool-card-body { padding: 14px; }
.tool-card-photo { display: flex; align-items: center; justify-content: center; height: 210px; margin: 0 0 12px; border-radius: 8px; background: #fff; overflow: hidden; }
.tool-card-photo img { display: block; max-width: 100%; max-height: 210px; width: auto; height: auto; object-fit: contain; }
.tool-card-body p { margin: 0 0 14px; color: #6b6284; font-size: 14px; line-height: 1.45; }
.tool-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-card-go { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: #6d4bd8; color: #fff; font-weight: 700; cursor: pointer; }
.tool-card-dl { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid #6d4bd8; border-radius: 8px; background: #fff; color: #5b3cc4; font-weight: 700; }
.tool-card-dl svg { width: 14px; height: 14px; }
.tool-card.is-lead { background: #6d4bd8; color: #fff; }
.tool-card.is-lead header { border-bottom-color: rgba(255,255,255,.45); }
.tool-card.is-lead .tool-card-tools button, .tool-card.is-lead .tool-card-tools a { background: rgba(255,255,255,.18); color: #fff; }
.tool-card.is-lead .tool-card-body p { color: rgba(255,255,255,.88); }
.tool-card.is-lead .tool-card-photo { background: rgba(255,255,255,.14); }
.tool-card.is-lead .tool-card-go { background: #fff; color: #5b3cc4; }
.tool-card.is-lead .tool-card-dl { border-color: #fff; background: transparent; color: #fff; }
.tool-card.is-collapsed .tool-card-body { display: none; }
.tool-card.is-collapsed header { border-bottom: 0; }
.hero-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.hero-modal[hidden] { display: none !important; }
.hero-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.hero-modal-card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 0;
    background: #fff;
    color: #1e293b;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
#staff-add-modal .hero-modal-card {
    width: min(920px, calc(100vw - 48px));
}
#staff-edit-modal.hero-modal {
    place-items: center;
    padding: 28px 24px;
    overflow: auto;
}
#staff-edit-modal .hero-modal-backdrop {
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}
#staff-edit-modal .hero-modal-card.mat-staff-wizard {
    width: min(1100px, calc(100vw - 72px));
    max-width: 1100px;
    max-height: calc(100vh - 56px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 22px 56px rgba(15, 23, 42, .22);
}
#staff-edit-modal .mat-field {
    font-weight: 500;
    color: #64748b;
    gap: 6px;
}
#staff-edit-modal .mat-field input[type="text"],
#staff-edit-modal .mat-field input[type="email"],
#staff-edit-modal .mat-field input[type="password"],
#staff-edit-modal .mat-field input[type="tel"],
#staff-edit-modal .mat-field select {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 4px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
#staff-edit-modal .mat-field select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}
#staff-edit-modal .mat-field input:focus,
#staff-edit-modal .mat-field select:focus {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
#staff-edit-modal .mat-field .dept-add {
    margin-top: 8px;
}
#staff-edit-modal .sms-hint {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
#staff-edit-modal .mat-wizard-body {
    min-height: 0;
    padding: 28px 36px 28px;
}
#staff-edit-modal .mat-staff-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 28px;
}
#staff-edit-modal .mat-staff-edit-head strong {
    margin: 0;
    font: 700 16px/1.3 var(--font);
    color: #0f172a;
}
#staff-edit-modal .mat-wizard-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
#staff-edit-modal .mat-staff-edit-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 28px 22px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}
#staff-edit-modal .mat-staff-edit-foot .mat-wizard-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    min-width: 110px;
    margin: 0;
}
#staff-edit-modal .sms-hint {
    margin-top: 18px;
}
#client-allocate-modal .hero-modal-card.mat-lead-form {
    width: min(1200px, calc(100vw - 28px));
    max-width: 1200px;
    border-radius: 0 !important;
}
#client-allocate-modal .allocate-editor { display: grid; gap: 6px; }
#client-allocate-modal .allocate-editor > span { font-size: 13px; font-weight: 700; }
#client-allocate-modal .word-editor { width: 100%; }
#client-allocate-modal .word-editor-save { display: none; }
#staff-add-modal .tool-card-body.stack { gap: 8px; padding: 10px 14px 12px; }
#staff-add-modal .dir-photo { gap: 8px; }
#staff-add-modal .dir-photo p { margin: 0; font-size: 12px; }
#staff-add-modal .dir-form-grid { gap: 8px 12px; align-items: start; }
#staff-add-modal .dir-form-grid label { align-content: start; }
#staff-add-modal .dir-form-grid label { gap: 4px; }
#staff-add-modal .dir-form input,
#staff-add-modal .dir-form select { height: 34px; }
#staff-add-modal .dropzone { min-height: 220px; }
#staff-add-modal .hero-modal-actions { margin-top: 2px; }
#staff-add-modal .muted { margin: 0; font-size: 12px; }
.hero-modal-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; }
.hero-modal-card header strong { font-size: 16px; color: #0f172a; }
.hero-modal-x { width: 32px; height: 32px; min-width: 32px; border: 0; border-radius: 50%; background: #fff; color: #64748b; display: grid; place-items: center; cursor: pointer; }
.hero-modal-card .stack { display: grid; gap: 12px; }
.hero-modal-card label, .hero-modal-card .drop-field { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: #334155; }
.hero-modal-card input[type="text"],
.hero-modal-card input[type="email"],
.hero-modal-card input[type="password"],
.hero-modal-card select { font: inherit; font-weight: 500; width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; }
.hero-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.hero-modal-actions .tool-card-dl { cursor: pointer; font: inherit; }
body.hero-modal-open { overflow: hidden; }
.tool-card.is-form { margin-top: 4px; }
.tool-card.is-form .stack { display: grid; gap: 10px; max-width: 640px; }
.tool-card.is-form label, .tool-card.is-form .drop-field { display: grid; gap: 6px; font-weight: 700; font-size: 13px; }
.tool-card.is-form input, .tool-card.is-form textarea, .tool-card.is-form select { font: inherit; font-weight: 500; width: 100%; padding: 8px 10px; border: 1px solid #ddd4ef; border-radius: 8px; background: #fff; color: #241c3a; }
@media (max-width: 900px) { .tool-cards { grid-template-columns: 1fr; } }
.bd-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.bd-actions form { margin: 0; }
.tra-body { background: #fff; color: #222; font-family: var(--font); }
.tra-wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.tra-header { position: sticky; top: 0; z-index: 40; height: 36px; }
.tra-top { background: #111827; color: #fff; font-size: 13px; font-weight: 700; }
.tra-top-row, .tra-nav-row, .tra-footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tra-top-row { min-height: 36px; flex-wrap: nowrap; }
.tra-top a, .tra-footer a { color: #fff; }
.tra-top a:hover { color: #d6e4f7; }
.tra-top-links { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.tra-drawer-account { display: none; }
.pub-lang { display: inline-flex; align-items: center; gap: 6px; }
.pub-lang button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    cursor: pointer;
}
.pub-lang button.is-on { background: #fff; color: #111827; border-color: #fff; }
.pub-lang .lang-flag {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    background: none;
    box-shadow: none;
}
.tra-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 36px;
    z-index: 6;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.18));
}
.tra-nav-row { min-height: 74px; }
.tra-nav-logo { height: 46px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.tra-nav-mark { height: 52px; width: auto; background: transparent; }
.tra-drawer-logo { display: none; }
.tra-nav-links { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; flex: 1; }
.tra-nav a { padding: 8px 12px; border-radius: 8px; color: #fff; font-size: 14px; }
.tra-nav a:hover { background: rgba(255,255,255,.16); }
.tra-drop { position: relative; }
.tra-drop > a::after {
    /* Text caret — avoid CSS border-triangles (they paint white flecks on dark drawer) */
    content: "▾";
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    line-height: 1;
    color: currentColor;
    border: 0;
    background: none;
    vertical-align: middle;
    transform: none;
    transition: transform .2s ease;
}
.tra-drop:hover > a::after,
.tra-drop.is-open > a::after { transform: rotate(180deg); }
.tra-drop-menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    min-width: 280px;
    padding: 8px;
    background: #111;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
    z-index: 8;
}
.tra-drop:hover .tra-drop-menu,
.tra-drop:focus-within .tra-drop-menu,
.tra-drop.is-open .tra-drop-menu { display: grid; }
.tra-drop-menu a { display: block; text-align: left; white-space: nowrap; font-weight: 700; }
.tra-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
.tra-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}
.tra-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tra-burger.is-open span:nth-child(2) { opacity: 0; }
.tra-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tra-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 32, .48);
    z-index: 70;
}
.tra-backdrop[hidden] { display: none !important; }
body.pub-nav-open { overflow: hidden; }
/* Desktop: keep header above page chrome while menu open.
   Mobile drawer must sit ABOVE the white header — see max-width:1100 block. */
body.pub-nav-open .tra-header { z-index: 100; }
body.pub-nav-open .tra-nav { z-index: 2; }
.tra-slider { position: relative; background: #111; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.tra-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.tra-slide.is-active { opacity: 1; z-index: 1; }
.tra-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    display: block;
    transform: scale(1.08);
    transform-origin: center 55%;
}
.tra-slide.is-active img { animation: none; }
.tra-hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: #fff;
    padding: 24px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .68));
}
.tra-hero-copy strong { font-size: clamp(28px, 4.4vw, 52px); font-weight: 800; max-width: 16ch; line-height: 1.05; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.tra-hero-copy span { margin-top: 10px; font-size: 18px; font-weight: 700; }
.tra-search { pointer-events: auto; position: relative; width: min(740px, 100%); max-width: 100%; margin: 18px auto 0; box-sizing: border-box; }
#hero-search,
.px-hero-search {
    scroll-margin-top: 120px;
}
.tra-search.discover-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(740px, 100%);
    max-width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 5px 5px 5px 16px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
    box-sizing: border-box;
}
.tra-search input {
    width: auto;
    flex: 1;
    min-width: 0;
    height: 40px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    font: 600 16px var(--font);
    color: #222;
    background: transparent;
}
.tra-search input:focus { outline: none; }
.tra-search > button,
.tra-search .discover-go {
    position: static;
    width: auto;
    min-width: 118px;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #123a6f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex: none;
    white-space: nowrap;
}
.tra-search > button:hover,
.tra-search .discover-go:hover {
    background: #0c2749;
    color: #fff;
}
.tra-search .discover-icon { color: #94a3b8; display: flex; flex: none; }
.tra-hero-copy .discover-picks {
    justify-content: center;
    width: min(740px, 100%);
    max-width: 100%;
    margin-top: 12px;
    color: rgba(255,255,255,.88);
}
.tra-hero-copy .discover-picks button { background: rgba(255,255,255,.16); color: #fff; }
.tra-search svg { width: 20px; height: 20px; }
.tra-search-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    color: #111;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(0,0,0,.2);
    max-height: 260px;
    overflow: auto;
    z-index: 4;
}
.tra-search-list button {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    padding: 12px 16px;
    font-weight: 800;
    color: #111;
}
.tra-search-list button:hover { background: #eef3fa; color: #1b4689; }
.tra-slide.is-active .tra-hero-copy strong,
.tra-slide.is-active .tra-hero-copy span { animation: tra-rise .7s ease both; }
.tra-slide.is-active .tra-hero-copy span { animation-delay: .12s; }
.tra-slide-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(14, 42, 82, .55); color: #fff; border: 0; width: 42px; height: 64px; font-size: 28px; transition: background .2s ease; }
.tra-slide-btn:hover { background: #1b4689; }
.tra-slide-btn.prev { left: 0; }
.tra-slide-btn.next { right: 0; }
.tra-services { background: #e6e6e6; padding: 28px 0 36px; overflow-x: clip; }
.tra-section-title { display: flex; justify-content: center; align-items: center; gap: 8px; border-bottom: 2px solid #1b4689; width: fit-content; margin: 8px auto 22px; color: #1b4689; }
.tra-section-title h2, .tra-guide h2, .tra-help h2, .tra-stats h2 { margin: 0; font-size: 22px; }
.tra-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 32px;
    align-items: start;
}
.tra-svc {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-width: 0;
    padding: 8px 10px 4px;
    text-align: center;
    color: #111;
    font-family: var(--font);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.tra-svc::before { display: none; }
.tra-svc:hover { background: none; box-shadow: none; transform: translateY(-6px); }
.tra-svc span {
    width: 78px;
    height: 78px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fff;
    color: #1a56c4;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tra-svc span svg { display: block; fill: none; stroke: #1a56c4; }
.tra-svc:hover span {
    transform: translateY(-6px);
    box-shadow: 0 10px 18px rgba(26, 86, 196, .22);
    background: #fff;
}
.tra-svc:hover span svg { stroke: #1a56c4; }
.tra-svc strong {
    display: block;
    margin: 0 auto;
    max-width: 240px;
    min-height: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    text-transform: none;
    letter-spacing: 0;
}
.tra-svc small {
    display: block;
    margin: 5px auto 0;
    max-width: 240px;
    color: #6b6b6b;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}
.tra-svc:hover strong { color: #1a1a1a; }
.tra-svc:hover small { color: #6b6b6b; }
.ql-head {
    --ql-head-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206 56' fill='%23fff'%3E%3Crect x='6' y='6.2' width='44.3' height='8.8'/%3E%3Crect x='6' y='23.6' width='44.3' height='8.8'/%3E%3Crect x='6' y='41' width='44.3' height='8.8'/%3E%3Crect x='62.5' y='6' width='8.8' height='44.3'/%3E%3Crect x='79.9' y='6' width='8.8' height='44.3'/%3E%3Crect x='97.3' y='6' width='8.8' height='44.3'/%3E%3Cg transform='translate(103 0)'%3E%3Crect x='6' y='6.2' width='44.3' height='8.8'/%3E%3Crect x='6' y='23.6' width='44.3' height='8.8'/%3E%3Crect x='6' y='41' width='44.3' height='8.8'/%3E%3Crect x='62.5' y='6' width='8.8' height='44.3'/%3E%3Crect x='79.9' y='6' width='8.8' height='44.3'/%3E%3Crect x='97.3' y='6' width='8.8' height='44.3'/%3E%3C/g%3E%3C/svg%3E");
    /* Full-bleed width to page edges (same as px-wish / tra-help bands) */
    width: 100vw;
    max-width: 100vw;
    margin: 40px 0 28px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 56px 24px 60px;
    box-sizing: border-box;
    text-align: center;
    scroll-margin-top: 90px;
    background-color: #0e2a52;
    background-image: var(--ql-head-pattern), var(--ql-head-pattern);
    background-repeat: repeat-x, repeat-x;
    background-position: center top, center bottom;
    background-size: auto 25px, auto 25px;
    color: #fff;
}
.ql-head .tra-section-title {
    margin: 0 auto 12px;
    color: #fff;
    border-bottom-color: rgba(255,255,255,.85);
}
.ql-head .tra-section-title h2 { color: #fff; }
.ql-head .tra-section-title svg { stroke: #fff; color: #fff; }
.ql-head p {
    margin: 0 auto;
    max-width: 640px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.5;
}
.ql-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
    margin-top: 8px;
    padding: 4px 0 8px;
    align-items: stretch;
}
.ql-logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    min-height: 108px;
    padding: 12px 8px 10px;
    text-decoration: none;
    color: #1a1a1a;
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ql-logo {
    position: relative;
    width: 100%;
    height: 52px;
    display: grid;
    place-items: center;
    background: transparent;
}
.ql-logo img {
    max-width: 72px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    transition: transform .25s ease;
}
.ql-logo-link strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.2;
    color: #334155;
}
.ql-logo-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27, 70, 137, .12); }
.ql-logo-link:hover img { transform: scale(1.08); }
.ql-logo-link:hover strong { color: #1a56c4; }
.ql-logo-link.tra-await { opacity: 0; }
.ql-logo-link.tra-await.is-in {
    opacity: 1;
    animation: homeQlPop .62s cubic-bezier(.22, 1.18, .36, 1) backwards;
    animation-delay: calc(var(--ql-i, 0) * 50ms);
    transition: transform .28s ease, box-shadow .28s ease;
}
.ql-logo-link.tra-await.is-in .ql-logo img {
    animation: homeIconBounce .55s cubic-bezier(.22, 1.2, .36, 1) backwards;
    animation-delay: calc(var(--ql-i, 0) * 50ms + .12s);
}
.tra-wave { display: block; width: 100%; height: 48px; margin-top: -1px; }
.tra-news { padding: 18px 0 36px; }
.tra-news .tra-wrap { width: min(1360px, calc(100% - 24px)); }
.tra-news-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .82fr); gap: 32px; align-items: start; }
.tra-news-col, .tra-notice-col, .tra-news-side, .tra-news-row > span { min-width: 0; }
.tra-block-head { display: flex; border-bottom: 2px solid #1b4689; margin-bottom: 12px; }
.tra-block-head h2 { display: inline-flex; align-items: center; gap: 8px; background: #1b4689; color: #fff; margin: 0; padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 18px; }
.tra-block-head svg { width: 18px; height: 18px; }
.tra-news-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(210px, .78fr); gap: 18px; align-items: stretch; }
.tra-feature { position: relative; display: block; overflow: hidden; min-height: 0; border-radius: 12px; background: #0e2a52; color: #fff; }
.tra-feature img { width: 100%; height: 420px; object-fit: cover; object-position: center 20%; display: block; transition: transform 7s ease; }
.tra-feature:hover img { transform: scale(1.08); }
.tra-feature-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.tra-feature-cap strong { display: block; text-transform: uppercase; font-size: 16px; line-height: 1.3; }
.tra-feature-cap a, .tra-news-row a { color: inherit; }
.tra-feature-cap small, .tra-news-row small, .tra-notice small { display: block; margin-top: 6px; color: #d7d7d7; font-weight: 700; font-size: 13px; }
.tra-news-side { display: flex; flex-direction: column; justify-content: space-between; }
.tra-news-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: center; color: #111; padding: 8px 0; transition: transform .3s ease; }
.tra-news-row img { width: 108px; height: 78px; object-fit: cover; object-position: center top; background: #0e2a52; }
.tra-news-row img.is-cutout, .tra-feature img.is-cutout { object-fit: contain; object-position: center; background: #0e2a52; }
.tra-news-row strong, .tra-notice strong { display: block; text-transform: uppercase; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.tra-news-row small, .tra-notice small { color: #666; }
.tra-news-row:hover { transform: translateY(-2px); }
.tra-more { display: flex; justify-content: flex-end; margin-top: 10px; color: #1b4689; font-weight: 800; }
body.tra-page-news .tra-header,
body.tra-page-overview .tra-header,
body.tra-page-service .tra-header { height: auto; background: #0e2a52; }
body.tra-page-news .tra-nav,
body.tra-page-overview .tra-nav,
body.tra-page-service .tra-nav { position: relative; top: auto; background: #0e2a52; }
.svc-page { background: #fff; padding-bottom: 56px; color: #111; font-family: var(--font); }
.svc-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0 12px; border-bottom: 1px solid #e5e7eb; margin-bottom: 28px; }
.svc-top h1 { margin: 0; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .72fr); gap: 40px; align-items: start; }
.svc-hero { width: 100%; max-height: 420px; object-fit: cover; object-position: center; display: block; margin: 0 0 20px; background: #0e2a52; }
.svc-main h2 { margin: 0 0 14px; font-size: 28px; font-weight: 800; color: #0e2a52; line-height: 1.25; }
.svc-lead { margin: 0 0 28px; color: #333; font-size: 16px; line-height: 1.75; }
.svc-process, .svc-note { margin: 0 0 28px; padding: 22px 22px 8px; background: #f3f6fb; border-radius: 16px; }
.svc-process h3, .svc-note h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: #0e2a52; }
.svc-steps { list-style: none; margin: 0; padding: 0; }
.svc-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; margin: 0 0 18px; }
.svc-step-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #0e2a52; color: #fff; font-weight: 800; }
.svc-steps strong { display: block; margin: 0 0 6px; font-size: 16px; }
.svc-steps p, .svc-note p { margin: 0; color: #4b5563; font-size: 15px; line-height: 1.6; }
.svc-checks { margin: 14px 0 12px; padding: 0 0 0 1.1em; color: #333; }
.svc-checks li { margin: 0 0 8px; }
.svc-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.svc-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #0e2a52; color: #fff; font-weight: 800; text-decoration: none; }
.svc-cta:hover { background: #16386c; color: #fff; }
.svc-cta-ghost { background: #fff; color: #0e2a52; border: 2px solid #0e2a52; }
.svc-cta-ghost:hover { background: #e7eef8; color: #0e2a52; }
.svc-side h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #111; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.svc-side-list { display: flex; flex-direction: column; gap: 2px; margin: 0 0 28px; }
.svc-side-list a { display: block; padding: 10px 12px; color: #111; font-size: 13.5px; font-weight: 700; text-decoration: none; border-radius: 8px; }
.svc-side-list a:hover { background: #f3f6fb; color: #1b4689; }
.svc-side-list a.is-current { background: #0e2a52; color: #fff; }
.svc-side-box { padding: 18px; background: #0e2a52; color: #fff; border-radius: 14px; }
.svc-side-box h3 { border-bottom-color: rgba(255,255,255,.35); color: #fff; }
.svc-side-box p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #d6e4f7; }
.svc-side-box a { color: #ffe500; font-weight: 800; }
.info-page .info-hero { margin: 0 0 28px; overflow: hidden; border-radius: 16px; background: #0e2a52; }
.info-page .info-hero img { display: block; width: 100%; max-height: 420px; object-fit: cover; object-position: center; }
.info-head { max-width: 860px; margin: 0 0 28px; }
.info-head h2 { margin: 0 0 12px; font-size: 30px; font-weight: 800; color: #0e2a52; line-height: 1.25; }
.info-intro { margin: 0 0 12px; color: #111; font-size: 17px; font-weight: 700; line-height: 1.55; }
.info-head p { margin: 0 0 10px; color: #4b5563; font-size: 16px; line-height: 1.7; }
.info-doc { margin: 0 0 32px; padding: 18px; background: #f3f6fb; border-radius: 16px; }
.info-doc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.info-doc-bar h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0e2a52; }
.info-pdf-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.info-pdf { display: block; width: 100%; height: min(78vh, 920px); border: 0; background: #fff; }
@media (max-width: 900px) {
    .svc-layout { grid-template-columns: 1fr; }
    .svc-top { flex-direction: column; align-items: flex-start; }
    .info-pdf { height: 70vh; }
}
.tra-news-banner { background: #0e2a52; color: #fff; padding: 28px 0 32px; }
.tra-news-banner h1 { margin: 8px 0 0; font-size: 34px; }
.tra-news-banner a { color: #d6e4f7; font-weight: 800; }
.tra-story-list { padding: 28px 0 48px; }
.tra-story { background: #fff; margin: 0 auto 28px; max-width: 860px; box-shadow: 0 10px 28px rgba(14, 42, 82, .08); scroll-margin-top: 24px; }
.tra-story img { width: 100%; max-height: 480px; object-fit: cover; object-position: center top; display: block; background: #0e2a52; }
.tra-story img.is-cutout { object-fit: contain; object-position: center; max-height: 420px; }
.tra-story-copy { padding: 18px 22px 24px; }
.tra-story-copy h2 { margin: 8px 0 0; color: #111; font-size: 22px; line-height: 1.35; text-transform: uppercase; }
.tra-story-copy small { display: block; margin-top: 6px; color: #666; font-weight: 700; }
.tra-story-copy p { margin: 14px 0 0; color: #333; font-size: 16px; line-height: 1.65; }
.tra-story-empty { text-align: center; color: #555; padding: 24px 0; }
.news-read { background: #fff; padding-bottom: 36px; }
.news-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0 12px; border-bottom: 1px solid #e5e7eb; margin-bottom: 22px; }
.news-top h1 { margin: 0; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.news-crumb { margin: 0; color: #6b7280; font-size: 13px; font-weight: 700; text-align: right; }
.news-crumb a { color: #6b7280; }
.news-crumb span { margin: 0 4px; }
.news-layout { display: grid; grid-template-columns: 1.65fr .72fr; gap: 36px; align-items: start; padding-bottom: 20px; }
.news-kicker { margin: 0; color: #222; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.news-date { display: flex; align-items: center; gap: 6px; margin: 8px 0 16px; color: #666; font-size: 13px; font-weight: 700; }
.news-date svg { width: 16px; height: 16px; }
.news-article h2 { margin: 0 0 16px; color: #111; font-size: 22px; line-height: 1.35; text-transform: uppercase; }
.news-article > img { width: 100%; max-height: 420px; object-fit: cover; object-position: center top; display: block; margin: 0 0 16px; background: #0e2a52; }
.news-article > img.is-cutout { object-fit: contain; object-position: center; max-height: 360px; }
.news-body { color: #333; font-size: 16px; line-height: 1.75; }
.news-side h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid #111; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.news-latest { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ececec; color: #111; }
.news-latest img { width: 92px; height: 68px; object-fit: cover; object-position: center top; background: #0e2a52; }
.news-latest strong { display: block; font-size: 13px; line-height: 1.35; text-transform: uppercase; }
.news-latest small { display: block; margin-top: 6px; color: #666; font-weight: 700; }
.news-latest:hover strong { color: #1b4689; }
.auth-card .btn-outline { width: 100%; }
.auth-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid var(--accent, #1b4689);
    background: #fff;
    color: var(--accent, #1b4689);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(27, 70, 137, .12);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.auth-home svg { width: 18px; height: 18px; flex: none; }
.auth-home:hover { background: var(--accent, #1b4689); color: #fff; transform: translateY(-2px); }
.tra-more::after { content: " ?"; transition: transform .25s ease; display: inline-block; }
.tra-more:hover::after { transform: translateX(6px); }
.tra-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid #e5e7eb; transition: padding .25s ease, background .25s ease; }
.tra-new {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 4px 0 0;
    vertical-align: middle;
    color: #fff;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    isolation: isolate;
    animation: tra-new-pulse .85s steps(2, end) infinite;
}
.tra-new::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #e10600;
    clip-path: polygon(50% 0%, 58% 24%, 82% 6%, 70% 32%, 100% 28%, 78% 50%, 100% 72%, 70% 68%, 82% 94%, 58% 76%, 50% 100%, 42% 76%, 18% 94%, 30% 68%, 0% 72%, 22% 50%, 0% 28%, 30% 32%, 18% 6%, 42% 24%);
}
.tra-pdf { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #b42318; font-weight: 800; font-size: 13px; }
.tra-pdf svg { width: 22px; height: 28px; flex: none; }
.tra-feature-cap .tra-pdf { color: #fff; }
body.pdf-viewer-open { overflow: hidden; }
.pdf-viewer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    background: #f3f5f8;
    color: #1f2430;
}
.pdf-viewer[hidden] { display: none !important; }
.pdf-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid #e7ebf2;
}
.pdf-viewer-bar strong { font-size: 20px; font-weight: 700; }
.pdf-viewer-bar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pdf-viewer-bar-end { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pdf-viewer-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #1f2430;
    font: 700 13px/1 var(--font);
    cursor: pointer;
}
.pdf-viewer-back:hover { border-color: #2f6bff; color: #2f6bff; }
.pdf-viewer-crumb { color: #98a2b3; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-viewer-x {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f3f5f8;
    color: #475467;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.pdf-viewer-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #e5e7eb;
}
.pdf-viewer-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    flex: 0 0 auto;
    z-index: 2;
    padding: 12px 8px;
    background: #e5e7eb;
    border-bottom: 1px solid #d7dbe3;
}
.pdf-viewer-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.pdf-viewer-scroll-inner {
    box-sizing: border-box;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 32px;
}
.pdf-viewer-nav {
    display: inline-flex;
    align-items: stretch;
    background: #2f3542;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.pdf-viewer-nav button {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    min-height: 40px;
    padding: 0 14px;
    font: 600 13px/1 var(--font);
    cursor: pointer;
}
.pdf-viewer-nav button + button { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
.pdf-viewer-nav button:disabled { opacity: .4; cursor: default; }
.pdf-viewer-nav button:not(:disabled):hover { background: rgba(255,255,255,.08); }
.pdf-viewer-zoom,
.pdf-viewer-count input {
    height: 40px;
    border: 1px solid #e4e7ee;
    border-radius: 8px;
    background: #fff;
    color: #1f2430;
    font: 600 13px/1 var(--font);
}
.pdf-viewer-zoom { min-width: 84px; padding: 0 8px; }
.pdf-viewer-count { display: inline-flex; align-items: center; gap: 8px; color: #667085; font-weight: 600; }
.pdf-viewer-count input { width: 52px; text-align: center; padding: 0; }
.pdf-viewer-save,
button.pdf-viewer-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #2f6bff;
    border-radius: 8px;
    background: #fff;
    color: #2f6bff;
    font: 700 13px/1 var(--font);
    text-decoration: none;
    cursor: pointer;
}
.pdf-viewer-save:hover,
button.pdf-viewer-save:hover { background: #eef3ff; }
.pdf-viewer-status { margin: 0 auto 12px; text-align: center; color: #667085; }
.pdf-viewer-status[hidden] { display: none; }
.pdf-sheet {
    flex: 0 0 auto;
    width: fit-content;
    max-width: none;
    margin: 0;
    background: transparent;
    line-height: 0;
}
.pdf-sheet[hidden] { display: none !important; }
.pdf-page {
    position: relative;
    margin: 0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 28px rgba(15, 23, 42, .12);
    overflow: hidden;
}
/* CSS size MUST come from JS only — never display the high-DPI bitmap at intrinsic size. */
.pdf-page canvas {
    display: block;
    position: relative;
    z-index: 1;
    max-width: none;
    image-rendering: auto;
}
.pdf-page .textLayer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    pointer-events: auto;
    transform-origin: 0 0;
}
.pdf-page .textLayer span,
.pdf-page .textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}
.pdf-page .textLayer ::selection {
    background: rgba(47, 107, 255, .28);
}
.pdf-viewer-frame,
.pdf-viewer-embed {
    display: block;
    width: min(960px, 100%);
    height: calc(100vh - 200px);
    min-height: 560px;
    margin: 0 auto;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.pdf-viewer-frame[hidden],
.pdf-viewer-embed[hidden] { display: none !important; }
.pdf-viewer-fallback {
    margin: 16px auto 0;
    text-align: center;
}
.pdf-viewer-fallback[hidden] { display: none !important; }
@keyframes tra-new-pulse {
    0%, 45% { opacity: 1; transform: scale(1); }
    55%, 100% { opacity: .2; transform: scale(.82); }
}
.tra-notice:hover { padding-left: 8px; background: #f4f7fb; }
.tra-guide { background: #f3f4f6; padding: 34px 0 40px; }
.tra-guide h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.tra-guide-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; }
.tra-jump { display: flex; max-width: 560px; margin-top: 16px; background: #fff; border: 1px solid #d5d5d5; }
.tra-jump select { flex: 1; min-height: 48px; border: 0; padding: 8px 12px; background: #fff; color: #222; font: inherit; }
.tra-jump button { border: 0; padding: 0 18px; background: #111; color: #fff; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tra-cal { display: flex; align-items: center; gap: 16px; }
.tra-cal strong { display: block; font-size: 18px; }
.tra-cal p { margin: 4px 0 12px; color: #444; max-width: 280px; }
.tra-cal-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; background: #111; color: #fff; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.tax-badge { position: relative; width: 132px; height: 148px; flex: none; }
.tax-badge::before { content: ""; position: absolute; left: 10px; right: 6px; top: 34px; bottom: 22px; background: #ffe500; border-radius: 64px 64px 16px 18px; }
.tax-badge-icon { position: absolute; z-index: 2; width: 58px; height: 58px; left: 34px; top: 0; }
.tax-badge > strong { position: absolute; z-index: 2; left: 22px; top: 62px; color: #111; font-size: 22px; line-height: .92; letter-spacing: -.03em; }
.tax-badge-line { position: absolute; z-index: 2; left: 24px; right: 22px; bottom: 40px; height: 5px; background: #111; }
.tax-badge-shadow { position: absolute; left: 8px; right: 0; bottom: 0; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.28), transparent 70%); }
.tax-badge-spark, .tax-badge-spark-b { position: absolute; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid #ffe500; }
.tax-badge-spark { right: 0; top: 18px; transform: rotate(28deg); }
.tax-badge-spark-b { left: 0; bottom: 36px; transform: rotate(-40deg) scale(.7); }
.tra-help {
    /* Match “What do you wish to do” — CRDB white bar motif top + bottom */
    --px-wish-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206 56' fill='%23fff'%3E%3Crect x='6' y='6.2' width='44.3' height='8.8'/%3E%3Crect x='6' y='23.6' width='44.3' height='8.8'/%3E%3Crect x='6' y='41' width='44.3' height='8.8'/%3E%3Crect x='62.5' y='6' width='8.8' height='44.3'/%3E%3Crect x='79.9' y='6' width='8.8' height='44.3'/%3E%3Crect x='97.3' y='6' width='8.8' height='44.3'/%3E%3Cg transform='translate(103 0)'%3E%3Crect x='6' y='6.2' width='44.3' height='8.8'/%3E%3Crect x='6' y='23.6' width='44.3' height='8.8'/%3E%3Crect x='6' y='41' width='44.3' height='8.8'/%3E%3Crect x='62.5' y='6' width='8.8' height='44.3'/%3E%3Crect x='79.9' y='6' width='8.8' height='44.3'/%3E%3Crect x='97.3' y='6' width='8.8' height='44.3'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: #0e2a52;
    background-image: var(--px-wish-pattern), var(--px-wish-pattern);
    background-repeat: repeat-x, repeat-x;
    background-position: center top, center bottom;
    background-size: auto 25px, auto 25px;
    font-family: var(--font);
}
.tra-help-stitch { display: none; }
.tra-help-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: center; padding: 56px 0 64px; }
.tra-help-photo { width: 168px; height: 168px; justify-self: center; border-radius: 50%; overflow: hidden; border: 6px solid rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(14, 42, 82, .28); background: #fff; }
.tra-help-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 74% 10%; transform: scale(1.28); transform-origin: 72% 22%; }
.tra-help-body { min-width: 0; text-align: center; }
.tra-help-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #c5d6ee; }
.tra-help h2 { margin: 0; text-transform: uppercase; color: #fff; font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
.tra-help h2 strong { font-weight: 800; }
.tra-help-body > p { margin: 10px 0 22px; color: rgba(255,255,255,.88); font-size: 15px; }
.tra-help-orbs { display: flex; justify-content: center; gap: 18px 28px; flex-wrap: wrap; }
.tra-help-orb { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 120px; max-width: 160px; color: #fff; text-decoration: none; }
.tra-help-orb-icon { width: 92px; height: 92px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.tra-help-orb-icon svg { width: 48px; height: 48px; }
.tra-help-orb-icon.is-wa { border-color: #fff; }
.tra-help-orb strong { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tra-help-orb small { font-size: 12px; font-weight: 600; color: #d6e4f7; text-align: center; line-height: 1.3; }
.tra-help-lines { display: block; text-align: left; line-height: 1.4; white-space: nowrap; }
.tra-help-orb:hover .tra-help-orb-icon { transform: translateY(-4px) scale(1.04); background: rgba(255,255,255,.16); border-color: #fff; }
.px-exp { padding: 56px 0 64px; background: #fff; color: #111; font-family: var(--font); }
.px-exp-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: center; }
.px-exp-stats { display: grid; gap: 22px; justify-items: center; }
.px-exp-stat { width: 210px; height: 210px; display: grid; place-content: center; text-align: center; border: 2px solid #0e2a52; border-radius: 50%; color: #0e2a52; background: radial-gradient(circle at 50% 40%, #e7eef8, #fff 62%); box-shadow: 0 10px 24px rgba(14, 42, 82, .08); }
.px-exp-stat strong { display: block; font-size: 58px; line-height: .95; font-weight: 800; letter-spacing: -.03em; }
.px-exp-stat span { display: block; margin-top: 8px; max-width: 9em; font-size: 14px; font-weight: 700; color: #3d4a56; }
.px-exp-kicker { display: inline-block; padding: 6px 12px; background: #e7eef8; color: #607089; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; }
.px-exp h2 { margin: 16px 0 26px; font-size: 42px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: #111; }
.px-exp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.px-exp-list { list-style: none; margin: 0; padding: 0; }
.px-exp-list li { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #4b5563; font-size: 16px; }
.px-exp-list li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #0e2a52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M3 8.2l3.2 3.2L13 4.6'/%3E%3C/svg%3E") center / 12px no-repeat; }
.px-exp-meter { margin: 0 0 28px; }
.px-exp-meter p { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
.px-exp-track { height: 6px; background: #eceff3; border-radius: 99px; }
.px-exp-track i {
    display: block;
    position: relative;
    width: 0;
    height: 100%;
    background: #2f6bff;
    border-radius: 99px;
    transition: width 1.4s cubic-bezier(.22, .9, .24, 1);
}
.px-exp-track i b {
    position: absolute;
    right: 0;
    top: -30px;
    padding: 3px 7px;
    background: #243044;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    border-radius: 4px;
}
.px-exp-track i::after { content: ""; position: absolute; right: 10px; top: -8px; border: 4px solid transparent; border-top-color: #243044; }
.px-ov { padding: 48px 0 64px; background: #fff; color: #111; font-family: var(--font); }
.px-ov h2 { margin: 0 0 22px; text-align: center; font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: #111; }
.px-ov-copy { max-width: 760px; margin: 0 auto 28px; text-align: justify; }
.px-ov-copy p { margin: 0 0 14px; color: #3d4654; font-size: 16px; line-height: 1.7; }
.px-ov-copy p:first-child { font-weight: 700; color: #111; text-align: center; }
.px-ov-teaser { position: relative; display: block; overflow: hidden; max-width: 920px; margin: 0 auto 28px; border-radius: 12px; background: #0f172a; box-shadow: 0 16px 36px rgba(15, 23, 42, .12); }
.px-ov-teaser img { display: block; width: 100%; height: 360px; object-fit: cover; }
.px-ov-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 0, 0, .92); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.px-ov-play::after { content: ""; position: absolute; left: 28px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.px-ov-ig { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; padding: 0 22px; margin: 0 auto; background: #0e2a52; color: #fff; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; text-decoration: none; }
.px-ov-ig:hover { color: #fff; background: #16386c; }
.ov-page { background: #fff; padding-bottom: 64px; color: #111; font-family: var(--font); }
.ov-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0 12px; border-bottom: 1px solid #e5e7eb; margin-bottom: 36px; }
.ov-top h1 { margin: 0; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.ov-hero h2 { margin: 0 0 22px; text-align: center; font-size: 36px; font-weight: 800; color: #111; }
.ov-copy { max-width: 760px; margin: 0 auto 32px; text-align: justify; }
.ov-copy p { margin: 0 0 14px; color: #3d4654; font-size: 16px; line-height: 1.7; }
.ov-copy p:first-child { font-weight: 700; color: #111; text-align: center; }
.ov-video { overflow: hidden; max-width: 920px; margin: 0 auto 40px; background: #111; }
.ov-video video { display: block; width: 100%; height: 430px; object-fit: contain; background: #111; }
.ov-acc { max-width: 920px; margin: 0 auto 56px; padding: 16px; background: #0e2a52; border-radius: 20px; color: #fff; }
.ov-acc-item { border-bottom: 1px solid rgba(255,255,255,.35); }
.ov-acc-item:last-child { border-bottom: 0; }
.ov-acc-item summary { list-style: none; cursor: pointer; padding: 18px 48px 18px 8px; font-size: 28px; font-weight: 800; position: relative; }
.ov-acc-item summary::-webkit-details-marker { display: none; }
.ov-acc-item summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 32px; font-weight: 500; line-height: 1; }
.ov-acc-item[open] summary::after { content: "–"; }
.ov-acc-body { padding: 0 8px 22px; }
.ov-acc-body p { margin: 0 0 12px; font-weight: 700; }
.ov-acc-body ul { margin: 0; padding: 0 0 0 22px; }
.ov-acc-body li { margin: 0 0 8px; line-height: 1.5; }
.ov-related h2 { margin: 0 0 28px; text-align: center; font-size: 28px; font-weight: 800; color: #0e2a52; }
.ov-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ov-related-card { display: flex; flex-direction: column; min-height: 180px; padding: 22px 20px; border-radius: 20px; background: #f3f6fb; color: #111; text-decoration: none; }
.ov-related-card strong { display: block; margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.ov-related-card p { margin: 0 0 auto; color: #4b5563; font-size: 14px; line-height: 1.45; flex: 1; }
.ov-related-card span { margin-top: 16px; color: #0e2a52; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.ov-related-card:hover { background: #e7eef8; color: #111; }
.tra-footer { position: relative; background: #fff; color: #243024; overflow: visible; }
.foot-stitch { height: 22px; background: #fff repeating-linear-gradient(90deg, #0e2a52 0 3px, transparent 3px 11px) center / 100% 12px no-repeat; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 36px; padding: 34px 0 10px; }
.foot-mid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .85fr); gap: 48px; align-items: center; padding: 36px 120px 64px 0; }
.foot-news h3, .foot-app h3, .foot-cols h3 { margin: 0 0 16px; color: #0e2a52; font-size: 13px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.foot-news-row { display: flex; align-items: center; gap: 28px; max-width: 560px; }
.tra-footer .foot-news input[type="email"] { flex: 0 1 250px; width: 250px; min-width: 0; min-height: 0; border: 0; border-bottom: 1px solid #d0d0d0; border-radius: 0; background: transparent; padding: 8px 0 10px; color: #333; font: inherit; font-size: 14px; box-shadow: none; }
.foot-news input:focus { outline: none; border-bottom-color: #0e2a52; }
.foot-news button { flex: none; min-width: 196px; height: 52px; border: 0; border-radius: 999px; background: #0e2a52; color: #fff; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 16px rgba(14, 42, 82, .18); }
.foot-news button:hover { background: #16386c; }
.foot-news-note { margin: 10px 0 0; color: #0e2a52; font-size: 13px; font-weight: 700; }
.foot-app { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.foot-app p { margin: 0 0 10px; max-width: 230px; color: #8b919a; font-size: 14px; line-height: 1.45; }
.foot-word { display: block; color: #0e2a52; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.foot-qr {
    width: 124px;
    height: 124px;
    aspect-ratio: 1 / 1;
    flex: none;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: block;
    object-fit: fill;
    object-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 3;
}
.year-seal { position: fixed; left: 12px; bottom: 18px; z-index: 45; width: 96px; height: 96px; animation: year-glow 2.6s ease-in-out infinite; }
.year-seal svg { width: 100%; height: 100%; display: block; }
.seal-spin { transform-box: fill-box; transform-origin: center; animation: year-spin 9s linear infinite; }
.tra-footer h3 { margin: 0 0 14px; }
.tra-footer ul { list-style: none; margin: 0; padding: 0; }
.tra-footer li { margin: 0 0 8px; }
.tra-footer li a::before { content: none; }
.tra-footer a { color: #2b2b2b; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.tra-footer a:hover { color: #1b4689; }
.tra-footer a.is-gold { color: #e0a21a; }
.tra-footer a.is-gold:hover { color: #c48b0d; }
.foot-bar { position: relative; z-index: 1; padding: 16px 0 18px; background: #0e2a52; color: #fff; }
.foot-bar-top, .foot-legal { padding-right: 168px; }
.foot-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.foot-bar p { margin: 0; font-size: 13px; color: #fff; font-weight: 700; }
.foot-bar .foot-social-icons { display: flex; gap: 10px; }
.foot-bar .foot-social-icons a { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border: 1.5px solid #fff; border-radius: 50%; background: transparent; }
.foot-bar .foot-social-icons a:hover { color: #0e2a52; background: #fff; }
.foot-bar .foot-social-icons svg { width: 14px; height: 14px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.foot-legal a { color: #fff; font-size: 13px; font-weight: 700; }
.foot-legal a:hover { color: #fff; text-decoration: underline; }
.foot-helper { position: absolute; right: 10px; bottom: 0; z-index: 2; width: auto; height: 240px; pointer-events: none; }
.side-report { position: fixed; right: 14px; bottom: 16px; z-index: 45; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: #f5c518; color: #111; font-weight: 800; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.side-report svg { width: 18px; height: 18px; flex: none; }
.side-report:hover { color: #111; background: #ffd84a; }
.tra-await { opacity: 0; transform: translateY(28px); }
.tra-news-row.tra-await, .tra-notice.tra-await { transform: translateY(24px); }
.tra-feature.tra-await { transform: translateY(24px) scale(.98); }
.tra-help-orb.tra-await, .px-exp-stat.tra-await, .ov-related-card.tra-await { transform: translateY(22px) scale(.96); }
.tra-await.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--tra-i, 0) * 70ms); }
.tra-svc.tra-await { opacity: 0; transform: none; }
.tra-svc.tra-await.is-in {
    opacity: 1;
    animation: homeCardPop .72s cubic-bezier(.22, 1.18, .36, 1) backwards;
    animation-delay: calc(var(--tra-i, 0) * 85ms);
    transition: transform .28s ease;
}
.tra-svc.tra-await.is-in span {
    animation: homeIconBounce .58s cubic-bezier(.22, 1.2, .36, 1) backwards;
    animation-delay: calc(var(--tra-i, 0) * 85ms + .16s);
}
.tra-svc.tra-await.is-in strong {
    animation: homeTextRise .42s ease backwards;
    animation-delay: calc(var(--tra-i, 0) * 85ms + .28s);
}
.tra-svc.tra-await.is-in small {
    animation: homeTextRise .42s ease backwards;
    animation-delay: calc(var(--tra-i, 0) * 85ms + .38s);
}
.tra-feature.tra-await.is-in {
    animation: homeCardPop .78s cubic-bezier(.22, 1.12, .36, 1) backwards;
    transition: none;
}
.tra-news-row.tra-await.is-in,
.tra-notice.tra-await.is-in {
    animation: homeNewsSlide .6s cubic-bezier(.22, .9, .24, 1) backwards;
    animation-delay: calc(var(--tra-i, 0) * 70ms);
    transition: transform .3s ease;
}
.px-exp-stat.tra-await.is-in {
    animation: homeCardPop .7s cubic-bezier(.22, 1.18, .36, 1) backwards;
    animation-delay: calc(var(--tra-i, 0) * 90ms);
}
.tra-help-orb.tra-await.is-in {
    animation: homeWishPop .62s cubic-bezier(.22, 1.2, .36, 1) backwards;
    animation-delay: calc(var(--tra-i, 0) * 80ms);
    transition: none;
}
body.home-look-panel .px-hero-title { animation: tra-rise .7s ease both; }
body.home-look-panel .px-hero-line { animation: tra-rise .7s ease .12s both; }
body.home-look-panel .px-hero-cta, body.home-look-panel .px-hero-search { animation: tra-rise .7s ease .2s both; }
body.home-look-panel .px-hero-frame { animation: authPop .8s cubic-bezier(.2, .8, .2, 1) .08s both; }
body.home-look-panel .px-wish h2 { animation: tra-rise .7s ease both; }
body.home-look-panel .px-wish-row a { animation: homeWishPop .62s cubic-bezier(.22, 1.2, .36, 1) backwards; }
body.home-look-panel .px-wish-row a:nth-child(1) { animation-delay: .08s; }
body.home-look-panel .px-wish-row a:nth-child(2) { animation-delay: .16s; }
body.home-look-panel .px-wish-row a:nth-child(3) { animation-delay: .24s; }
body.home-look-panel .px-wish-row a:nth-child(4) { animation-delay: .32s; }
body.home-look-panel .px-wish-row a:nth-child(5) { animation-delay: .4s; }
body.home-look-panel .px-wish-row a:nth-child(6) { animation-delay: .48s; }
body.home-look-panel .px-wish-row a span {
    animation: homeIconBounce .55s cubic-bezier(.22, 1.2, .36, 1) backwards;
}
body.home-look-panel .px-wish-row a:nth-child(1) span { animation-delay: .16s; }
body.home-look-panel .px-wish-row a:nth-child(2) span { animation-delay: .24s; }
body.home-look-panel .px-wish-row a:nth-child(3) span { animation-delay: .32s; }
body.home-look-panel .px-wish-row a:nth-child(4) span { animation-delay: .4s; }
body.home-look-panel .px-wish-row a:nth-child(5) span { animation-delay: .48s; }
body.home-look-panel .px-wish-row a:nth-child(6) span { animation-delay: .56s; }
@keyframes year-spin { to { transform: rotate(360deg); } }
@keyframes year-glow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245, 197, 24, 0)); }
    50% { transform: scale(1.07); filter: drop-shadow(0 0 10px rgba(245, 197, 24, .85)); }
}
@keyframes tra-ken { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes tra-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes homeCardPop {
    0% { opacity: 0; transform: translateY(42px) scale(.82); }
    62% { opacity: 1; transform: translateY(-8px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes homeIconBounce {
    0% { opacity: 0; transform: scale(.4) rotate(-12deg); }
    58% { opacity: 1; transform: scale(1.16) rotate(6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes homeTextRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes homeQlPop {
    0% { opacity: 0; transform: translateY(30px) scale(.88); }
    68% { opacity: 1; transform: translateY(-6px) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
@keyframes homeWishPop {
    0% { opacity: 0; transform: translateY(28px) scale(.72); }
    64% { opacity: 1; transform: translateY(-8px) scale(1.1); }
    100% { opacity: 1; transform: none; }
}
@keyframes homeNewsSlide {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: none; }
}
@keyframes help-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes help-mark { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 8px)); } }
@keyframes help-shine { 0% { transform: translateX(0); } 100% { transform: translateX(520%); } }
@media (prefers-reduced-motion: reduce) {
    .tra-slide, .tra-slide img, .tra-hero-copy strong, .tra-hero-copy span, .tra-svc span, .tra-new, .year-seal, .seal-spin, .tra-help-photo, .tra-help-body, .join-copy > div::before, .join-copy p, .join-copy strong,
    .tra-svc.tra-await.is-in, .tra-svc.tra-await.is-in span, .tra-svc.tra-await.is-in strong, .tra-svc.tra-await.is-in small, .ql-logo-link.tra-await.is-in, .ql-logo-link.tra-await.is-in .ql-logo img, .tra-feature.tra-await.is-in, .tra-news-row.tra-await.is-in, .tra-notice.tra-await.is-in, .px-exp-stat.tra-await.is-in, .tra-help-orb.tra-await.is-in,
    body.home-look-panel .px-hero-title, body.home-look-panel .px-hero-line, body.home-look-panel .px-hero-cta, body.home-look-panel .px-hero-search, body.home-look-panel .px-hero-frame, body.home-look-panel .px-wish h2, body.home-look-panel .px-wish-row a, body.home-look-panel .px-wish-row a span { animation: none; transition: none; }
    .tra-await { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
    .tra-news-grid { grid-template-columns: 1fr; gap: 28px; }
    .tra-feature img { height: 320px; }
}
@media (max-width: 1100px) {
    .tra-burger { display: inline-flex; }
    .tra-nav-links {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap !important; /* base rule has wrap — tall services list was wrapping into a 2nd column that peeked right of the drawer */
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 86vw);
        max-width: 86vw;
        margin: 0;
        padding: 56px 16px 28px;
        background: #0e2a52;
        box-shadow: 16px 0 40px rgba(0,0,0,.28);
        z-index: 120 !important; /* above sticky white .tra-header (z-index 100) */
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Hide light OS scrollbar that flashes white on the drawer’s right edge */
        scrollbar-width: none;
        -ms-overflow-style: none;
        isolation: isolate;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateX(-105%);
        transition: transform .38s cubic-bezier(.22, .9, .24, 1);
        flex: none;
        visibility: hidden;
        pointer-events: none;
    }
    .tra-nav-links > a,
    .tra-nav-links > .tra-drop {
        flex: 0 0 auto;
        max-width: 100%;
        min-width: 0;
    }
    .tra-nav-links::-webkit-scrollbar { width: 0; height: 0; display: none; }
    /* Kill any white desktop flyout paint while the drawer is open */
    body.pub-nav-open .tra-drop-menu {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .tra-nav-links.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
    .tra-nav-links .tra-drawer-logo {
        display: block;
        margin: 0 0 16px;
        padding: 10px 12px;
        background: #fff;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    }
    .tra-drawer-logo img { display: block; width: 100%; height: auto; }
    .tra-nav-links.is-open .tra-drawer-logo { animation: brand-in .48s cubic-bezier(.2, .8, .2, 1) both; }
    .tra-nav-links.is-open > a,
    .tra-nav-links.is-open > .tra-drop { animation: side-item .42s ease backwards; }
    .tra-nav-links.is-open > :nth-child(2) { animation-delay: .06s; }
    .tra-nav-links.is-open > :nth-child(3) { animation-delay: .12s; }
    .tra-nav-links.is-open > :nth-child(4) { animation-delay: .18s; }
    .tra-nav-links.is-open > :nth-child(5) { animation-delay: .24s; }
    .tra-nav-links.is-open > :nth-child(6) { animation-delay: .3s; }
    .tra-nav-links.is-open > :nth-child(7) { animation-delay: .36s; }
    /* White sticky header was z-index:100 and painted ON TOP of the navy drawer — lower it. */
    body.pub-nav-open .tra-header {
        z-index: 40 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.pub-nav-open .tra-nav {
        background: transparent !important;
    }
    body.pub-nav-open .tra-nav-logo,
    body.pub-nav-open .tra-nav-mark,
    body.pub-nav-open .tra-nav-tools {
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .tra-backdrop {
        z-index: 110 !important;
    }
    body.pub-nav-open .tra-burger {
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 130 !important;
        background: rgba(14, 42, 82, .92);
        border: 0;
        box-shadow: none;
    }
    .tra-nav-links > a,
    .tra-drop > a {
        display: block;
        white-space: normal;
        width: 100%;
        box-sizing: border-box;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important; /* rounded corners anti-alias as white flecks on navy */
    }
    .tra-drop > a {
        display: block;
    }
    /* Mobile drawer: flat list — no dropdown caret / toggle */
    .tra-drop > a::after { content: none !important; display: none !important; }
    .tra-nav-links a:visited,
    .tra-nav-links a:hover,
    .tra-nav-links a:focus,
    .tra-nav-links a:focus-visible,
    .tra-nav-links a:active {
        color: #fff;
        outline: none !important;
    }
    .tra-drop { width: 100%; overflow: visible; background: transparent; }
    /* Always show all service links in the drawer (no accordion) */
    .tra-drop:hover .tra-drop-menu,
    .tra-drop:focus-within .tra-drop-menu,
    .tra-drop .tra-drop-menu,
    .tra-drop.is-open .tra-drop-menu {
        display: grid !important;
    }
    .tra-drop-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        inset: auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 0 4px;
        overflow: visible;
        z-index: auto;
        filter: none !important;
    }
    .tra-drop-menu a {
        white-space: normal;
        display: block;
        outline: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent;
        padding-left: 10px;
    }
    .tra-nav-row { flex-wrap: nowrap; padding: 8px 0; }
    .tra-burger { margin-left: auto; }
    .tra-nav-mark { display: none; }
    .tra-drawer-account { display: block; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
    .tra-drawer-account + .tra-drawer-account { margin-top: 0; border-top: 0; }
    .tra-top-staff,
    .tra-top-staff-sep { display: none; }
    .tra-top-row { overflow: hidden; }
    .tra-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
    .tra-backdrop { display: none !important; }
    body.pub-nav-open { overflow: auto; }
}
@media (max-width: 800px) {
    .tra-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .ql-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .tra-news-grid, .tra-news-split, .tra-guide-grid, .tra-stat-grid, .news-layout, .px-exp-grid, .px-exp-split { grid-template-columns: 1fr; }
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
    .foot-mid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 88px; }
    .foot-app { justify-content: flex-start; }
    .foot-helper { height: 160px; right: 4px; }
    .foot-bar-top, .foot-legal { padding-right: 120px; padding-left: 84px; }
    .px-exp { padding: 36px 0 40px; }
    .px-ov { padding: 36px 0 44px; }
    .px-ov h2 { font-size: 28px; }
    .px-ov-teaser img { height: 220px; }
    .ov-hero h2 { font-size: 28px; }
    .ov-video video { height: 240px; }
    .ov-acc-item summary { font-size: 22px; }
    .ov-related-grid { grid-template-columns: 1fr; }
    .px-exp h2 { font-size: 32px; }
    .px-exp-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
    .px-exp-stat { width: 150px; height: 150px; }
    .px-exp-stat strong { font-size: 42px; }
    .tra-help-inner { grid-template-columns: 1fr; justify-items: center; padding: 22px 0 26px; gap: 18px; }
    .tra-help-photo { width: 132px; height: 132px; }
    .tra-help-orbs { gap: 14px 18px; }
    .tra-help-orb { min-width: 110px; }
    .tra-help-orb-icon { width: 78px; height: 78px; }
    .year-seal { width: 72px; height: 72px; left: 8px; bottom: 12px; }
    .side-report { right: 8px; bottom: 16px; font-size: 12px; padding: 0 10px; max-width: calc(100% - 16px); }
    .tra-news-row { grid-template-columns: 84px minmax(0, 1fr); }
    .tra-news-row img { width: 84px; height: 64px; }
    .news-top, .ov-top { flex-direction: column; align-items: flex-start; }
    .news-crumb { text-align: left; }
    .tra-feature, .tra-feature img { height: auto; min-height: 220px; }
    .tra-feature img { height: 240px; }
    .tra-slider { min-height: 380px; }
    .tra-hero-copy { padding: 16px; }
    .tra-search,
    .tra-search.discover-search { width: min(560px, 100%); max-width: 100%; height: 46px; min-height: 46px; }
    .tra-search input { height: 34px; font-size: 14px; }
    .tra-search .discover-go { height: 38px; min-width: 96px; padding: 0 14px; font-size: 13px; }
    .tra-hero-copy .discover-picks { width: 100%; }
    .tra-hero-copy strong { font-size: clamp(24px, 8vw, 30px); max-width: 18ch; }
    .tra-nav-logo { height: 38px; }
    .tra-nav-mark { height: 40px; }
    .tra-top-row { gap: 8px; }
    .tra-top-row > a[href^="mailto"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        max-width: 42vw;
    }
    .tra-wrap, .tra-news .tra-wrap { width: min(1360px, calc(100% - 16px)); }
}
@media (max-width: 520px) {
    .tra-slider { min-height: 420px; }
    .tra-search,
    .tra-search.discover-search { width: 100%; max-width: 100%; height: 44px; min-height: 44px; padding: 3px 3px 3px 12px; }
    .tra-search input { height: 32px; font-size: 14px; }
    .tra-search .discover-go { height: 36px; min-width: 88px; padding: 0 12px; }
    .tra-hero-copy span { font-size: 15px; }
    .tra-new { width: 18px; height: 18px; font-size: 5px; }
    .foot-cols { grid-template-columns: 1fr; }
    .foot-news-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .tra-footer .foot-news input[type="email"] { width: 100%; flex-basis: auto; }
    .foot-news button { width: 100%; }
    .foot-mid { padding-right: 0; }
    .foot-helper { display: none; }
    .foot-bar-top, .foot-legal { padding-right: 0; }
    .foot-mid { padding-bottom: 36px; }
    .tra-feature { border-radius: 8px; }
    .tra-top { font-size: 12px; }
    .tra-top-links span { display: none; }
    .tra-top-row { justify-content: flex-end; }
    .tra-top-row > a[href^="mailto"] { display: none; }
    .tra-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .tra-svc { padding: 6px 6px 2px; }
    .tra-svc span { width: 64px; height: 64px; }
    .ql-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .ql-logo-link { min-height: 92px; padding: 10px 6px 8px; }
    .ql-logo { height: 44px; }
    .ql-logo img { max-height: 40px; }
    .ql-main strong { font-size: 13px; }
    .ql-main small { font-size: 10.5px; }
    .tra-stat-grid { grid-template-columns: 1fr; }
}
.drop-field { display: grid; gap: 8px; }
.dropzone,
.hero-modal-card .dropzone,
.tool-card.is-form .dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    margin: 0;
    padding: 28px 18px;
    border: 1.5px dashed #c5cedb;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    color: #334155;
}
.dropzone input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.dropzone strong { font-size: 15px; font-weight: 700; color: #1e293b; }
.dropzone-or { color: #94a3b8; font-size: 13px; font-weight: 600; }
.dropzone small { max-width: 460px; margin: 0; color: #64748b; font-size: 13px; font-weight: 500; line-height: 1.45; }
.dropzone-icon { display: grid; place-items: center; background: transparent; }
.dropzone-btn {
    margin: 2px 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #3b5bdb;
    border-radius: 6px;
    background: #fff;
    color: #3b5bdb;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}
.dropzone-btn:hover { background: #f5f7ff; }
.dropzone-sample {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
.dropzone-sample svg { color: #3b5bdb; }
.dropzone-sample a { color: #3b5bdb; font-weight: 700; text-decoration: none; }
.dropzone-sample a:hover { text-decoration: underline; }
.dropzone-name:empty { display: none; }
.dropzone-name { color: #1d4ed8; font-size: 13px; font-style: normal; font-weight: 700; }
.dropzone.is-over { border-color: #3b5bdb; background: #f8fafc; }
.join-body {
    margin: 0;
    background: #fff;
    font-family: var(--font);
    position: relative;
}
.join-body:has(.join-page) { background: #f3f6fb; }
.join-page,
.join-card,
.join-panel,
.join-copy,
.auth-split,
.auth-split-body,
.auth-card,
.auth-shell,
.auth-lang,
.welcome-page,
.welcome-card {
    font-family: var(--font);
}
.join-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
.join-photo { position: relative; display: block; overflow: hidden; background: #10233f; min-height: 100%; }
.join-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.join-slide.is-active { opacity: 1; z-index: 1; }
.join-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.join-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 28, 58, .28), rgba(12, 28, 58, .48)); }
.join-copy { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-start; padding: 48px 56px; color: #fff; }
.join-copy > div { position: relative; max-width: 640px; padding-left: 26px; text-align: left; }
.join-copy > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #fff; transform: scaleY(0); transform-origin: top; }
.join-copy p { margin: 0 0 16px; letter-spacing: .14em; text-transform: uppercase; font-size: 20px; font-weight: 700; }
.join-copy strong { display: block; font-size: clamp(52px, 5vw, 72px); line-height: 1.08; font-weight: 800; }
.join-slide.is-active .join-copy > div::before { animation: join-line .55s ease both; }
.join-slide.is-active .join-copy p { animation: tra-rise .7s ease .12s both; }
.join-slide.is-active .join-copy strong { animation: tra-rise .8s ease .24s both; }
@keyframes join-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.join-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 32px 20px; overflow: hidden; background: #f7f5fb; }
.join-blob { position: absolute; border-radius: 40px; pointer-events: none; }
.join-blob-a { width: 180px; height: 280px; right: -40px; top: 40px; background: linear-gradient(180deg, #d7e4ff, #f3d9f8); transform: rotate(18deg); opacity: .85; }
.join-blob-b { width: 90px; height: 90px; left: 18px; bottom: 48px; border-radius: 50%; background: radial-gradient(circle, #efe7ff, #d9e6ff); opacity: .9; }
.join-card { position: relative; z-index: 1; width: min(440px, 100%); background: #fff; border-radius: 0; padding: 28px 26px 22px; box-shadow: 0 8px 18px rgba(27, 70, 137, .10), 0 22px 48px rgba(27, 70, 137, .16); animation: authPop .75s cubic-bezier(.2, .8, .2, 1) .06s both; }
.join-card > * { animation: fadeUp .48s ease both; }
.join-card > *:nth-child(1) { animation-delay: .12s; }
.join-card > *:nth-child(2) { animation-delay: .18s; }
.join-card > *:nth-child(3) { animation-delay: .24s; }
.join-card > *:nth-child(4) { animation-delay: .3s; }
.join-card > *:nth-child(5) { animation-delay: .36s; }
.join-card > *:nth-child(6) { animation-delay: .42s; }
.join-card > *:nth-child(7) { animation-delay: .48s; }
.join-card > *:nth-child(8) { animation-delay: .54s; }
.join-card > *:nth-child(9) { animation-delay: .6s; }
.join-card > *:nth-child(10) { animation-delay: .66s; }
.join-card > *:nth-child(11) { animation-delay: .72s; }
.join-card > *:nth-child(12) { animation-delay: .78s; }
.join-card img { display: block; height: 42px; width: auto; margin: 0 auto 14px; }
.join-card h1 { margin: 0; text-align: center; font-size: 26px; color: #241c3a; }
.join-card > p { margin: 8px 0 16px; text-align: center; color: #7b748c; font-size: 14px; line-height: 1.45; }
.join-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fff1f2; color: #9f1239; text-align: left; }
.join-field { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #3a315c; }
.join-input { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid #e4dfef; border-radius: 10px; background: #fff; }
.join-input svg { flex: none; color: #8d86a3; }
.join-input input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 500; color: #241c3a; }
.join-card small { display: block; margin: -4px 0 12px; color: #8d86a3; font-size: 12px; }
.join-card .join-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; color: #4c4564; font-size: 13px; font-weight: 600; line-height: 1.35; }
.join-card .join-check input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; min-height: 16px; max-width: 16px; margin: 0; padding: 0; flex: 0 0 16px; accent-color: #1b4689; border-radius: 3px; }
.join-card button[type="submit"] {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: #1b4689;
    color: #fff;
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
}
.join-card button[type="submit"]:hover { background: #15386e; }
.join-card h1,
.join-card > p,
.join-field,
.join-login,
.welcome-card h1,
.welcome-kicker,
.welcome-lead,
.welcome-note,
.welcome-go,
.auth-card h1,
.auth-card .eyebrow,
.auth-card label,
.auth-card .btn,
.auth-card input,
.auth-home-pill {
    font-family: var(--font);
}
.join-eye { width: 34px; min-width: 34px; height: 34px; margin-right: -6px; border: 0; border-radius: 8px; background: transparent; color: #1b4689; display: grid; place-items: center; padding: 0; cursor: pointer; }
.join-eye:hover { background: #e7eef8; }
.auth-split .join-panel { background: #f3f6fb; }
.auth-split .join-blob-a { background: linear-gradient(180deg, #d7e4ff, #e3ecfb); }
.auth-split .join-blob-b { background: radial-gradient(circle, #e8f0ff, #d9e6ff); }
.auth-split-body { position: relative; z-index: 1; width: min(520px, 100%); display: flex; flex-direction: column; }
.auth-split-body > .swal-banner { margin: 0 0 16px; }
.auth-split .auth-card {
    position: relative;
    max-width: none;
    padding: 28px 28px 18px;
    border-radius: 0;
    box-shadow: 0 8px 18px rgba(27, 70, 137, .10), 0 22px 48px rgba(27, 70, 137, .16);
    animation: authPop .75s cubic-bezier(.2, .8, .2, 1) .06s both;
}
.auth-card-logo { display: block; height: 44px; width: auto; margin: 6px auto 16px; animation: fadeUp .55s ease both; }
.auth-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e6ebf3;
}
.auth-card-foot .muted { flex: 1; min-width: 14rem; margin: 0; font-size: 14px; line-height: 1.5; }
.auth-home-pill {
    position: static;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 0;
    border: 1px solid #1b4689;
    background: #1b4689;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.auth-home-pill svg { stroke: currentColor; }
.auth-home-pill:hover { background: #1a56c4; border-color: #1a56c4; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(26, 86, 196, .25); }
.join-login { margin: 14px 0 0; text-align: center; color: #6f6882; font-size: 14px; }
.join-login a { color: #1b4689; font-weight: 700; }
.welcome-page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; overflow: hidden; background-size: cover; background-position: center; }
.welcome-page::before { content: ""; position: fixed; inset: 0; background: linear-gradient(160deg, rgba(14, 42, 82, .82), rgba(40, 24, 78, .74)); }
.welcome-orb { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.welcome-orb-a { width: 180px; height: 180px; left: 8%; top: 14%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 68%); animation: welcome-float 7s ease-in-out infinite; }
.welcome-orb-b { width: 120px; height: 120px; right: 10%; bottom: 12%; background: radial-gradient(circle, rgba(245, 197, 24, .45), transparent 70%); animation: welcome-float 5.5s ease-in-out 1s infinite reverse; }
.welcome-card { position: relative; z-index: 1; width: min(560px, 100%); padding: 36px 32px 28px; border-radius: 22px; background: rgba(255,255,255,.96); text-align: center; box-shadow: 0 24px 60px rgba(8, 16, 40, .28); animation: welcome-card-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.welcome-badge { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; display: grid; place-items: center; }
.welcome-badge svg { width: 84px; height: 84px; position: relative; z-index: 1; }
.welcome-badge circle { fill: none; stroke: #1b4689; stroke-width: 2.5; stroke-dasharray: 160; stroke-dashoffset: 160; animation: welcome-draw 1s ease .15s forwards; }
.welcome-badge path { fill: none; stroke: #178a45; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: welcome-draw .55s ease .7s forwards; }
.welcome-ring { position: absolute; inset: 8px; border: 2px solid rgba(27, 70, 137, .35); border-radius: 50%; animation: welcome-ring 1.8s ease-out .8s infinite; }
.welcome-ring-late { animation-delay: 1.5s; }
.welcome-logo { display: block; height: 48px; width: auto; margin: 0 auto 12px; animation: welcome-float 4.5s ease-in-out 1s infinite; }
.welcome-kicker { margin: 0; color: #1b4689; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; animation: welcome-rise .55s ease .45s both; }
.welcome-card h1 { margin: 8px 0 10px; font-size: 40px; line-height: 1.15; color: #1b1630; animation: welcome-rise .6s ease .55s both; }
.welcome-lead, .welcome-note, .welcome-facts li, .welcome-go { animation: welcome-rise .55s ease both; }
.welcome-lead { animation-delay: .68s; }
.welcome-note { animation-delay: .8s; color: #1b4689 !important; font-weight: 700; }
.welcome-card p { margin: 0 auto 12px; max-width: 440px; color: #5c5670; line-height: 1.5; }
.welcome-facts { list-style: none; margin: 0 0 18px; padding: 0; color: #6a647c; font-size: 14px; line-height: 1.6; }
.welcome-facts li:nth-child(1) { animation-delay: .9s; }
.welcome-facts li:nth-child(2) { animation-delay: 1.02s; }
.welcome-facts li:nth-child(3) { animation-delay: 1.14s; }
.welcome-go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: #1b4689; color: #fff; font-weight: 700; animation-delay: 1.28s; animation-fill-mode: backwards; transition: transform .2s ease, box-shadow .2s ease; }
.welcome-go:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(27, 70, 137, .28); }
@keyframes welcome-card-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes welcome-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes welcome-draw { to { stroke-dashoffset: 0; } }
@keyframes welcome-ring { from { transform: scale(.72); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
@keyframes welcome-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
    .welcome-card, .welcome-logo, .welcome-kicker, .welcome-card h1, .welcome-lead, .welcome-note, .welcome-facts li, .welcome-go, .welcome-orb, .welcome-ring, .welcome-badge circle, .welcome-badge path { animation: none; }
    .welcome-badge circle, .welcome-badge path { stroke-dashoffset: 0; }
}
@media (max-width: 900px) {
    .join-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 100dvh;
    }
    .join-photo {
        display: block;
        height: clamp(168px, 30vh, 220px);
        min-height: clamp(168px, 30vh, 220px);
        max-height: 220px;
    }
    .join-photo .join-slide img { object-position: center 22%; }
    .join-copy { display: none; }
    .join-panel {
        padding: 0 14px 18px;
        margin-top: -48px;
        z-index: 3;
        overflow: visible;
        align-items: flex-start;
        background: transparent;
    }
    .auth-split .join-panel { background: transparent; }
    .join-blob { display: none; }
    .join-card,
    .auth-split .auth-card {
        width: min(520px, 100%);
        margin: 0 auto;
        padding: 16px 16px 12px;
        box-shadow: 0 12px 32px rgba(27, 70, 137, .16);
        animation: authPop .75s cubic-bezier(.2, .8, .2, 1) .06s both;
    }
    .join-card { border-radius: 0; }
    .auth-split .auth-card { border-radius: 0; }
    .auth-card-logo,
    .join-card img { height: 36px; margin: 0 auto 10px; }
    .auth-split .auth-card h1,
    .join-card h1 { font-size: 22px; }
    .auth-split .auth-card > .muted { margin: 6px 0 12px; font-size: 13px; }
    .auth-card-foot { margin-top: 12px; padding-top: 10px; gap: 10px; }
    .join-body > .auth-lang { z-index: 5; top: 10px; right: 10px; }
    .auth-lang button { padding: 5px 9px; font-size: 12px; }
    .welcome-card h1 { font-size: 32px; }
}

.lead-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 16px;
}
.lead-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 108px;
    background: #fff;
    border: 1px solid #eceff4;
    border-radius: 18px;
    padding: 22px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.lead-ring {
    width: 64px;
    height: 64px;
    flex: none;
}
.lead-ring-track,
.lead-ring-value {
    fill: none;
    stroke-width: 3.6;
}
.lead-ring-track { stroke: #eef2f7; }
.lead-ring-value {
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 21px 21px;
}
.lead-ring text {
    fill: #64748b;
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}
.lead-stat-copy { min-width: 0; }
.lead-stat-title {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lead-stat-title b { font-weight: 800; }
.lead-stat-note {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.theme-dark .lead-stat { background: #2a2638; border-color: #443e58; box-shadow: none; }
html.theme-dark .lead-ring-track { stroke: #3d3750; }
html.theme-dark .lead-ring text { fill: #94a3b8; }
html.theme-dark .lead-stat-title { color: #f8fafc; }
html.theme-dark .lead-stat-note { color: #94a3b8; }
@media (max-width: 1100px) {
    .lead-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .lead-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dir-board { background: #fff; border: 1px solid #e6e8ef; border-radius: 8px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dir-table tr[hidden] { display: none !important; }
.dir-head, .dir-toolbar, .dir-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dir-head { padding: 16px 18px 12px; border-bottom: 1px solid #e4e7ee; }
.dir-toolbar { border-bottom: 1px solid #e4e7ee; }
.dir-board > .dir-toolbar:not(.lead-toolbar):not(.client-toolbar) {
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
.dir-board > .dir-toolbar:not(.lead-toolbar):not(.client-toolbar) .dir-toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
.dir-board > .dir-toolbar:not(.lead-toolbar):not(.client-toolbar) .dir-toolbar-right {
  flex: 0 0 auto;
}
table.dir-table th, table.dir-table td { border-bottom: 1px solid #eef0f4; padding: 12px 14px; }
table.dir-table th {
    background: #f8f9fb;
    border-top: 0;
    color: #9aa1ad;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
table.dir-table tbody tr:hover { background: #f8fafc; }
table.dir-table .dir-check-col { width: 42px; text-align: center; }
.dir-board .dir-check-col input,
.alert-people .dir-check-col input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #2563eb;
}
.alert-people th.dir-check-col { width: 72px; }
.alert-people-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(520px, 100%);
    height: 48px;
    margin: 4px auto 8px;
    padding: 0 16px;
    border: 1px solid #e4e7ee;
    border-radius: 999px;
    background: #fff;
    color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .12);
    animation: alert-search-in .45s ease;
}
.alert-people-search:focus-within {
    border-color: #6d5efc;
    animation: alert-search-pulse 1.5s ease-in-out infinite;
}
.alert-people-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1d2433;
    font: inherit;
    font-weight: 600;
}
.alert-people-search svg { flex: 0 0 auto; }
.alert-people tbody tr.is-hit { animation: alert-row-in .32s ease; }
.alert-people tr[data-alert-people-empty] td {
    text-align: center;
    color: #64748b;
    padding: 28px 12px;
}
@keyframes alert-search-in {
    from { opacity: 0; transform: translateY(-10px) scale(.96); }
    to { opacity: 1; transform: none; }
}
@keyframes alert-search-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(109, 94, 252, .28); }
    50% { box-shadow: 0 0 0 8px rgba(109, 94, 252, 0); }
}
@keyframes alert-row-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
html.theme-dark .alert-people-search { background: #211e2c; border-color: #342f45; }
html.theme-dark .alert-people-search input { color: var(--text); }
.alert-people .alert-pick {
    display: grid;
    justify-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #526075;
}
.dir-country { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dir-flag { font-size: 16px; line-height: 1; }
table.dir-table tr:last-child td { border-bottom: 1px solid #e4e7ee; }
table.dir-table tr.dir-empty-row td { border-bottom: 0; }
.dir-or { color: #6b7280; font-weight: 600; }
.dir-head h2,
.dir-toolbar .dir-title { margin: 0; font-size: 18px; }
.dir-head h2 span, .dir-toolbar .dir-title span, .dir-crumb { color: #8b90a0; font-weight: 600; }
.dir-crumb { margin: 0; font-size: 13px; }
.dir-toolbar { padding: 14px 18px; }
.dir-toolbar .dir-title { white-space: nowrap; line-height: 1.2; }
.dir-toolbar .dir-crumb { white-space: nowrap; }
.dir-toolbar-left, .dir-toolbar-right, .dir-empty-actions, .dir-actions, .dir-person, .dir-photo, .dir-pages { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dir-toolbar-left form, .dir-toolbar-right form, .dir-empty-actions form, .dir-actions form { margin: 0; }
.dir-search {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: min(400px, 100%);
    min-width: min(280px, 100%);
    max-width: 420px;
    height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #d8dce6;
    border-radius: 999px;
    background: #fff;
    color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .12);
    outline: 0;
}
.dir-search:focus-within {
    border-color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .18);
}
.dir-search input {
    flex: 1;
    border: 0 !important;
    outline: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    background: transparent;
    color: #1d2433;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.dir-search input::-webkit-search-decoration,
.dir-search input::-webkit-search-cancel-button,
.dir-search input::-webkit-search-results-button,
.dir-search input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}
.dir-search input::placeholder {
    color: #64748b;
    font-weight: 600;
    opacity: 1;
}
.dir-search svg,
.dir-search .discover-icon,
.dir-search i {
    flex: 0 0 auto;
    color: #6d5efc;
}
.dir-search .discover-go,
.dir-search .discover-icon:nth-of-type(n+2) {
    display: none !important;
}
html.theme-dark .dir-search,
html.theme-dark .table-search {
    background: #211e2c;
    border-color: #342f45;
    color: #a78bfa;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .08);
}
html.theme-dark .dir-search input,
html.theme-dark .table-search input[type="search"] {
    color: var(--text);
}
.dir-toolbar-left .dir-search,
.dir-toolbar .dir-search,
.engage-head .dir-search,
.client-toolbar .dir-search,
.alert-log-search.dir-search {
    animation: none;
}
.dir-toolbar-left .dir-search {
    flex: 0 0 auto;
    width: min(400px, 100%);
    min-width: min(280px, 100%);
    max-width: 420px;
}
.dir-filter { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 13px; font-weight: 600; }
.dir-toolbar select, .dir-form input, .dir-form select { height: 38px; border: 1px solid #e4e7ee; background: #fff; padding: 0 10px; font: inherit; color: #241c3a; }
.dir-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 6px; background: #2563eb; color: #fff; font-weight: 700; cursor: pointer; }
.dir-board:not(.is-paged) .dir-table tbody tr:nth-child(n+101) { display: none; }
.fit-table:not(.is-paged) table.data tbody tr:nth-child(n+11) { display: none; }
.dir-btn-ghost { background: #fff; color: #2563eb; border: 1px solid #2563eb; }
.dir-btn-line { background: #fff; color: #be123c; border: 1px solid #be123c; }
.dir-btn-line:hover { background: #fff1f2; }
.dir-btn-danger { background: #fff; color: #be123c; border: 1px solid #fecdd3; }
.dir-btn-danger:hover { background: #fff1f2; }
.dir-person img, .dir-photo img, .dir-detail img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eef2f8; }
.dir-photo img, .dir-detail img { width: 72px; height: 72px; }
.dir-person strong, .dir-person small { display: block; }
.dir-person small, .dir-photo p, .dir-foot { color: #6b7280; font-weight: 500; }
.dir-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.dir-status.ok { background: #d9f5e6; color: #14804a; }
.dir-status.bad { background: #ffe0e8; color: #d61f69; }
.dir-status.warn { background: #fff1cc; color: #b7791f; }
.dir-status.wait { background: #fff4e6; color: #e8590c; }
.dir-status.info { background: #d7f4f2; color: #0f8f88; }
.dir-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 1px solid #e4e7ee; border-radius: 8px; background: #fff; color: #4b5568; display: grid; place-items: center; cursor: pointer; padding: 0; text-decoration: none; }
.dir-icon .ri { width: 22px; height: 22px; }
.dir-icon:hover { color: #2563eb; border-color: #2563eb; }
.dir-empty { padding: 48px 24px 56px; text-align: center; }
.dir-empty h3 { margin: 0 0 8px; }
.dir-empty p { max-width: 640px; margin: 0 auto 18px; color: #6b7280; }
.dir-empty-actions { justify-content: center; }
.dir-foot { padding: 12px 18px 16px; font-size: 13px; }
.dir-pages button { min-width: 32px; height: 32px; border: 1px solid #e4e7ee; border-radius: 6px; background: #fff; cursor: pointer; }
.dir-pages button.is-active { background: #123a6f; color: #fff; border-color: #123a6f; }
.dir-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dept-add { display: grid; gap: 6px; }
.dept-add-open { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--accent, #1b4689); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dept-add-open .ri { width: 14px; height: 14px; }
.dept-add-row { display: flex; gap: 6px; }
.dept-add-row input { flex: 1; min-width: 0; }
.dept-add-error { margin: 0; color: #be123c; font-size: 12px; font-weight: 600; }
tr.dir-row-focus { background: #eff6ff; scroll-margin-top: 88px; }
html.theme-dark tr.dir-row-focus { background: #243044; }
.dir-form-grid label, .dir-photo { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.dir-photo { grid-template-columns: auto 1fr; align-items: center; }
.dir-photo p { margin: 4px 0 0; font-weight: 500; }
.dir-detail p { white-space: pre-line; margin: 12px 0 0; }
.hero-modal:has(.lead-profile) {
    place-items: start center;
    align-items: start;
    padding: 16px;
    overflow: auto;
}
.hero-modal-card.lead-profile {
    width: min(1100px, calc(100vw - 32px));
    max-height: none;
    padding: 8px 20px 24px;
    background: #f6f8fb;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
.client-record-page { padding: 8px 4px 32px; }
.client-record-page .lead-profile {
    position: relative;
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 8px 20px 24px;
    background: #f6f8fb;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
}
.client-record-page .lead-profile-x {
    position: absolute;
    top: 14px;
    right: 14px;
}
.client-record-save { width: min(1100px, 100%); margin: 16px auto 0; display: grid; gap: 12px; }
.client-record-save .word-editor-save { display: none; }
.client-record-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.client-record-actions .dir-btn,
.client-record-actions .dir-btn-ghost {
    min-width: 160px;
}
@media (max-width: 640px) {
    .client-record-actions .dir-btn,
    .client-record-actions .dir-btn-ghost {
        width: 100%;
        min-width: 0;
    }
}
.task-view-page { padding: 0 0 28px; width: 100%; max-width: none; }
.task-view-page .page-head { display: none; }
.mat-task-wizard {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(43, 39, 64, .04);
    overflow: hidden;
}
.mat-task-wizard .mat-wizard-head {
    padding: 20px 28px 14px;
}
.mat-task-single-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.mat-task-single-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.mat-task-wizard .mat-wizard-body {
    padding: 28px 36px 20px;
    min-height: 0;
}
.mat-task-section {
    margin: 0 0 28px;
    padding: 0 0 24px;
    border-bottom: 1px solid #eef1f5;
}
.mat-task-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.mat-task-section-title {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 700;
    color: #123a6f;
    letter-spacing: .02em;
}
.mat-task-single-foot {
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 28px 20px;
    border-top: 1px solid #eef1f5;
}
.client-hub-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.client-hub-title h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}
.client-hub-dept {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.client-hub-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.client-hub-section-head .mat-task-section-title { margin: 0; }
.client-hub.mat-task-wizard,
.client-hub .mat-wizard-body,
.client-hub .mat-task-section {
    overflow: visible;
}
.client-hub-table {
    margin-top: 8px;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: auto !important;
    border: 1px solid #e6ebf2;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}
.client-hub-table .md-table,
.client-hub-table table.data {
    min-width: 0;
    width: 100%;
}
.client-hub-table .md-table th,
.client-hub-table .md-table td,
.client-hub-table table.data th,
.client-hub-table table.data td {
    padding: 12px 14px;
    white-space: normal;
}
.client-hub-table tbody tr {
    display: table-row !important;
}
.client-hub-note-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}
.task-view-page.client-hub-page {
    overflow: visible;
    max-height: none;
}

/* Client workspace — tabbed detail page */
.client-workspace {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 0 56px 28px 0;
    overflow: visible;
}
.client-workspace-crumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.client-workspace-crumb-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.client-workspace-crumb a {
    color: #123a6f;
    text-decoration: none;
}
.client-workspace-crumb a:hover { text-decoration: underline; }
.client-workspace-crumb strong { color: #0f172a; }
.client-workspace-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid #123a6f;
    border-radius: 4px;
    background: #fff;
    color: #123a6f !important;
    font: 700 12px/1 var(--font);
    letter-spacing: .02em;
    text-decoration: none !important;
    white-space: nowrap;
}
.client-workspace-details-btn:hover,
.client-workspace-details-btn.is-active {
    background: #123a6f;
    color: #fff !important;
}
.client-workspace-details-btn svg { stroke: currentColor; }
.client-workspace-panel.is-boards {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.client-details-boards {
    display: grid;
    gap: 16px;
}
.client-details-board {
    margin: 0;
}
.client-detail-sheet {
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.client-detail-sheet.is-card {
    margin-top: 0;
}
.client-detail-sheet-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f4f6f9;
}
.client-detail-sheet-card-head strong {
    color: #1c3a5f;
    font-size: 14px;
    font-weight: 700;
}
.client-detail-sheet-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--sidebar, #003366);
    color: #fff;
}
.client-detail-sheet-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.client-detail-sheet-title strong {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-detail-sheet-back {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 3px;
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}
.client-detail-sheet-back:hover { background: rgba(255,255,255,.12); color: #fff; }
.client-detail-sheet-back svg { stroke: #fff; }
.client-detail-sheet-info {
    display: inline-grid;
    place-items: center;
    opacity: .9;
}
.client-detail-sheet-info svg { stroke: #fff; }
.client-detail-sheet-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.client-detail-sheet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: #fff;
    color: #2a5a8f;
    font: 700 12px/1 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
}
.client-detail-sheet-btn:hover { background: #e8eef7; color: #1c3a5f; }
.client-detail-sheet-btn.is-outline {
    background: transparent;
    color: #fff;
}
.client-detail-sheet-btn.is-outline:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.client-detail-sheet-objective {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
    background: #fff;
}
.client-detail-sheet-objective strong { color: #0f172a; }
.client-detail-hgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: #fff;
    border-top: 1px solid #c5cad3;
}
.client-detail-hcol {
    min-width: 0;
    padding: 0;
    border-right: 1px solid #c5cad3;
}
.client-detail-hcol:last-child { border-right: 0; }
.client-detail-grid-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.client-detail-grid-table thead th {
    background: #e8eaed !important;
    color: #111827 !important;
    font: 700 13px/1.3 var(--font);
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #c5cad3;
    vertical-align: middle;
}
.client-detail-grid-table tbody td {
    padding: 10px 12px;
    border: 1px solid #c5cad3;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    color: #1f2937;
    background: #fff;
    word-break: break-word;
}
.client-detail-grid-table .col-sr {
    width: 64px;
    text-align: center;
    white-space: nowrap;
    color: #374151;
}
.client-detail-grid-label {
    display: block;
    margin: 0 0 2px;
    color: #6b7280;
    font: 600 11px/1.3 var(--font);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.client-detail-grid-value {
    display: block;
    color: #111827;
    font: 400 13px/1.35 var(--font);
}
.client-detail-grid-value .badge {
    display: inline-flex;
    vertical-align: middle;
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
@media (max-width: 980px) {
    .client-detail-hgrid {
        grid-template-columns: 1fr;
    }
    .client-detail-hcol {
        border-right: 0;
        border-bottom: 1px solid #c5cad3;
    }
    .client-detail-hcol:last-child { border-bottom: 0; }
}
.client-detail-sheet-table {
    width: 100%;
    border-collapse: collapse;
}
.client-detail-sheet-table thead th {
    background: #e8eaed !important;
    color: #111827 !important;
    font: 700 13px/1.3 var(--font);
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #c5cad3;
    white-space: nowrap;
}
.client-detail-sheet-table tbody td {
    padding: 12px 14px;
    border: 1px solid #c5cad3;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    color: #374151;
    background: #fff;
}
.client-detail-sheet-table tbody tr.is-group td {
    color: #0f172a;
    font-weight: 700;
    background: #fafbfc;
}
.client-detail-sheet-table tbody tr.is-group u {
    text-underline-offset: 3px;
}
.client-detail-sheet-table .col-sr {
    width: 72px;
    white-space: nowrap;
}
.client-detail-sheet-table .col-comment {
    width: 320px;
}
.client-detail-comment {
    width: 100%;
    min-height: 48px;
    resize: vertical;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    padding: 4px 2px 6px;
    font: 500 12px/1.45 var(--font);
    color: #64748b;
    outline: none;
}
.client-detail-comment:focus {
    border-bottom-color: #2a5a8f;
}
@media (max-width: 900px) {
    .client-detail-sheet-table .col-comment { width: auto; }
}
.client-details-table a.table-name-link,
.client-details-table a.md-doc-link {
    color: #2a5a8f;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.client-details-table a.md-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.staff-details-boards {
    display: grid;
    gap: 20px;
    margin-top: 4px;
}
.staff-details-board {
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 70, 137, .04), 0 10px 28px rgba(27, 70, 137, .05);
}
.staff-details-board .md-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.client-workspace-tabs {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    margin: 0 0 14px;
    border-bottom: 1px solid #dbe3ee;
}
.client-workspace-tab {
    position: relative;
    padding: 10px 2px 12px;
    color: #64748b;
    font: 700 13px/1 var(--font);
    text-decoration: none;
}
.client-workspace-tab:hover { color: #123a6f; }
.client-workspace-tab.is-active {
    color: #123a6f;
}
.client-workspace-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #123a6f;
    border-radius: 2px 2px 0 0;
}
.client-workspace-rails {
    position: absolute;
    top: 72px;
    right: 8px;
    display: grid;
    gap: 10px;
    z-index: 5;
}
.client-rail-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #123a6f;
    color: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(18, 58, 111, .28);
}
.client-rail-btn:hover { background: #0c2749; color: #fff; }
.client-rail-btn svg { stroke: #fff; }
.client-rail-btn.is-close { background: #1d4ed8; }
.client-workspace-panel {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: visible;
}
.client-workspace-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid #eef1f5;
}
.client-workspace-panel-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.client-workspace-panel-head h2.client-notes-title {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.client-notes-lead {
    font: 600 13px/1.2 "Segoe UI", Arial, sans-serif;
    color: #64748b;
}
.client-notes-lead i {
    color: #dc2626;
    font-style: normal;
    margin-left: 1px;
}
.client-notes-main {
    font: 700 16px/1.2 "Segoe UI", Arial, sans-serif;
    color: #0f172a;
}
.client-workspace-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.client-workspace-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #c9d6e8;
    border-radius: 4px;
    background: #fff;
    color: #123a6f;
    font: 700 12px/1 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.client-workspace-action:hover { background: #f3f7fc; }
.client-workspace-action.is-danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff5f5;
}
.client-workspace-action.is-danger:hover {
    background: #fee2e2;
    color: #991b1b;
}
.client-workspace-table .col-check {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}
.client-workspace-table .col-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #123a6f;
    cursor: pointer;
}
.client-docs-bulk { display: inline-flex; margin: 0; }
.client-workspace-body {
    padding: 18px 18px 8px;
    overflow: visible;
}
.client-workspace-panel-head.is-compact {
    padding: 10px 16px;
}
.client-workspace-body.is-submit-work,
.client-workspace-body.is-notes-work {
    padding: 10px 16px 8px;
    display: grid;
    gap: 12px;
}
.client-workspace-body.is-submit-work .client-submit-editor,
.client-workspace-body.is-notes-work .client-notes-editor {
    margin: 0;
    gap: 6px;
}
/* Word chrome — same Client-notes look on every writing editor */
.word-editor {
    background: #e6e6e6 !important;
    border: 1px solid #c8c8c8 !important;
    border-radius: 0 !important;
}
.word-editor .word-topbar {
    display: flex !important;
    background: #2b579a !important;
    color: #fff !important;
}
.word-editor .word-search-box {
    background: #b7c7de !important;
    border-radius: 0 !important;
    border: 1px solid rgba(15, 40, 80, .28) !important;
}
.word-editor .word-tabs {
    display: flex !important;
    background: #f3f3f3 !important;
}
.word-editor .word-ribbon-viewport {
    display: block !important;
    background: #f3f3f3 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.word-editor .word-editor-canvas,
.word-editor.is-code textarea[data-rich-source] {
    background: #ffffff !important;
    color: #222 !important;
}
.client-workspace-body.is-notes-work .client-notes-editor .word-editor-canvas,
.client-workspace-body.is-submit-work .client-submit-editor .word-editor-canvas {
    min-height: 420px;
}
.client-workspace-body.is-submit-work .task-detail-hint,
.client-workspace-body.is-notes-work .task-detail-hint {
    display: none;
}
.notes-history-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e8eef7;
    color: #123a6f;
    font: 700 11px/1 var(--font);
    font-style: normal;
}
.client-workspace-action.is-active .notes-history-count {
    background: #123a6f;
    color: #fff;
}
.notes-history-panel {
    margin-top: 4px;
    padding-top: 4px;
}
.client-workspace-table-wrap {
    width: 100%;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: auto !important;
}
.client-workspace-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
.client-workspace-table th,
.client-workspace-table td {
    padding: 6px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e8edf3;
    font-size: 13px;
    line-height: 1.25;
    color: #1f2937;
}
.client-workspace-table thead th,
.client-docs-board .client-workspace-table thead th,
.client-workspace-table-wrap .client-workspace-table thead th {
    background: #e0e0e0 !important;
    color: #111827 !important;
    font-weight: 700;
    white-space: nowrap;
    padding: 7px 12px;
    border-top: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}
.client-workspace-table tbody tr {
    display: table-row !important;
}
.client-workspace-table tbody tr:hover td { background: #fafbfd; }
.client-workspace-actions-cell {
    white-space: nowrap;
    min-width: 220px;
}
.client-workspace-actions-cell .app-row-actions,
.client-workspace-actions-cell .md-doc-actions,
.client-workspace-actions-cell .dir-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.client-workspace-actions-cell .dir-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid;
    border-radius: 4px;
    background: #fff;
    font: 600 11px/1 var(--font);
    text-decoration: none;
    white-space: nowrap;
}
.client-workspace-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px 16px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}
.client-workspace-save,
.client-workspace-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    min-width: 96px;
    padding: 0 18px;
    border: 1px solid #2a5a8f;
    border-radius: 4px;
    background: #2a5a8f;
    color: #fff;
    font: 700 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.client-workspace-save:hover,
.client-workspace-secondary:hover {
    background: #1e4a7a;
    border-color: #1e4a7a;
    color: #fff;
}
.client-workspace-save.is-primary {
    background: #2a5a8f;
    border-color: #2a5a8f;
    color: #fff;
}
.client-workspace-save.is-primary:hover {
    background: #1e4a7a;
    border-color: #1e4a7a;
}
.client-workspace-save:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.client-workspace-secondary {
    background: #fff;
    border: 1px solid #2a5a8f;
    color: #2a5a8f;
}
.client-workspace-secondary:hover {
    background: #eef3f9;
    border-color: #2a5a8f;
    color: #1e4a7a;
}
.client-submit-target {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 0 18px 16px;
    width: 100%;
    box-sizing: border-box;
}
.client-submit-target > span {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}
.client-submit-target > span i {
    color: #dc2626;
    font-style: normal;
}
.client-workspace-body.is-submit-work .client-submit-row,
.client-submit-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
}
.client-submit-name,
.client-submit-target strong.client-submit-name {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.client-workspace-body.is-submit-work .client-submit-actions,
.client-submit-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    gap: 10px;
    margin: 0 0 0 auto !important;
    width: auto !important;
}
.client-submit-target em {
    font-style: normal;
    font-size: 12px;
    color: #64748b;
}
.client-workspace-body.is-submit-work .client-workspace-foot {
    display: none;
}
.client-submit-warn { color: #b45309 !important; }
.client-workspace .mat-message-field .word-editor-save { display: none; }
.client-workspace .mat-field input[readonly] {
    color: #0f172a;
    cursor: default;
}
@media (max-width: 900px) {
    .client-workspace { padding-right: 0; overflow-x: clip; max-width: 100%; }
    .cnote-workspace,
    .client-details-boards,
    .client-details-board,
    .client-workspace-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .client-workspace-rails {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin: 0 0 10px;
    }
}
.client-hub-subhead {
    margin: 22px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}
.client-hub-timeline {
    display: grid;
    gap: 10px;
}
.client-hub-timeline-item {
    padding: 12px 14px;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    background: #f8fafc;
}
.client-hub-timeline-item header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
}
.client-hub-timeline-item header strong { color: #123a6f; font-size: 13px; }
.client-hub-timeline-item header em { margin-left: auto; font-style: normal; }
.client-hub-timeline-item p {
    margin: 0;
    color: #1e293b;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.md-doc-link.is-plain {
    color: #123a6f;
    text-decoration: none;
    cursor: default;
    font-weight: 500;
}
.client-hub .mat-message-field .word-editor-save { display: none; }
.client-hub-submit-form .mat-task-single-foot {
    border-top: 0;
    padding: 18px 0 0;
}
.mat-task-wizard .mat-field input[readonly] {
    color: #0f172a;
    cursor: default;
}
.mat-task-wizard .mat-due-ok { color: #2f9e44 !important; }
.mat-task-wizard .mat-due-warn { color: #f59f00 !important; }
.mat-task-wizard .mat-due-danger { color: #d63939 !important; }
.mat-wizard-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #c9d6e8;
    border-radius: 4px;
    background: #fff;
    color: #123a6f;
    font: 700 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
.mat-wizard-close:hover { background: #f3f7fc; }
.mat-wizard-close svg {
    width: 14px;
    height: 14px;
}
.mat-task-wizard .task-detail-hint {
    margin: 0 0 14px;
    color: #667382;
    font-size: 13px;
    line-height: 1.45;
}
.mat-task-wizard .task-detail-work {
    margin: 0 0 16px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid #e6ebf2;
    border-radius: 0;
    background: transparent;
    color: #1e293b;
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}
.mat-task-wizard .task-detail-work p { margin: 0 0 8px; }
.mat-task-wizard .task-detail-work p:last-child { margin-bottom: 0; }
.mat-task-wizard .task-detail-work ul,
.mat-task-wizard .task-detail-work ol,
.client-workspace .task-detail-work ul,
.client-workspace .task-detail-work ol {
    margin: 0 0 8px;
    padding: 0 0 0 1.1rem;
    list-style-position: inside;
}
.mat-task-wizard .task-detail-work li,
.client-workspace .task-detail-work li {
    margin: 0.35em 0;
    padding-left: 0.15rem;
}
.client-workspace .task-detail-work {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #e6ebf2;
    border-radius: 4px;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}
.mat-task-wizard .task-detail-work.is-plain { white-space: pre-wrap; }
.mat-task-wizard .task-detail-work img,
.mat-task-wizard .task-detail-work table { max-width: 100%; }
.mat-task-wizard .mat-message-field .word-editor {
    width: 100%;
    border: 1px solid #c8ccd2;
    border-radius: 0;
    box-shadow: none;
    background: #e6e6e6;
}
.mat-task-wizard .mat-message-field .word-editor-save { display: none; }
.mat-task-wizard .mat-message-field .word-editor-canvas {
    min-height: 280px;
    padding: 36px 48px;
}
.mat-task-submit-extra {
    display: flex;
    justify-content: flex-start;
    margin-top: 22px;
}
.mat-wizard-doc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #c9d6e8;
    border-radius: 4px;
    background: #fff;
    color: #123a6f;
    font: 700 12px/1 var(--font);
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
}
.mat-wizard-doc:hover { background: #f3f7fc; }
.mat-task-wizard .mat-wizard-create {
    background: #2f9e44;
}
.mat-task-wizard .mat-wizard-create:hover {
    background: #2b8a3e;
}
@media (max-width: 900px) {
    .mat-task-wizard .mat-wizard-body { padding: 20px 18px 16px; }
    .mat-task-wizard .mat-wizard-head { padding: 16px 18px 12px; }
}
@media (max-width: 640px) {
    .task-detail-actions .dir-btn,
    .task-detail-actions .dir-btn-ghost {
        width: 100%;
        min-width: 0;
    }
}
.client-record-status {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e6e8ef;
    border-radius: 8px;
    background: #fff;
}
.client-record-status legend { padding: 0 6px; font-weight: 700; }
.client-record-status label { display: inline-flex; align-items: center; gap: 6px; }
.client-record-staff {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #e6e8ef;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
}
.client-record-staff select { font-weight: 500; }
.dir-icon.is-locked,
.dir-icon:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}
.lead-profile.dir-detail img {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
}
.lead-profile.dir-detail img.lead-profile-avatar {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #e7eef6;
}
.lead-profile-x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.hero-modal-card.lead-profile header.lead-profile-head,
.lead-profile-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 18px 28px 18px 8px;
    border-bottom: 0;
    background: transparent;
}
.lead-profile-avatar,
.lead-profile-initials {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #e7eef6;
}
.lead-profile-avatar[hidden],
.lead-profile-initials[hidden] { display: none !important; }
.lead-profile-initials {
    display: grid;
    place-items: center;
    color: #206bc4;
    font-size: 22px;
    font-weight: 700;
}
.lead-profile-who { min-width: 0; flex: 1; }
.lead-profile-who h2 {
    margin: 0;
    color: #1e293b;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.lead-profile-bio {
    margin: 6px 0 8px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
}
.lead-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #6b7280;
    font-size: 13px;
}
.lead-profile-meta li { display: inline-flex; align-items: center; gap: 6px; }
.lead-profile-meta i { color: #8b95a7; }
.lead-profile-meta a { color: inherit; text-decoration: none; }
.lead-profile-meta a:hover { color: #206bc4; }
.lead-profile-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lead-profile-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #dce1ea;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
}
.lead-profile-icon:hover { border-color: #206bc4; color: #206bc4; }
.lead-profile-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    background: #206bc4;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.lead-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    padding: 4px 8px 8px;
}
.lead-profile-feed {
    margin: 0;
    padding: 0;
    list-style: none;
}
.lead-profile-event {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 0 0 16px;
}
.lead-profile-event:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: #e6e8ef;
}
.lead-profile-event-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #eef1f6;
    color: #64748b;
    font-size: 16px;
    z-index: 1;
}
.lead-profile-event-icon.is-x { background: #111827; color: #fff; }
.lead-profile-event-icon.is-facebook { background: #1877f2; color: #fff; }
.lead-profile-event-card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 8px;
    padding: 14px 16px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.lead-profile-event-card .when {
    float: right;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}
.lead-profile-event-card h4 {
    margin: 0 0 6px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}
.lead-profile-event-card p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
}
.lead-profile-side { display: grid; gap: 16px; align-content: start; }
.lead-profile-card {
    background: #fff;
    border: 1px solid #e6e8ef;
    border-radius: 8px;
    padding: 16px 18px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.lead-profile-card h3 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
}
.lead-profile-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lead-profile-facts li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #475569;
    font-size: 14px;
}
.lead-profile-facts i { color: #8b95a7; margin-top: 3px; }
.lead-profile-facts strong { color: #1e293b; font-weight: 600; }
.staff-page {
    display: grid;
    gap: 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}
.staff-page-toolbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.staff-hero, .staff-block {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(27, 70, 137, .04), 0 10px 28px rgba(27, 70, 137, .05);
}
.staff-hero { display: flex; gap: 18px; align-items: center; }
.staff-hero img, .staff-hero-mark { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.staff-hero-mark { display: grid; place-items: center; background: #e7f5ff; color: #1864ab; font-weight: 700; font-size: 28px; }
.staff-hero h1 { margin: 0 0 4px; font-size: 24px; color: #0f172a; }
.staff-hero p, .staff-hero ul { margin: 0; color: #64748b; }
.staff-hero ul { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 0 0; list-style: none; }
.staff-block h2 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.staff-empty { margin: 0; color: #64748b; }
.staff-sheet td, .staff-sheet th { white-space: nowrap; }
.staff-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.staff-card-combined { min-width: 0; }
.staff-sheet-card {
    background: #fff;
    border: 1px solid #cfd4dc;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: none;
}
.staff-sheet-card .table-wrap {
    overflow-x: auto;
}
.staff-meta-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.staff-meta-table thead th {
    background: #d7dbe2 !important;
    color: #111827 !important;
    font: 700 13px/1.3 var(--font);
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #c5cad3;
    white-space: nowrap;
}
.staff-meta-table tbody td {
    padding: 12px 14px;
    border: 1px solid #c5cad3;
    vertical-align: middle;
    font-size: 13px;
    color: #374151;
    background: #fff;
}
.staff-meta-horizontal {
    min-width: 860px;
}
.staff-meta-horizontal thead tr:first-child th {
    text-align: left;
    font-size: 14px;
}
.staff-meta-horizontal .staff-meta-labels th {
    background: #eef1f5 !important;
    color: #4b5563 !important;
    font: 600 11px/1.3 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 8px 12px;
}
.staff-meta-horizontal tbody td {
    text-align: left;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.staff-meta-horizontal .staff-meta-about-head th {
    background: #d7dbe2 !important;
    color: #111827 !important;
    font: 700 13px/1.3 var(--font);
    text-align: left;
    padding: 10px 14px;
    border: 1px solid #c5cad3;
}
.staff-meta-horizontal .staff-meta-about-row td {
    white-space: normal;
    line-height: 1.55;
    color: #4b5563;
    font-weight: 500;
}
.staff-page .staff-details-board .md-table thead th,
.staff-page .staff-sheet thead th {
    background: #d7dbe2 !important;
    color: #111827 !important;
    font-weight: 700;
    padding: 14px 16px;
    border-top: 1px solid #b8bec8;
    border-bottom: 1px solid #b8bec8;
}
.staff-page .staff-details-board .md-table tbody td,
.staff-page .staff-sheet tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.staff-sheet td.staff-work-cell {
    white-space: nowrap;
    min-width: 148px;
    width: 1%;
    vertical-align: middle;
}
.staff-work-actions {
    display: inline-grid;
    grid-auto-rows: minmax(30px, auto);
    gap: 6px;
    justify-items: stretch;
    min-width: 138px;
}
.staff-view-msg,
a.staff-view-msg.staff-view-client {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 138px;
    min-height: 30px;
    border: 1px solid #123a6f;
    border-radius: 4px;
    background: #fff;
    color: #123a6f;
    font: 700 12px/1 var(--font);
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
    box-sizing: border-box;
}
.staff-view-msg:hover,
.staff-view-msg.is-open,
a.staff-view-msg.staff-view-client:hover {
    background: #123a6f;
    color: #fff;
}
.staff-view-msg svg,
a.staff-view-msg.staff-view-client svg { stroke: currentColor; }
.staff-work-drop td {
    background: #f8fafc !important;
    border-bottom: 1px solid #e8edf3;
    padding: 0 16px 14px !important;
    white-space: normal !important;
}
.staff-work-drop-inner {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.staff-work-drop-inner strong {
    display: block;
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 12px;
}
.staff-work-drop-inner p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}
.staff-client-row.is-msg-open { background: #f8fafc; }
.staff-client-row.is-msg-open + .staff-work-drop { display: table-row; }
html.theme-dark .staff-hero,
html.theme-dark .staff-block,
html.theme-dark .staff-work-drop-inner { background: #1e1a2b; border-color: #443e58; }
html.theme-dark .staff-info li { border-color: #443e58; }
html.theme-dark .staff-work-drop td { background: #17141f !important; }
html.theme-dark .staff-info span { color: #e2e8f0; }
html.theme-dark .staff-info em,
html.theme-dark .staff-about-copy { color: #94a3b8; }
@media (max-width: 800px) {
    .staff-facts { grid-template-columns: 1fr; }
    .staff-meta-horizontal { min-width: 0; table-layout: auto; }
}
.staff-assigned { margin: 0 22px 8px; }
.staff-assigned-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.staff-assigned-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #e6e8ef; }
.staff-assigned-list li:last-child { border-bottom: 0; }
.staff-assigned-list strong { color: #1e293b; }
.staff-assigned-list small { display: block; color: #64748b; font-size: 12px; }
.staff-work { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.staff-work.is-open, .staff-work.is-done { background: #d3f9d8; color: #2b8a3e; }
.staff-work.is-late { background: #ffe3e3; color: #c92a2a; }
.staff-work.is-closed { background: #e8eaed; color: #5f6368; }
.staff-assign-actions {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.staff-assign-action-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.staff-assign-delete-form { margin: 0; display: inline-flex; }
.staff-assign-view,
.staff-assign-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.staff-assign-flash {
    margin: 0 16px 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.staff-assign-flash.is-error {
    background: #fff1f0;
    color: #a12622;
    border: 1px solid #f5c2c0;
}
html.theme-dark .staff-assigned-list li { border-color: #443e58; }
html.theme-dark .staff-assigned-list strong { color: #f8fafc; }
.lead-profile-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
    white-space: normal;
}
html.theme-dark .lead-profile { background: #1e2230; }
html.theme-dark .lead-profile-who h2,
html.theme-dark .lead-profile-event-card h4,
html.theme-dark .lead-profile-card h3,
html.theme-dark .lead-profile-facts strong { color: #f8fafc; }
html.theme-dark .lead-profile-event-card,
html.theme-dark .lead-profile-card { background: #2a2638; border-color: #443e58; }
@media (max-width: 900px) {
    .lead-profile-head { flex-wrap: wrap; }
    .lead-profile-actions { width: 100%; }
    .lead-profile-grid { grid-template-columns: 1fr; }
}
.dir-form .dropzone { margin: 0; }
.staff-import-card { width: min(1080px, 100%); }
.lead-toolbar { flex-wrap: nowrap; align-items: center; gap: 12px; }
.lead-toolbar .dir-toolbar-left { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; max-width: none; align-items: center; }
.lead-toolbar .dir-toolbar-right { margin-left: auto; flex-wrap: nowrap; }
.lead-toolbar .lead-filters { flex: 0 1 auto; max-width: 0; overflow: hidden; min-width: 0; }
.lead-toolbar .dir-search { flex: 0 0 auto; width: min(400px, 100%); min-width: min(280px, 100%); max-width: 420px; height: 48px; }
.lead-filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
.lead-filters label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; flex: 1 1 150px; width: 150px; min-width: 0; max-width: 180px; overflow: hidden; font-size: 11px; font-weight: 700; color: #526075; }
.lead-filters select, .page-jump, .page-size select { height: 34px; border: 1px solid #e4e7ee; border-radius: 6px; background: #fff; color: #1a1a1a; font: inherit; font-weight: 600; padding: 0 8px; }
.lead-filters select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
.page-size { display: inline-flex; align-items: center; gap: 6px; color: #526075; font-size: 13px; font-weight: 700; }
:is(body.staff-body, body.portal-shell) .lead-submit-admin {
    background: #fff;
    border: 1px solid #2f9e44;
    color: #2b8a3e;
}
:is(body.staff-body, body.portal-shell) .lead-submit-admin:hover {
    background: #f0fdf4;
    color: #2b8a3e;
}
.lead-submit-admin i { animation: lead-logo-pulse 1.6s ease-in-out infinite; }
@keyframes lead-logo-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
.lead-table-tools .lead-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-row-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: max-content;
    max-width: none;
    vertical-align: middle;
}
.app-row-actions > .btn,
.app-row-actions > .btn-outline,
.app-row-actions > button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}
table.data td:has(.app-row-actions) {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
@media (max-width: 767px) {
    table.data td:has(.app-row-actions),
    table.md-table td:has(.app-row-actions),
    table.data td:has(.dir-icon),
    table.md-table td:has(.dir-icon),
    table.data td:last-child,
    table.md-table td:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    .app-row-actions,
    .md-doc-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        box-sizing: border-box !important;
    }
    .app-row-actions > .btn,
    .app-row-actions > .btn-outline,
    .app-row-actions > button,
    .app-row-actions > a,
    .app-row-actions > form,
    .md-doc-actions > .btn,
    .md-doc-actions > .btn-outline,
    .md-doc-actions > button,
    .md-doc-actions > a,
    .md-doc-actions > form,
    .app-row-actions > .dir-icon,
    .md-doc-actions > .dir-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        flex: none !important;
    }
    .app-row-actions > form,
    .md-doc-actions > form {
        display: flex !important;
        margin: 0 !important;
    }
    .app-row-actions > form > .btn,
    .app-row-actions > form > .btn-outline,
    .app-row-actions > form > button,
    .app-row-actions > form > .dir-icon,
    .md-doc-actions > form > .btn,
    .md-doc-actions > form > .btn-outline,
    .md-doc-actions > form > button,
    .md-doc-actions > form > .dir-icon {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}
:is(body.staff-body, body.portal-shell) .app-row-actions .is-danger {
    border-color: #fa5252;
    color: #e03131;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .is-danger:hover {
    background: #fff5f5;
    color: #e03131;
}
html.theme-dark .lead-filters select,
html.theme-dark .page-jump,
html.theme-dark .page-size select { background: #211e2c; color: var(--text); border-color: #342f45; }
.lead-toolbar .lead-toolbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lead-toolbar .dir-toolbar-right { flex: 0 0 auto; }
@media (max-width: 860px) {
    .lead-toolbar .dir-search { flex: 1 1 100%; max-width: none; }
}
.lead-table-tools { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #eef1f6; }
th.dir-check, td.dir-check { width: 42px; text-align: center; vertical-align: middle; }
th.dir-check input, td.dir-check input { width: 16px; height: 16px; margin: 0; accent-color: #6d5efc; cursor: pointer; }
.lead-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-left: auto; }
.lead-add-row label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #526075; }
.lead-add-row input { min-height: 36px; border: 1px solid #e4e7ee; padding: 0 10px; font: inherit; background: #fff; color: #1a1a1a; min-width: 140px; }
html.theme-dark .lead-add-row input { background: #211e2c; color: var(--text); border-color: #342f45; }
[data-import-sheet][hidden], [data-import-setup][hidden], .excel-book[hidden], [data-sheet-error][hidden] { display: none !important; }
[data-import-sheet].is-sheet-ready [data-sheet-picker] { display: none !important; }
.dir-btn:disabled { opacity: .45; cursor: default; }
.excel-book { border: 1px solid #d0d7e2; background: #fff; overflow: hidden; box-shadow: inset 0 3px 0 #217346; }
.excel-book-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: #f3f3f3; border-bottom: 1px solid #d4d4d4; color: #217346; }
.excel-book-bar span { color: #616161; font-size: 12px; font-weight: 700; }
.excel-sheet { max-height: min(52vh, 440px); overflow: auto; background: #fff; }
.excel-sheet table { border-collapse: collapse; min-width: 100%; font: 13px var(--font); }
.excel-sheet th, .excel-sheet td { border: 1px solid #d4d4d4; min-width: 108px; height: 24px; padding: 0 6px; background: #fff; color: #1a1a1a; font-weight: 400; text-align: left; white-space: nowrap; }
.excel-sheet th.excel-col, .excel-sheet td.excel-row, .excel-sheet th.excel-corner { background: #f3f3f3; color: #616161; text-align: center; font-weight: 600; min-width: 42px; }
.excel-sheet thead th { position: sticky; top: 0; z-index: 1; }
.excel-sheet td.excel-row, .excel-sheet th.excel-corner { position: sticky; left: 0; z-index: 2; }
.excel-sheet thead th.excel-corner { z-index: 3; }
html.theme-dark .excel-book, html.theme-dark .excel-sheet, html.theme-dark .excel-sheet td { background: #1c1a24; color: #f4f1ea; border-color: #3a3548; }
html.theme-dark .excel-book-bar, html.theme-dark .excel-sheet th.excel-col, html.theme-dark .excel-sheet td.excel-row, html.theme-dark .excel-sheet th.excel-corner { background: #2a2638; color: #c8c2d4; }
.staff-import-step { display: flex; gap: 10px; align-items: flex-start; }
.staff-import-step > span { width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.staff-import-step strong { display: block; }
.staff-import-step p, .staff-map-hint { margin: 2px 0 0; color: #6b7280; font-size: 13px; font-weight: 500; }
.staff-map { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.2fr) auto auto; gap: 8px; align-items: end; }
.staff-map [data-map-custom] { grid-column: 1 / -1; }
.staff-map [data-map-custom][hidden] { display: none; }
.staff-map label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.staff-import-card input, .staff-import-card select { border-radius: 8px; }
.staff-map-list { display: grid; gap: 8px; }
.staff-map-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid #e4dcf3; border-radius: 8px; }
.staff-map-item span { font-weight: 600; }
.staff-map-item .dir-btn { min-height: 32px; padding: 0 10px; }
.staff-map-hint[hidden], [data-map-empty][hidden] { display: none; }
.staff-map-count { grid-column: 1 / -1; color: #0f766e; font-size: 13px; font-weight: 700; }
html.theme-dark .dir-board, html.theme-dark .dir-search, html.theme-dark .dir-toolbar select, html.theme-dark .dir-form input, html.theme-dark .dir-form select, html.theme-dark .dir-icon, html.theme-dark .dir-pages button, html.theme-dark .dir-btn-ghost { background: #211e2c; color: var(--text); border-color: #342f45; }
html.theme-dark .hero-modal-card,
html.theme-dark .hero-modal-card input,
html.theme-dark .hero-modal-card select,
html.theme-dark .hero-modal-card .dir-btn-ghost,
html.theme-dark .hero-modal-x { background: #fff; color: #1e293b; border-color: #e2e8f0; }
html.theme-dark .hero-modal-card .dropzone { background: #fff; color: #334155; border-color: #c5cedb; }
html.theme-dark .hero-modal-card .dropzone strong { color: #1e293b; }
html.theme-dark .dir-btn { background: #2563eb; color: #fff; border-color: #2563eb; }
html.theme-dark .dir-btn-line,
html.theme-dark .hero-modal-card .dir-btn-line { background: #fff; color: #be123c; border: 1px solid #be123c; }
.staff-map-item select { width: 150px; flex: 0 0 auto; }
.staff-map-item span { flex: 1; min-width: 0; }
html.theme-dark .staff-map-item { background: #211e2c; border-color: #342f45; }
@media (min-width: 768px) {
    table.data.dir-table thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    table.data.dir-table tbody { display: table-row-group; width: auto; }
    table.data.dir-table tr { display: table-row; width: auto; margin: 0; border: 0; }
    table.data.dir-table th,
    table.data.dir-table td { display: table-cell; width: auto; vertical-align: middle; }
    table.data.dir-table td::before { content: none; }
    table.data.dir-table td:last-child { width: auto; }
    table.data.dir-table th:last-child,
    table.data.dir-table td:last-child { text-align: right; }
    .dir-actions { flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; }
}
@media (max-width: 767px) {
    .dir-board .table-wrap {
        overflow: visible !important;
        max-width: 100%;
    }
    table.data.dir-table,
    table.data.dir-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    table.data.dir-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }
    table.data.dir-table tbody tr {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        border: 1px solid #e6e8ef !important;
        background: #fff !important;
        overflow: visible !important;
    }
    table.data.dir-table th,
    table.data.dir-table td {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid #eef0f4 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    table.data.dir-table td::before {
        content: attr(data-label) !important;
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: .04em !important;
    }
    table.data.dir-table td[data-label=""],
    table.data.dir-table td:has(.dir-actions),
    table.data.dir-table td:has(.dir-icon),
    table.data.dir-table td:has(.app-row-actions) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    table.data.dir-table td[data-label=""]::before {
        content: none !important;
    }
    table.data.dir-table .dir-actions,
    table.data.dir-table .app-row-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-content: stretch !important;
        flex-wrap: wrap !important;
    }
    table.data.dir-table .dir-actions > a,
    table.data.dir-table .dir-actions > button,
    table.data.dir-table .dir-actions > form,
    table.data.dir-table .dir-actions > .dir-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }
    table.data.dir-table tr.dir-empty-row td {
        height: auto !important;
        min-height: 220px !important;
        align-items: center !important;
        text-align: center !important;
    }
    table.data.dir-table tr.dir-empty-row td::before {
        content: none !important;
    }
}
.dir-toolbar-right { margin-left: auto; justify-content: flex-end; }
.dir-icon-view { color: #206bc4; background: #fff; border-color: #206bc4; }
.dir-icon-edit { color: #f76707; background: #fff; border-color: #f76707; }
.dir-icon-delete { color: #d63939; background: #fff; border-color: #d63939; }
.dir-icon-view .ri,
.dir-icon-edit .ri,
.dir-icon-delete .ri {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
}
.dir-icon-view:hover { color: #fff; background: #206bc4; border-color: #206bc4; }
.dir-icon-edit:hover { color: #fff; background: #f76707; border-color: #f76707; }
.dir-icon-delete:hover { color: #fff; background: #d63939; border-color: #d63939; }
html.theme-dark .dir-icon-view { color: #74c0fc; background: transparent; border-color: #74c0fc; }
html.theme-dark .dir-icon-edit { color: #ff922b; background: transparent; border-color: #ff922b; }
html.theme-dark .dir-icon-delete { color: #ff8787; background: transparent; border-color: #ff8787; }
@media (max-width: 700px) {
    .dir-form-grid, .staff-map { grid-template-columns: 1fr; }
}
table.dir-table tr.dir-empty-row td { height: 460px; text-align: center; vertical-align: middle; }
.dir-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; margin: 0 auto; text-align: center; }
.doc-assign, .lead-alloc-form, .todo-assign { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.doc-assign { margin: 0 18px 18px; padding: 14px; border: 1px solid #e7ebf3; border-radius: 12px; background: #f8fafc; }
.doc-assign label, .lead-alloc-form select, .todo-tools label, .todo-due label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #526075; }
.doc-links { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12px; }
.todo-board { margin: 0 0 18px; background: #fff; border: 1px solid #e7ebf3; border-radius: 16px; overflow: hidden; }
.todo-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid #eef1f6; }
.todo-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.todo-title { display: flex; align-items: center; gap: 12px; }
.todo-title h2 { margin: 0; font-size: 22px; }
.todo-title h2 span, .todo-blank { color: #8b93a7; font-weight: 600; }
.todo-add { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: #e11d48; color: #fff; font-weight: 700; min-height: 36px; padding: 0 14px; cursor: pointer; }
.todo-due select, .todo-tools select, .todo-assign select, .lead-alloc-form select, .doc-assign select, .doc-assign input, .todo-kanban { font: inherit; }
.todo-due select, .todo-assign select, .lead-alloc-form select, .doc-assign select, .doc-assign input[type="text"] { min-height: 36px; border: 1px solid #e4e7ee; border-radius: 8px; padding: 0 10px; background: #fff; }
.todo-due { margin: 0; }
.todo-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 1px solid #e4e7ee; border-radius: 8px; background: #fff; padding: 0 12px; font-weight: 700; color: #344054; cursor: pointer; text-decoration: none; }
.todo-tool.is-active { background: #e11d48; color: #fff; border-color: #e11d48; }
.hero-modal-actions .todo-save {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: #3085d6;
    color: #fff;
    font-weight: 600;
}
.todo-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: #d7f4f2; color: #0f8f88; }
tr:target { background: #e7f5ff; }
.task-message { width: 220px; max-width: 220px; color: #334155; font-size: 13px; line-height: 1.35; vertical-align: middle; }
.task-message-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.task-message-read { display: inline-flex; margin-top: 4px; padding: 0; border: 0; background: none; color: #206bc4; font-size: 12px; font-weight: 700; cursor: pointer; }
.task-message-body { margin: 0; padding: 16px 18px 20px; white-space: pre-wrap; color: #1e293b; font-size: 14px; line-height: 1.55; max-height: min(60vh, 480px); overflow: auto; }
.todo-status.is-in_progress { background: #fff1cc; color: #b7791f; }
.todo-status.is-done { background: #d9f5e6; color: #14804a; }
.todo-status.is-closed { background: #e8eaed; color: #5f6368; }
.is-late { color: #e11d48; font-weight: 800; }
.todo-blank { text-align: center; padding: 28px 12px; }
.staff-task-detail { display: grid; gap: 14px; padding: 16px 18px 20px; }
.staff-task-detail h3 { margin: 0; font-size: 18px; color: #0f172a; }
.staff-task-back { color: #1b4689; font-weight: 700; }
.staff-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: #526075; font-size: 13px; font-weight: 600; }
html.theme-dark .staff-task-detail h3 { color: var(--text); }
.todo-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.todo-kanban section { background: #f8fafc; border-radius: 12px; padding: 12px; min-height: 160px; }
.todo-kanban h3 { margin: 0 0 10px; font-size: 14px; }
.todo-card { background: #fff; border: 1px solid #e7ebf3; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.todo-card strong, .todo-card span { display: block; }
.todo-card span { color: #6b7280; font-size: 12px; margin-top: 4px; }
.report-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px 12px;
}
.report-board-copy { min-width: 0; flex: 1; }
.report-board-head h1,
.report-board.md-board .md-board-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1f2937; }
.report-board-head p { margin: 4px 0 0; color: #6b7280; }
.report-board-head .report-toolbar-actions {
    flex-shrink: 0;
    padding-top: 0;
}
.report-tabs { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid #e6e8ef; }
.report-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px 10px; color: #64748b; font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.report-tabs a.is-active { color: #168348; border-bottom-color: #168348; }
.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px 4px;
}
.report-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-range { margin: 0; padding: 12px 18px 4px; color: #6b7280; font-size: 13px; }
.report-page {
    display: grid;
    gap: 18px;
}
.report-board.md-board {
    overflow: hidden;
}
.report-board.md-board .report-metric-tile,
.report-board.md-board .report-progress-card {
    box-shadow: none;
}
.report-filter-board .report-mat-filters {
    border-top: 0;
    border-bottom: 0;
    margin: 0;
}
.report-table-board .report-md-table {
    margin-top: 0;
    border-top: 0;
}
.report-board.md-board .md-table {
    min-width: 980px;
}
.report-mat-filters {
    display: flex;
    align-items: flex-end;
    gap: 18px 22px;
    flex-wrap: wrap;
    padding: 10px 18px 16px;
    border-top: 1px solid #eef1f5;
    background: #fff;
}
.report-mat-filters .mat-field {
    display: grid;
    gap: 4px;
    margin: 0;
    min-width: 140px;
    flex: 1 1 140px;
    max-width: 220px;
    font-weight: 500;
    color: #64748b;
}
.report-mat-filters .mat-field > span {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.2;
}
.report-mat-filters .mat-field input,
.report-mat-filters .mat-field select {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 6px 12px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.report-mat-filters .mat-field select {
    padding: 6px 28px 8px 12px;
    cursor: pointer;
    text-indent: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.report-mat-filters .mat-field select option,
.report-mat-filters .mat-field select optgroup {
    padding: 10px 14px;
    margin: 0;
}
.report-mat-filters .mat-field input:focus,
.report-mat-filters .mat-field select:focus {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.report-mat-filters .report-mat-search-field { max-width: 240px; flex: 1 1 180px; }
.report-mat-search {
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #123a6f;
    color: #fff;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(18, 58, 111, .28);
}
.report-mat-search:hover { background: #0e2f5a; color: #fff; }
.report-mat-search .ri { width: 18px; height: 18px; }
@media (max-width: 900px) {
    .report-mat-filters .mat-field { max-width: none; flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 560px) {
    .report-mat-filters .mat-field { flex: 1 1 100%; max-width: none; }
}
.report-view-bar { display: flex; align-items: center; gap: 12px; padding: 0 18px 12px; }
.report-view-bar a { font-weight: 700; color: #168348; }
.report-metric-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 8px 18px 14px;
}
.report-metric-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 84px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
}
.report-metric-tile span {
    display: block;
    margin-bottom: 6px;
    color: #8a94a6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.report-metric-tile strong {
    display: block;
    color: #1d273b;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}
.report-metric-ico {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid #e6e8ee;
    border-radius: 50%;
    color: #8a94a6;
    background: #f4f6f9;
}
.report-metric-ico.is-blue {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}
.report-metric-ico.is-green {
    color: #16a34a;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.report-metric-ico.is-amber {
    color: #d97706;
    background: #fffbeb;
    border-color: #fde68a;
}
.report-metric-ico.is-purple {
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}
.report-progress-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 16px;
}
.report-progress-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 16px 0;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 0;
}
.report-progress-card h3 {
    margin: 0;
    color: #1d273b;
    font-size: 15px;
    font-weight: 700;
}
.report-progress-ring {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 14px auto 12px;
}
.report-progress-ring svg { width: 100%; height: 100%; display: block; }
.report-progress-track { stroke: #e9ecef; }
.report-progress-center {
    position: absolute;
    inset: 28px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}
.report-progress-center strong {
    color: #1d273b;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
}
.report-progress-center span {
    margin-top: 4px;
    color: #667382;
    font-size: 13px;
}
.report-progress-copy {
    margin: 0 0 12px;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.45;
}
.report-progress-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 12px 0;
    border-top: 1px solid #e6e8ee;
    font-size: 13px;
}
.report-progress-foot b { color: #1d273b; font-weight: 700; }
.report-progress-foot span { color: #8a94a6; }
.report-pies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 18px 16px; }
.report-pie { border: 1px solid #e6e8ef; border-radius: 0; padding: 14px; background: #fff; min-width: 0; }
.report-pie h2 { margin: 0 0 12px; font-size: 15px; }
.pie-chart { display: flex; align-items: center; gap: 14px; }
.pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; font-size: 13px; }
.pie-legend li { display: flex; align-items: center; gap: 8px; }
.pie-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pie-legend span { flex: 1; min-width: 0; }
.pie-legend b { color: #64748b; font-weight: 700; white-space: nowrap; }
@media (max-width: 1100px) {
    .report-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-progress-row, .report-pies { grid-template-columns: 1fr; }
    .pie-chart { flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .report-metric-row { grid-template-columns: 1fr; }
}
.report-chart {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 18px 16px;
    box-sizing: border-box;
}
.report-chart .sales-card {
    width: 100%;
    max-width: none;
}
.report-chart .sales-svg { max-height: 320px; }
.report-md-table {
    margin-top: 4px;
    border-top: 1px solid #e6ebf2;
}
.report-md-table .md-table { min-width: 720px; }
@media (max-width: 767px) {
    .report-md-table .md-table { min-width: 0 !important; width: 100% !important; }
}
.report-board .table-foot {
    border-top: 1px solid #e8edf3;
}
.report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.report-summary article { background: #f8fafc; border: 1px solid #e7ebf3; border-radius: 12px; padding: 14px 16px; }
.report-summary span { display: block; color: #6b7280; font-size: 13px; }
.report-summary strong { font-size: 28px; }
.proposal-card { border: 1px solid #e7ebf3; border-radius: 12px; padding: 14px 16px; background: #fff; }
.lead-alloc { margin-bottom: 18px; }
.lead-alloc .table-wrap { padding: 0 0 8px; }
@media (max-width: 900px) {
    .todo-kanban, .report-summary { grid-template-columns: 1fr; }
}
@media print {
    .sidebar, .topbar, .todo-tools, .todo-add, .todo-due, .doc-assign, .lead-alloc-form button, .swal-banner { display: none !important; }
    .shell, .main { display: block; }
    .todo-board, .panel { break-inside: avoid; }
}
.swal-modal {
    position: fixed;
    inset: 0;
    z-index: 480;
    display: grid;
    place-items: center;
    padding: 24px;
}
.swal-modal[hidden] { display: none !important; }
.swal-modal-shade {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.swal-modal-card {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    color: #241c3a;
    border-radius: 14px;
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(20, 16, 40, .28);
}
.swal-modal-card h2 { margin: 0 0 8px; font-size: 26px; }
.swal-modal-card p { margin: 0 0 8px; color: #4b5568; line-height: 1.5; }
.swal-modal-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7c3aed; }
.swal-modal-badge {
    width: 68px;
    height: 68px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #e8f8ef;
    color: #178a45;
    display: grid;
    place-items: center;
}
.swal-modal-x, .portal-tour-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.swal-modal-go, .portal-tour-nav {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #3b6fd8;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.swal-modal-go { margin-top: 12px; }
.swal-pop {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: grid;
    place-items: center;
    padding: 24px;
}
.swal-pop[hidden] { display: none !important; }
.swal-pop-shade {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}
.swal-pop-card {
    position: relative;
    width: min(460px, 100%);
    padding: 36px 28px 28px;
    border-radius: 4px;
    background: #fff;
    color: #595959;
    text-align: center;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}
.swal-pop-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border: 2px solid #7ad0ee;
    border-radius: 50%;
    color: #5ec8ea;
    display: grid;
    place-items: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 500;
    font-style: italic;
    line-height: 1;
}
.swal-pop-card p {
    margin: 0 0 22px;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.5;
}
.swal-pop-actions { display: flex; justify-content: center; }
.swal-pop-ok {
    min-height: 40px;
    min-width: 132px;
    padding: 0 22px;
    border: 0;
    border-radius: 6px;
    background: #5ec8ea;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.swal-pop-ok:hover { background: #3eb8e0; }
.portal-tour {
    position: fixed;
    inset: 0;
    z-index: 460;
}
.portal-tour[hidden] { display: none !important; }
.portal-tour-shade { position: absolute; inset: 0; z-index: 1; }
.portal-tour-spot {
    position: fixed;
    z-index: 2;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(43, 39, 64, .45);
    pointer-events: none;
}
.portal-tour-card {
    position: fixed;
    z-index: 3;
    width: min(360px, calc(100vw - 24px));
    background: #fff;
    color: #241c3a;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(20, 16, 40, .28);
    padding: 18px 18px 14px;
}
.portal-tour-card h2 { margin: 0 28px 8px 0; font-size: 18px; }
.portal-tour-card p { margin: 0; color: #4b5568; line-height: 1.55; }
.portal-tour-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.portal-tour-nav:disabled { opacity: .45; cursor: default; }
.portal-tour-mid { display: grid; justify-items: center; gap: 4px; color: #6b7280; font-size: 12px; font-weight: 700; }
.portal-tour-dots { display: flex; gap: 6px; }
.portal-tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5d8e0; display: block; cursor: pointer; }
.portal-tour-dots i.is-active { background: #3b6fd8; }
body.portal-tour-on { overflow: hidden; }

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 18px;
    padding: 4px 0 10px;
    min-width: 0;
}
.page-head h1 {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: #1e293b;
    letter-spacing: -.01em;
}
.page-head > .muted {
    margin: 0;
    margin-left: auto;
    color: #94a3b8;
    font-size: 13px;
}
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
}
.crumbs li {
    display: inline-flex;
    align-items: center;
    color: #94a3b8;
}
.crumbs li:not(:last-child)::after {
    content: "/";
    margin: 0 8px;
    color: #cbd5e1;
    font-weight: 400;
}
.crumbs .is-active {
    color: #64748b;
    font-weight: 600;
}
html.theme-dark .page-head h1 { color: #f1f5f9; }
html.theme-dark .crumbs,
html.theme-dark .crumbs li,
html.theme-dark .page-head > .muted { color: #94a3b8; }
html.theme-dark .crumbs .is-active { color: #cbd5e1; }
html.theme-dark .crumbs li:not(:last-child)::after { color: #475569; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 16px;
    min-width: 0;
}
.stat-card {
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 16px 16px 12px;
    min-width: 0;
    transition: transform .22s ease, box-shadow .22s ease;
}
body.is-motion .stat-card {
    animation: dashCardIn .62s cubic-bezier(.22, .9, .24, 1) both;
}
.stat-row > .stat-card:nth-child(1) { animation-delay: .05s; }
.stat-row > .stat-card:nth-child(2) { animation-delay: .13s; }
.stat-row > .stat-card:nth-child(3) { animation-delay: .21s; }
.stat-row > .stat-card:nth-child(4) { animation-delay: .29s; }
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}
.stat-chart { transform-origin: left center; }
body.is-motion .stat-chart { animation: dashChartIn .7s ease .4s both; }
.stat-kicker {
    margin: 0 0 12px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
}
.stat-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.stat-figure {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.stat-glyph {
    display: grid;
    place-items: center;
    flex: none;
    color: #64748b;
}
.stat-card.tone-primary .stat-glyph { color: #3b82f6; }
.stat-card.tone-success .stat-glyph { color: #16a34a; }
.stat-card.tone-info .stat-glyph { color: #0284c7; }
.stat-card.tone-warning .stat-glyph { color: #d97706; }
.stat-card.tone-danger .stat-glyph { color: #e11d48; }
.stat-card strong {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: #0f172a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.stat-card strong.is-long { font-size: 16px; letter-spacing: 0; line-height: 1.25; }
.stat-chart {
    width: 96px;
    height: 48px;
    flex: 0 0 96px;
}
.stat-chart svg { width: 100%; height: 100%; display: block; }
.stat-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
}
.stat-pct { display: inline-flex; align-items: center; gap: 4px; }
.stat-pct i { font-style: normal; }
.stat-pct.up, .stat-move b.up { color: #16a34a; }
.stat-pct.down, .stat-move b.down { color: #ef4444; }
.stat-pct.flat, .stat-move b.flat { color: #64748b; }
.stat-move { color: #64748b; font-weight: 600; }
.stat-move b { font-weight: 700; }

.fit-table { border-radius: 4px; min-width: 0; }
.fit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}
.fit-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fit-tools .muted { font-size: 13px; font-weight: 600; }
.fit-bar input[type="search"],
.fit-bar select {
    width: auto;
    min-width: 0;
    flex: 1 1 150px;
    max-width: 220px;
    min-height: 36px;
    height: 36px;
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
}
.fit-table .table-wrap { max-width: 100%; }
.fit-table table.data { min-width: 640px; }
.staff-main, .portal-main, .page, .page-body, .split-grid, .panel, .fit-table, .table-wrap { max-width: 100%; }
@media (max-width: 1199px) {
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .stat-row { grid-template-columns: minmax(0, 1fr); }
    .stat-chart { width: 84px; flex-basis: 84px; }
    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .crumbs {
        margin-left: 0;
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
    }
    .fit-table table.data { min-width: 0; }
    .fit-bar { align-items: stretch; }
    .fit-tools { width: 100%; }
    .fit-bar input[type="search"],
    .fit-bar select { max-width: none; width: 100%; flex: 1 1 100%; }
    .table-foot { align-items: flex-start; }
}
.fit-table table.data th {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}
.table-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-pager button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}
.table-pager button.is-active {
    background: #123a6f;
    border-color: #123a6f;
    color: #fff;
}
.table-pager button:disabled { opacity: .45; cursor: default; }

.lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
}
.lang-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.lang-flag-tz,
.lang-flag-en {
    width: 22px;
    height: 15px;
    border-radius: 3px;
    object-fit: cover;
    object-position: center;
    background: none;
    flex: none;
}
.lang-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.auth-lang {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 16px;
}
.join-body > .auth-lang {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
    z-index: 2;
}
.auth-lang button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d9e1ec;
    background: #fff;
    color: #1e293b;
    padding: 6px 12px;
    font: inherit;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.auth-lang button.is-on {
    background: #1b4689;
    border-color: #1b4689;
    color: #fff;
}
.app-footer {
    margin-top: auto;
    padding: 4px 24px 22px;
    color: var(--muted);
    font-size: 12px;
}

html.theme-dark .stat-card strong,
html.theme-dark .stat-kicker { color: var(--text); }
html.theme-dark .stat-kicker { color: #94a3b8; }
html.theme-dark .stat-card,
html.theme-dark .fit-bar input[type="search"],
html.theme-dark .fit-bar select,
html.theme-dark .table-pager button {
    background: #2a2638;
    border-color: #443e58;
    color: var(--text);
}
html.theme-dark .table-pager button.is-active { background: #123a6f; border-color: #123a6f; color: #fff; }
html.theme-dark .page { background: transparent; }

.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kpi-card { min-height: 0; padding: 18px 18px 16px; }
.kpi-card strong {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: normal;
}
.kpi-mid { align-items: flex-start; }
.kpi-trend { margin-top: 8px; align-items: flex-start; }
.kpi-trend .up { font-weight: 600; line-height: 1.45; overflow-wrap: break-word; word-break: normal; }

.page-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}
.page-size select {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid #e4e7ee;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-weight: 700;
}
html.theme-dark .page-size select { background: #211e2c; color: var(--text); border-color: #342f45; }

@media (min-width: 700px) {
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .page-head { align-items: flex-start; flex-direction: column; }
    .fit-table table.data { min-width: 0; }
    .fit-bar input[type="search"],
    .fit-bar select { max-width: none; flex: 1 1 100%; }
}

.alert-panel,
.alert-panel:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
}
.alert-panel .panel-head { padding: 0 0 14px; border-bottom: 0; }
.alert-panel .table-wrap,
.alert-people .table-wrap,
.alert-log .table-wrap,
.alert-panel table.data,
.alert-people,
.alert-log {
    background: #fff;
    position: relative;
    z-index: 1;
}
.alert-board {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 20px;
    padding: 0;
    align-items: start;
}
.alert-people { grid-column: 1 / -1; margin-top: 0; }
.alert-card,
.alert-people {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.alert-people,
.alert-log,
.alert-panel .table-wrap,
.alert-panel table.data {
    border-radius: 0;
}
.alert-panel .table-wrap { box-shadow: none; }
.alert-card header h3,
.alert-people header h3,
.alert-log h3 {
    margin: 0;
    font-size: 15px;
    color: #0f172a;
}
.alert-card header p,
.alert-people header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
.alert-clock {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #f8fafc;
}
.alert-clock > span { font-weight: 800; color: #1b4689; white-space: nowrap; }
.alert-board .alert-clock input[type="number"] {
    width: 84px !important;
    min-width: 84px;
    max-width: 84px;
    min-height: 48px;
    padding: 0 8px;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    border: 1px solid #d5dbe6;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
}
.alert-board .alert-clock select {
    width: auto;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #d5dbe6;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 700;
}
.alert-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #334155; }
.alert-compose { min-width: 0; }
.alert-compose .word-field { width: 100%; }
.alert-compose .word-editor { width: 100%; }
.alert-compose .word-editor-canvas { min-height: 280px; }
.alert-board .alert-field input,
.alert-board .alert-field textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #d5dbe6;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 500;
}
.alert-board .alert-field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.alert-picture {
    margin: 0;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    width: 100%;
}
.alert-picture img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    align-self: center;
    border: 1px solid #e7ebf3;
    border-radius: 12px;
    background: #fff;
}
.alert-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100%;
    margin: 0;
    padding: 16px;
    border: 1.5px dashed #b9cbe4;
    border-radius: 12px;
    background:
        radial-gradient(circle at 18% 20%, rgba(251, 191, 36, .16), transparent 32%),
        radial-gradient(circle at 80% 18%, rgba(27, 70, 137, .12), transparent 34%),
        radial-gradient(circle at 70% 84%, rgba(22, 131, 72, .12), transparent 36%),
        #f8fbff;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
.alert-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.alert-upload strong { font-size: 14px; color: #1b4689; }
.alert-upload small { max-width: 280px; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.4; }
.alert-upload-icons { display: flex; align-items: center; gap: 10px; }
.alert-upload-icons i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    animation: alert-icon-float 2.6s ease-in-out infinite;
}
.alert-upload-icons i:nth-child(2) { animation-delay: .18s; }
.alert-upload-icons i:nth-child(3) { animation-delay: .36s; }
.alert-upload-icons .is-folder { background: #fff4df; color: #d97706; }
.alert-upload-icons .is-image { background: #e7f0ff; color: #1b4689; }
.alert-upload-icons .is-up { background: #e5f8ee; color: #168348; }
.alert-upload.is-over { border-color: #1b4689; background: #eef5ff; }
.alert-upload.has-file { border-style: solid; border-color: #168348; }
@keyframes alert-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@media (max-width: 700px) {
    .alert-picture { grid-template-columns: 1fr; }
    .alert-picture img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .alert-upload-icons i { animation: none; }
}
.alert-from {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f4f7fb;
    color: #475569;
    font-size: 13px;
}
.alert-from strong { color: #0f172a; }
.alert-switch {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.alert-switch span { display: grid; gap: 2px; min-width: 0; }
.alert-switch strong { font-size: 13px; color: #0f172a; }
.alert-switch small { color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.4; }
.alert-board .alert-switch input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
    accent-color: #1b4689;
}
.alert-save { grid-column: 1 / -1; display: flex; justify-content: flex-start; align-items: center; gap: 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.alert-pick-count { margin: 0; color: #334155; font-size: 13px; font-weight: 700; }
.alert-line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.alert-line-btn i { color: inherit; }
.alert-line-btn.is-resend { color: #1b4689; }
.alert-line-btn.is-delete { color: #be123c; }
.alert-line-btn.is-save {
    background: #1b4689;
    color: #fff;
    border-color: #1b4689;
}
.alert-line-btn.is-save:hover { background: #163a72; }
.alert-line-btn.is-resend:hover { background: #eef4ff; }
.alert-line-btn.is-delete:hover { background: #fff1f2; }
.brand-save-mark { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; background: #fff; }
.alert-next { margin: 8px 0 0; color: #334155; font-size: 13px; font-weight: 600; }
.alert-log {
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #fff;
}
.alert-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.alert-log-head h3, .alert-log h3 { margin: 0 0 8px; }
.alert-log-head h3 { margin: 0; }
.alert-log-search { width: 100%; max-width: none; margin: 0 0 14px; }
.alert-log-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.alert-log form { margin: 0; }
.alert-log tr.is-sent,
.alert-log tr.is-failed,
.alert-log tr.is-pending { background: transparent; }
.alert-state { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.alert-state.is-sent { background: #d9f5e6; color: #14804a; }
.alert-state.is-failed { background: #ffe0e8; color: #d61f69; }
.alert-state.is-pending { background: #e8f1ff; color: #2563eb; border: 1px solid #c7dbff; }
.alert-log .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.alert-log table.data { table-layout: fixed; width: 100%; }
.alert-log table.data th,
.alert-log table.data td { overflow-wrap: anywhere; }
.alert-log table.data th:nth-child(1) { width: 10%; }
.alert-log table.data th:nth-child(2) { width: 7%; }
.alert-log table.data th:nth-child(3) { width: 16%; }
.alert-log table.data th:nth-child(4) { width: 15%; }
.alert-log table.data td:nth-child(4) { white-space: nowrap; overflow-wrap: normal; }
.alert-log table.data th:nth-child(5) { width: 14%; }
.alert-log table.data th:nth-child(6) { width: 24%; }
.alert-log table.data th:nth-child(7),
.alert-log table.data td:last-child { width: 14%; white-space: nowrap; text-align: right; }
.alert-log td > small { display: block; margin-top: 4px; color: #9f1239; font-size: 12px; font-weight: 600; white-space: normal; }
.alert-log td.alert-note { color: #334155; font-size: 13px; line-height: 1.45; white-space: normal; }
.alert-log td.alert-note strong { display: block; color: #0f172a; }
.alert-log td.alert-note span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; font-weight: 600; }
.alert-log td .person-copy small { color: #64748b; font-weight: 500; }
.alert-log tr[hidden] { display: none !important; }
.alert-log td .alert-line-btn { min-height: 32px; padding: 0 12px; font-size: 12px; }
html.theme-dark .alert-panel { background: transparent; border: 0; box-shadow: none; }
html.theme-dark .alert-line-btn { background: #211e2c; }
html.theme-dark .alert-line-btn.is-resend { color: #93c5fd; }
html.theme-dark .alert-line-btn.is-delete { color: #fb7185; }
html.theme-dark .alert-line-btn.is-save { background: #1b4689; color: #fff; border-color: #1b4689; }
html.theme-dark .alert-log,
html.theme-dark .alert-save { background: #211e2c; border-color: #342f45; }
html.theme-dark .alert-pick-count,
html.theme-dark .alert-log td.alert-note,
html.theme-dark .alert-log td.alert-note strong { color: var(--text); }
html.theme-dark .alert-log td.alert-note span { color: #94a3b8; }
html.theme-dark .alert-upload { background: #211e2c; border-color: #342f45; }
html.theme-dark .alert-upload strong { color: #dbe7ff; }
html.theme-dark .alert-card,
html.theme-dark .alert-people,
html.theme-dark .alert-clock,
html.theme-dark .alert-switch,
html.theme-dark .alert-board .alert-field input,
html.theme-dark .alert-board .alert-field textarea,
html.theme-dark .alert-board .alert-clock input,
html.theme-dark .alert-board .alert-clock select { background: #211e2c; color: var(--text); border-color: #342f45; }
html.theme-dark .alert-card header h3,
html.theme-dark .alert-people header h3,
html.theme-dark .alert-switch strong,
html.theme-dark .alert-from strong { color: var(--text); }
@media (max-width: 900px) {
    .alert-log-head { align-items: flex-start; flex-direction: column; }
    .alert-log-actions { justify-content: flex-start; }
    .alert-board { grid-template-columns: 1fr; }
}

.proposal-editor .word-editor-save { display: none; }
.tool-card.is-form .stack { max-width: none; }
.tool-card.is-form .stack > label,
.tool-card.is-form .stack > .drop-field,
.tool-card.is-form .stack > p,
.tool-card.is-form .stack > .tool-card-go,
.tool-card.is-form .stack > a { max-width: 640px; }
.word-field { display: grid; gap: 8px; width: 100%; font-weight: 700; font-size: 13px; }
.word-editor {
    width: 100%;
    background: #e6e6e6;
    border: 1px solid #c8c8c8;
    border-radius: 0;
    overflow: hidden;
    font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
    font-size: 13px;
    color: #222;
}
.word-topbar {
    height: 40px;
    background: #2b579a;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    white-space: nowrap;
    position: relative;
    z-index: 5;
}
.word-topbar-left,
.word-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.word-topbar-autosave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font: 600 11px/1 "Segoe UI", Arial, sans-serif;
    color: #dbe7ff;
    cursor: pointer;
    user-select: none;
}
.word-topbar-autosave:hover { color: #fff; }
.word-topbar-autosave-dot {
    width: 28px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    position: relative;
    flex: 0 0 auto;
    transition: background .15s ease;
}
.word-topbar-autosave-dot::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s ease, background .15s ease;
}
.word-topbar-autosave.is-on .word-topbar-autosave-dot,
.word-editor.is-autosave .word-topbar-autosave-dot {
    background: #28c840;
}
.word-topbar-autosave.is-on .word-topbar-autosave-dot::after,
.word-editor.is-autosave .word-topbar-autosave-dot::after {
    left: 16px;
    background: #fff;
}
.word-topbar-brand {
    display: none;
}
.word-topbar-icon {
    border: 0;
    background: transparent;
    color: #fff;
    width: 28px;
    height: 28px;
    padding: 4px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    border-radius: 3px;
}
.word-topbar-icon:hover { background: rgba(255, 255, 255, .14); }
.word-topbar-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.word-topbar-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}
.word-topbar-title {
    font: 400 13px/1 "Segoe UI", Arial, sans-serif;
    color: #fff;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.word-editor .discover-search,
.word-editor .discover-go,
.word-editor .discover-block,
.word-topbar .discover-search,
.word-topbar .discover-go,
.word-search-box .discover-go {
    display: none !important;
}
.word-editor .word-search-box.discover-search,
.word-topbar .word-search-box.discover-search {
    display: inline-flex !important;
}
.word-search-box,
.word-editor .word-search-box,
.word-topbar .word-search-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: min(360px, 42vw) !important;
    min-width: 180px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 10px 0 10px !important;
    border: 1px solid rgba(15, 40, 80, .28) !important;
    border-radius: 0 !important;
    background: #b7c7de !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important;
    box-sizing: border-box !important;
    cursor: text !important;
    font-weight: 400 !important;
}
.word-search-box:focus-within {
    background: #c5d3e8 !important;
    border-color: rgba(15, 40, 80, .4) !important;
}
.word-search-glyph {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    color: #333 !important;
    pointer-events: none !important;
}
.word-search-glyph svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.word-topbar-search,
.word-editor .word-topbar-search,
.word-editor input.word-topbar-search[type="search"],
.word-search-box .word-topbar-search,
.word-topbar input.word-topbar-search[type="search"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #222 !important;
    padding: 0 !important;
    font: 400 13px/26px "Segoe UI", Arial, sans-serif !important;
    outline: none !important;
}
.word-topbar-search::-webkit-search-decoration,
.word-topbar-search::-webkit-search-cancel-button,
.word-topbar-search::-webkit-search-results-button,
.word-topbar-search::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}
.word-topbar-search::placeholder,
.word-editor .word-topbar-search::placeholder,
.word-search-box .word-topbar-search::placeholder {
    color: #444 !important;
    opacity: 1 !important;
    font: 400 13px/26px "Segoe UI", Arial, sans-serif !important;
}
.word-topbar-search:focus,
.word-editor .word-topbar-search:focus,
.word-search-box .word-topbar-search:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.word-topbar-signin {
    border: 0;
    background: #fff;
    color: #2b579a;
    font: 600 12px/1 "Segoe UI", Arial, sans-serif;
    padding: 7px 12px;
    border-radius: 2px;
    cursor: default;
}
.word-tabs {
    height: 34px;
    display: flex;
    align-items: stretch;
    background: #f3f3f3;
    border-bottom: 1px solid #d0d0d0;
    padding: 0 4px 0 4px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    position: relative;
    z-index: 4;
}
.word-tabs::-webkit-scrollbar { display: none; }
.word-tab {
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #252525;
    font: 400 13px/34px "Segoe UI", Arial, sans-serif;
    cursor: pointer;
    position: relative;
}
.word-tab:hover { background: #e8e8e8; }
.word-tab.is-active {
    font-weight: 600;
    color: #2b579a;
}
.word-tab.is-active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    background: #2b579a;
}
.word-tab[data-word-tab="File"] {
    background: #2b579a;
    color: #fff;
    font-weight: 600;
    margin-right: 2px;
}
.word-tab[data-word-tab="File"]:hover { background: #214578; color: #fff; }
.word-tab[data-word-tab="File"].is-active { color: #fff; }
.word-tab[data-word-tab="File"].is-active::after { display: none; }
.word-tabs-share {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #2b579a;
    font: 600 12px/1 "Segoe UI", Arial, sans-serif;
    padding: 0 12px;
    cursor: default;
    align-self: center;
}
.word-tabs-share svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.word-ribbon-viewport {
    background: #f3f3f3;
    border-bottom: 1px solid #c8c8c8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    overflow-anchor: none;
}
.word-editor .word-ribbon-viewport .word-editor-bar.word-ribbon {
    width: max-content !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
}
.word-statusbar {
    height: 25px;
    border-top: 1px solid #ccc;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: #555;
    font-size: 11px;
}
.word-editor.is-focus-mode .word-topbar,
.word-editor.is-focus-mode .word-tabs,
.word-editor.is-focus-mode .word-ribbon-viewport,
.word-editor.is-focus-mode .word-statusbar { display: none !important; }
.word-editor-bar.word-ribbon {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    min-width: max-content;
    max-width: none;
    flex-shrink: 0;
    min-height: 108px;
    max-height: 108px;
    height: 108px;
    gap: 0;
    padding: 6px 8px 16px;
    background: #f3f3f3;
    border-bottom: 0;
    box-shadow: none;
    overflow: visible;
    scrollbar-width: none;
    box-sizing: border-box;
}
.word-editor-bar.word-ribbon[hidden] {
    display: none !important;
}
.word-editor-bar.word-ribbon::-webkit-scrollbar { display: none; width: 0; height: 0; }
.word-ribbon-group {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    padding: 0 10px 16px;
    gap: 6px;
    border-right: 1px solid #cecece;
    min-width: max-content;
    width: max-content;
    height: 100%;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
}
.word-ribbon-group:last-child { border-right: 0; }
.word-ribbon-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4px;
    min-height: 70px;
    max-height: 74px;
    padding-bottom: 2px;
    box-sizing: border-box;
}
.word-ribbon-content:has(> .word-ribbon-row),
.word-ribbon-content:has(> .word-style-gallery) {
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: none;
    gap: 4px;
}
.word-ribbon-group.is-font { min-width: 300px; }
.word-ribbon-group.is-styles { min-width: 320px; }
.word-ribbon-group.is-editing { min-width: 150px; }
.word-ribbon-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    display: block;
    text-align: center;
    font: 400 10px/12px "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: #444;
    padding: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}
.word-ribbon-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
    min-height: 28px;
    width: max-content;
    min-width: 0;
    box-sizing: border-box;
}
.word-ribbon-row + .word-ribbon-row { margin-top: 0; }
.word-ribbon-row.is-wrap {
    flex-wrap: nowrap;
    row-gap: 4px;
    max-width: none;
}
.word-ribbon-row-align {
    flex-wrap: nowrap;
    gap: 4px;
}
.word-ribbon-stack {
    display: grid;
    gap: 4px;
    align-content: start;
}
.word-editor-bar button,
.word-editor-bar select {
    height: 28px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #252525;
    font: 15px/1.05 "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.word-editor-bar button:not(.word-style-chip):not(.word-ribbon-btn) {
    min-width: 28px;
    width: 28px;
    max-width: 28px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
}
.word-editor-bar button:hover,
.word-editor-bar button:focus-visible,
.word-editor-bar button.is-on {
    background: #e3ebf7;
    border-color: #9eb6d7;
    outline: none;
}
.word-editor-bar button:active { background: #d4e1f2; }
.word-editor-bar select.rselect,
.word-editor-bar select {
    border: 1px solid #b9b9b9 !important;
    background: #ffffff !important;
    padding: 1px 3px;
    height: 22px;
    border-radius: 0;
    color: #222;
    font-size: 11px;
}
.word-editor-bar select.word-font-select,
.word-font-select {
    min-width: 150px !important;
    width: 150px !important;
    max-width: 160px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-image: none !important;
    border: 1px solid #b9b9b9 !important;
    background-color: #fff !important;
    padding: 1px 3px !important;
}
.word-editor-bar select.word-size-select,
.word-size-select {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-image: none !important;
    border: 1px solid #b9b9b9 !important;
    background-color: #fff !important;
    padding: 1px 3px !important;
}
.word-editor-bar select.word-line-select,
.word-line-select {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 26px !important;
    flex: 0 0 auto !important;
    margin-left: 4px;
    box-sizing: border-box;
    font-size: 11px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-image: none !important;
    border: 1px solid #b9b9b9 !important;
    background-color: #fff !important;
    padding: 1px 4px !important;
}
.word-ribbon-row-spacing {
    display: none;
}
.word-editor-bar svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.word-ribbon-btn,
.word-ribbon-btn.is-tall {
    flex-direction: column !important;
    height: 72px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 70px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 4px 2px !important;
    gap: 2px;
    align-self: flex-start;
    flex: 0 0 auto !important;
    white-space: normal;
}
.word-ribbon-btn .word-ribbon-glyph {
    display: block;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
}
.word-ribbon-btn .word-ribbon-glyph svg {
    width: 26px;
    height: 26px;
}
.word-ribbon-btn .word-ribbon-caption {
    display: block;
    max-width: 58px;
    font: 400 11px/13px "Segoe UI", Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    color: #252525;
    text-align: center;
}
.word-style-gallery {
    display: flex;
    gap: 5px;
    overflow: hidden;
    width: max-content;
    max-width: none;
    min-width: max-content;
    flex-shrink: 0;
    padding: 0;
    align-items: flex-start;
    flex-wrap: nowrap;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
}
.word-editor-bar button.word-style-chip,
.word-style-chip {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 3px 5px !important;
    border: 1px solid #c8c8c8 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #333 !important;
    text-align: left;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    overflow: hidden;
    box-sizing: border-box;
}
.word-style-sample {
    display: block;
    font: 400 17px/1.1 "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    color: #315f9f;
    white-space: nowrap;
}
.word-style-sample.is-h1 { font-size: 16px; }
.word-style-sample.is-h2 { font-size: 15px; }
.word-style-sample.is-h3 { font-size: 14px; color: #334155; }
.word-style-sample.is-title { font-size: 16px; font-weight: 700; }
.word-style-sample.is-quote { font-style: italic; color: #64748b; font-size: 14px; }
.word-style-name {
    display: block;
    font: 400 11px/1.1 "Segoe UI", Arial, sans-serif;
    color: #333;
    white-space: nowrap;
}
.word-style-chip.is-on,
.word-style-chip:hover {
    border-color: #7396c8 !important;
    background: #f4f8fe !important;
    box-shadow: none;
}

/* Narrow viewports: keep Word ribbon scrollable */
@media (max-width: 720px) {
    .word-ribbon-viewport { overflow-x: auto; }
    .word-editor-bar.word-ribbon {
        width: max-content;
        min-width: 100%;
        min-height: 108px;
        max-height: 108px;
        height: 108px;
        padding: 6px 6px 16px;
    }
    .word-ribbon-group {
        min-height: 0;
        padding: 0 8px 16px;
    }
    .word-ribbon-label {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        text-align: center;
        font-size: 10px;
        color: #444;
    }
    .word-ribbon-btn {
        height: 58px !important;
        width: 52px !important;
        min-width: 52px !important;
        min-height: 58px !important;
    }
    .word-ribbon-btn .word-ribbon-caption { display: block; font-size: 10px; }
    .word-ribbon-btn .word-ribbon-glyph svg { width: 22px; height: 22px; }
    .word-style-gallery { flex-wrap: nowrap; }
    .word-style-chip { width: 68px; min-width: 68px; }
    .word-editor-canvas {
        width: calc(100% - 20px);
        margin: 12px 10px 16px;
        padding: 28px 22px;
    }
    .word-font-select { min-width: 120px; width: 120px; }
}
.word-sep { width: 1px; height: 18px; background: #e1e4ec; margin: 0 2px; }
.word-color { position: relative; display: inline-flex; align-items: center; gap: 0; }
.word-color button {
    font-weight: 800;
    border-bottom: 3px solid #c00000 !important;
    padding-bottom: 1px;
    min-width: 24px;
}
.word-color input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.word-color.is-mark button {
    border-bottom-color: #eab308 !important;
    background: #fff3a0;
}
.word-editor-save {
    margin-left: 6px;
    min-width: 78px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 10px !important;
    gap: 6px;
    background: #1b4689 !important;
    color: #fff !important;
    font-weight: 800 !important;
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.word-editor-save .brand-save-mark { width: 14px; height: 14px; }
.word-editor-save:hover { background: #163a72 !important; }
.word-pop, .word-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: #fbfcff;
    border-bottom: 1px solid #e6e8ee;
}
.word-pop[hidden], .word-help[hidden] { display: none; }
.word-pop input, .word-pop label { font: 13px/1.3 var(--font); font-weight: 600; }
.word-pop input[type="url"], .word-pop input[type="number"] {
    height: 34px;
    border: 1px solid #e4e7ee;
    border-radius: 6px;
    padding: 0 8px;
    min-width: 180px;
}
.word-pop button, .word-file {
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: #3b6ef6;
    color: #fff;
    font-weight: 700;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.word-file input { display: none; }
.word-help { color: #6b6284; font-size: 13px; font-weight: 600; }
.word-editor-canvas {
    position: relative;
    z-index: 1;
    min-height: 360px;
    margin: 18px auto 22px;
    width: min(816px, calc(100% - 28px));
    padding: 48px 56px;
    outline: none;
    zoom: normal;
    transform: none;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    color: #222;
    background: #ffffff !important;
    border: 0;
    box-shadow: 0 0 2px #aaa;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
    overflow-wrap: break-word;
}
.word-editor-canvas::selection,
.word-editor-canvas *::selection {
    background: #316ac5;
    color: #fff;
}
.word-editor-canvas::-moz-selection,
.word-editor-canvas *::-moz-selection {
    background: #316ac5;
    color: #fff;
}
.word-editor-canvas.is-empty:before {
    content: attr(data-placeholder);
    color: #a29eb4;
    pointer-events: none;
    display: block;
    font: inherit;
    line-height: inherit;
}
.word-editor-canvas h1 { font-size: 28px; line-height: 1.25; margin: 0 0 10px; }
.word-editor-canvas h2 { font-size: 22px; line-height: 1.3; margin: 0 0 8px; }
.word-editor-canvas h3 { font-size: 18px; line-height: 1.35; margin: 0 0 8px; }
.word-editor-canvas p { margin: 0 0 10px; line-height: inherit; }
.word-editor-canvas ul,
.word-editor-canvas ol {
    margin: 0 0 10px 1.25em;
    padding: 0;
    line-height: inherit;
}
.word-editor-canvas li {
    margin: 0 0 4px;
    line-height: inherit;
    font: inherit;
}
.word-editor-canvas ol {
    list-style: decimal;
    list-style-position: outside;
}
.word-editor-canvas ul {
    list-style: disc;
    list-style-position: outside;
}
.word-editor-canvas td > ol,
.word-editor-canvas td > ul {
    margin: 0;
    padding-left: 1.2em;
}
.word-editor-canvas blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid #d9deea; color: #5c5674; }
.word-editor-canvas table,
.word-editor-canvas table.word-sheet-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    table-layout: fixed;
    background: #fff;
}
.word-editor-canvas td,
.word-editor-canvas th {
    border: 1px solid #444 !important;
    min-width: 72px;
    min-height: 28px;
    padding: 8px 10px;
    vertical-align: top;
    background: #fff;
}
.word-editor-canvas img, .word-editor-canvas iframe { max-width: 100%; height: auto; }
.word-editor textarea[data-rich-source] { display: none; }
.word-editor.is-code textarea[data-rich-source] {
    display: block;
    width: calc(100% - 28px);
    min-height: 360px;
    margin: 12px 14px 16px;
    border: 1px solid #d0d0d0;
    padding: 18px 20px;
    resize: vertical;
    font: 13px/1.55 ui-monospace, Consolas, monospace;
    color: #0f172a;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.word-editor.is-code .word-editor-canvas { display: none; }
.news-body h1, .news-body h2, .news-body h3 { margin: 0 0 .6rem; }
.news-body p { margin: 0 0 .8rem; }
.news-body ul, .news-body ol { margin: 0 0 .8rem 1.2em; }
.news-body table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.news-body td, .news-body th { border: 1px solid #d5d8e0; padding: 6px 8px; }
.news-body img, .news-body iframe { max-width: 100%; }
.news-body a { color: #1b4689; text-decoration: underline; }
/* Keep Word ribbon Office-light even in dark theme (matches Client notes look) */
html.theme-dark .word-editor {
    background: #e6e6e6 !important;
    border-color: #c8c8c8 !important;
}
html.theme-dark .word-topbar {
    background: #2b579a !important;
    color: #fff !important;
}
html.theme-dark .word-tabs,
html.theme-dark .word-ribbon-viewport,
html.theme-dark .word-statusbar {
    background: #f3f3f3 !important;
    color: #252525 !important;
    border-color: #d0d0d0 !important;
}
html.theme-dark .word-editor-canvas,
html.theme-dark .word-editor.is-code textarea[data-rich-source] {
    background: #ffffff !important;
    color: #222 !important;
    border-color: #c8c8c8;
}
html.theme-dark .word-editor-bar select,
html.theme-dark .word-pop input {
    background: #ffffff;
    color: #222;
    border-color: #b9b9b9;
}
html.theme-dark .word-editor-bar.word-ribbon {
    background: #f3f3f3;
    border-bottom-color: #c8c8c8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
html.theme-dark .word-editor-bar,
html.theme-dark .word-pop,
html.theme-dark .word-help {
    background: #f3f3f3;
    border-color: #c8c8c8;
    color: #222;
}
html.theme-dark .word-editor-bar button { color: #222; }

.sms-studio { overflow: visible; }
.mat-sms-studio {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 8px 28px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.mat-sms-studio:hover {
    transform: none;
    box-shadow: none;
}
.mat-sms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 20px 18px;
    border-bottom: 1px solid #eef1f5;
    background: transparent;
}
.mat-sms-head h2 {
    margin: 0;
    font: 700 18px/1.2 var(--font);
    color: #0f172a;
}
.mat-sms-form {
    display: grid;
    gap: 28px;
    padding: 28px 20px 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.mat-sms-studio .sms-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.mat-sms-mode {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    text-align: left;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}
.mat-sms-studio .mat-sms-mode input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.mat-sms-mode strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.2;
}
.mat-sms-mode strong i {
    color: #dc2626;
    font-style: normal;
    margin-left: 2px;
}
.mat-sms-mode-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 6px 4px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    color: #0f172a;
}
.mat-sms-mode:has(input:checked) .mat-sms-mode-line {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.mat-sms-mode em {
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    max-width: none;
}
.mat-sms-link {
    border: 0;
    background: transparent;
    color: #123a6f;
    font: 700 12px/1 var(--font);
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}
.mat-sms-link:hover { color: #0c2749; }
.mat-sms-manual { gap: 10px; }
.mat-sms-studio .mat-field textarea {
    width: 100%;
    min-height: 88px;
    margin: 0;
    padding: 6px 4px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    resize: vertical;
    font: 500 14px/1.45 var(--font);
    color: #0f172a;
    outline: none;
}
.mat-sms-studio .mat-field textarea:focus {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.mat-sms-message { gap: 10px; }
.mat-sms-studio .mat-message-field .word-editor {
    border: 1px solid #c8ccd2;
    border-radius: 3px;
    box-shadow: none;
    background: #fff;
}
.mat-sms-studio .mat-message-field .word-editor-canvas {
    min-height: 160px;
    padding: 12px 14px;
}
.mat-sms-foot {
    justify-content: flex-end;
    padding-top: 8px;
}
.mat-sms-studio .sms-send.mat-wizard-next {
    min-width: 120px;
    animation: none;
}
.mat-sms-studio .sms-send.mat-wizard-next i { animation: none; }
.mat-sms-studio .mail-history-btn.mat-wizard-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
@media (max-width: 900px) {
    .mat-sms-studio .sms-modes { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
}
@media (max-width: 640px) {
    .mat-sms-studio .sms-modes { grid-template-columns: 1fr; }
}

/* Alerts + Email notifications — Material flat (same language as Create Client) */
.mat-alert-page {
    display: grid;
    gap: 28px;
    width: 100%;
    padding: 8px 8px 28px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.mat-alert-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px 8px 4px;
    border: 0;
    overflow: visible;
}
.mat-alert-page-head .sms-toolbar-right {
    margin-left: auto;
}
.mat-alert-page-head .mail-history-btn.mat-wizard-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    height: 38px;
    padding: 0 16px;
    white-space: nowrap;
    text-decoration: none;
}
.mat-alert-card {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 24px 22px;
    border: 1px solid #e8edf4;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.mat-alert-setup {
    margin-bottom: 0;
}
.mat-alert-recipients {
    margin-top: 0 !important;
}
.mat-alert-form {
    display: grid;
    gap: 32px;
}
.mat-alert-studio {
    display: grid;
    gap: 0;
}
.mat-alert-studio .alert-board {
    display: grid;
    gap: 28px;
    padding: 28px 20px 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    grid-template-columns: 1fr;
}
.mat-alert-studio .mat-field input:not(.word-topbar-search):not([data-word-search]),
.mat-alert-studio .mat-field select:not(.word-font-select):not(.word-size-select):not(.word-line-select),
.mat-alert-studio .mat-field textarea:not([data-rich-source]) {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 4px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
}
.mat-alert-studio .mat-field textarea:not([data-rich-source]) {
    height: auto;
    min-height: 88px;
    resize: vertical;
}
.mat-alert-studio .mat-field input:not(.word-topbar-search):not([data-word-search]):focus,
.mat-alert-studio .mat-field select:not(.word-font-select):not(.word-size-select):not(.word-line-select):focus,
.mat-alert-studio .mat-field textarea:not([data-rich-source]):focus {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.mat-alert-studio .mat-field input[readonly] {
    color: #64748b;
}
.mat-alert-check input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.mat-alert-check:has(input:checked) .mat-sms-mode-line {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.mat-alert-check:has(input:checked) strong { color: #123a6f; }
.mat-alert-hint {
    align-self: end;
    margin: 0;
    padding-bottom: 10px;
}
.mat-alert-compose {
    display: grid;
    gap: 22px;
}
.mat-alert-compose .alert-picture {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.mat-alert-compose .mat-message-field .word-editor {
    border: 1px solid #c8ccd2;
    border-radius: 3px;
    box-shadow: none;
    background: #fff;
}
.mat-alert-people {
    display: grid;
    gap: 14px;
    padding-top: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.mat-alert-people-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}
.mat-alert-people-copy {
    min-width: 0;
}
.mat-alert-people-head h3 {
    margin: 0 0 4px;
    font: 700 15px/1.3 var(--font);
    color: #0f172a;
}
.mat-alert-people-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}
.mat-alert-people-head .alert-people-search {
    flex: 0 0 auto;
    width: min(400px, 100%);
    max-width: 420px;
    height: 48px;
    margin: 0 0 0 auto;
    padding: 0 16px;
    border: 1px solid #d8dce6;
    border-radius: 999px;
    background: #fff;
    color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .12);
    animation: none;
}
.mat-alert-people-head .alert-people-search:focus-within {
    border-color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .18);
    animation: none;
}
.mat-alert-people-head .alert-people-search svg {
    flex: 0 0 auto;
    color: #6d5efc;
    stroke: currentColor;
}
.mat-alert-people-head .alert-people-search input {
    color: #1d2433;
    font-weight: 600;
}
.mat-alert-people-head .alert-people-search input::placeholder {
    color: #64748b;
    font-weight: 600;
    opacity: 1;
}
.mat-alert-people-head .alert-people-search .discover-go,
.mat-alert-people-head .alert-people-search .discover-icon:nth-of-type(n+2) {
    display: none !important;
}
.mat-alert-studio .alert-save,
.mat-alert-page .alert-save,
.mat-alert-save-under {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 8px;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid #eef1f5;
    background: transparent;
}
.mat-alert-setup .mat-alert-save-under {
    margin-top: 4px;
}
.mat-alert-next {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}
.mat-alert-studio .mat-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    cursor: pointer;
}
.mat-alert-people,
.mat-alert-recipients.mat-alert-people {
    margin-top: 0;
    padding: 24px 22px;
    border: 1px solid #e8edf4;
    border-top: 1px solid #e8edf4;
    background: #fff;
}
.mat-alert-history-card,
.mat-alert-log {
    margin-top: 0;
    padding: 24px 22px 12px;
    border: 1px solid #e8edf4;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.mat-alert-page .mat-field input,
.mat-alert-page .mat-field select,
.mat-alert-page .mat-field textarea {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 4px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
}
.mat-alert-page .mat-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    cursor: pointer;
}
.mat-alert-page .mat-field textarea {
    height: auto;
    min-height: 88px;
    resize: vertical;
}
.mat-alert-page .mat-field input:focus,
.mat-alert-page .mat-field select:focus,
.mat-alert-page .mat-field textarea:focus {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.mat-alert-studio .alert-people-search .discover-go,
.mat-alert-studio .alert-people-search .discover-icon:nth-of-type(n+2),
.mat-alert-page .alert-people-search .discover-go,
.mat-alert-page .alert-people-search .discover-icon:nth-of-type(n+2) {
    display: none !important;
}
.mat-alert-studio .lane-card {
    border: 0;
    border-bottom: 1px solid #e8edf4;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
html.theme-dark .mat-alert-studio .mat-field input,
html.theme-dark .mat-alert-studio .mat-field textarea {
    color: var(--text);
    border-bottom-color: #443e58;
}
.sms-studio > .sms-head.sms-toolbar,
.mail-compose > .sms-head.sms-toolbar,
.mail-history > .sms-head.sms-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    overflow: visible;
}
.sms-head h2 { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
.sms-head h2 i { color: #1b4689; }
.sms-head .sms-search,
.sms-head .discover-block {
    flex: 0 1 320px;
    width: min(320px, 100%);
    max-width: 320px;
    min-width: 200px;
}
.sms-head .sms-search,
.sms-head .sms-search.discover-search {
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 2px 4px 2px 12px;
    gap: 8px;
    border: 1px solid #e6ebf2;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
}
.sms-head .sms-search input,
.sms-head .sms-search.discover-search input {
    width: auto;
    min-height: 0;
    height: 32px;
    flex: 1;
    font-size: 14px;
}
.sms-head .sms-search .discover-go,
.sms-head .discover-block .discover-go {
    height: 34px;
    min-height: 34px;
}
.sms-body { display: grid; gap: 18px; padding: 16px 18px 22px; }
.sms-compose-page {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.sms-form-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.sms-lead { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.sms-form { display: grid; gap: 14px; }
.sms-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sms-form h3, .sms-history h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: #0f172a; }
.sms-credit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #d7e3f3;
    background: #f4f8fd;
    color: #1b4689;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.sms-toolbar-right .sms-credit-head {
    height: 38px;
    padding: 4px 10px 4px 6px;
    border-radius: 10px;
    flex: 0 0 auto;
}
.sms-toolbar-right .sms-credit-head .sms-credit-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
}
.sms-toolbar-right .sms-credit-head strong { font-size: 16px; }
.sms-studio > .sms-head .mail-history-btn {
    min-width: 0;
    height: 38px;
    padding: 0 16px;
}
.sms-credit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff7e0;
    color: #e0a106;
    font-size: 15px;
    flex: 0 0 auto;
}
.sms-credit strong { font-size: 20px; line-height: 1; color: #0f172a; }
.sms-credit.is-low { background: #fff5f5; border-color: #ffc9c9; }
.sms-credit.is-low .sms-credit-icon { background: #ffe3e3; color: #e03131; }
.sms-credit.is-low strong { color: #e03131; }
.sms-credit.is-warn { background: #fff9db; border-color: #ffe066; }
.sms-credit.is-warn .sms-credit-icon { background: #fff3bf; color: #e67700; }
.sms-credit.is-warn strong { color: #e67700; }
.sms-credit.is-ok { background: #ebfbee; border-color: #b2f2bb; }
.sms-credit.is-ok .sms-credit-icon { background: #d3f9d8; color: #2b8a3e; }
.sms-credit.is-ok strong { color: #2b8a3e; }
.sms-credit.is-unknown { color: #64748b; background: #f8fafc; }
.sms-credit.is-unknown .sms-credit-icon { background: #eef2f6; color: #94a3b8; }
.sms-credit.is-unknown strong { font-size: 13px; color: #64748b; }
html.theme-dark .sms-credit { background: #211e2c; border-color: #342f45; color: #93c5fd; }
html.theme-dark .sms-credit strong { color: var(--text); }
html.theme-dark .sms-credit.is-low { background: #2a1518; border-color: #7f1d1d; }
html.theme-dark .sms-credit.is-low .sms-credit-icon { background: #3f1d1d; color: #f87171; }
html.theme-dark .sms-credit.is-low strong { color: #f87171; }
html.theme-dark .sms-credit.is-warn { background: #2a2212; border-color: #854d0e; }
html.theme-dark .sms-credit.is-warn .sms-credit-icon { background: #3f2e12; color: #fbbf24; }
html.theme-dark .sms-credit.is-warn strong { color: #fbbf24; }
html.theme-dark .sms-credit.is-ok { background: #12261a; border-color: #166534; }
html.theme-dark .sms-credit.is-ok .sms-credit-icon { background: #14532d; color: #4ade80; }
html.theme-dark .sms-credit.is-ok strong { color: #4ade80; }
html.theme-dark .sms-credit.is-unknown,
html.theme-dark .sms-credit.is-unknown strong { color: #94a3b8; }

.graph-split {
    display: grid;
    grid-template-columns: minmax(260px, 520px) minmax(200px, 1fr) minmax(200px, 1fr);
    justify-content: start;
    gap: 14px;
    margin: 0 0 16px;
    align-items: stretch;
    min-width: 0;
}
.graph-split > .sales-card {
    max-width: 520px;
}
.graph-split > .stat-card {
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.graph-split > .stat-card .stat-chart { width: 72px; height: 40px; flex-basis: 72px; }
.graph-split .sales-top { padding: 14px 14px; gap: 8px; }
.graph-split .sales-tabs { gap: 12px; flex-wrap: wrap; }
.graph-split .sales-stats { padding: 12px 4px; }
.graph-split .sales-chart { padding: 8px 8px 4px; }
.graph-split .sales-svg { max-height: 196px; }
.graph-split > .donut-card { min-height: 0; padding: 14px 12px 16px; }
.graph-split .donut-stage .pie-figure { width: min(86%, 150px); }
.graph-side,
.graph-extra {
    display: grid;
    min-width: 0;
    min-height: 0;
}
.graph-extra {
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}
.graph-extra .stat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.donut-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
    min-width: 0;
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 16px 16px 18px;
}
.donut-card .stat-kicker { display: flex; align-items: center; gap: 8px; }
.donut-card.tone-primary .stat-glyph { color: #3b6fe8; }
.donut-stage {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 0;
}
.donut-stage .pie-figure { width: min(100%, 210px); aspect-ratio: 1; }
.donut-caption { fill: #8b99b4; font-weight: 600; }
.donut-value { fill: #1f2937; }
.donut-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    margin-top: 4px;
    padding: 6px 14px;
    border: 1px solid #ece8f4;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.donut-badge i { color: #e85d8c; font-style: normal; }
.donut-key {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.donut-key li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.donut-key i { width: 8px; height: 8px; border-radius: 50%; }
.donut-key b { color: #0f172a; font-variant-numeric: tabular-nums; }
html.theme-dark .donut-card { background: #211e2c; border-color: #342f45; }
html.theme-dark .donut-caption { fill: #94a3b8; }
html.theme-dark .donut-value,
html.theme-dark .donut-key b { fill: #e7e4f2; color: #e7e4f2; }
html.theme-dark .donut-badge { background: #211e2c; border-color: #342f45; color: #c5d0e6; }
html.theme-dark .donut-key li { color: #c5d0e6; }
.pie-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 168px;
    min-width: 0;
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 16px 18px;
}
.pie-card .stat-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pie-card.tone-primary .stat-glyph { color: #3b82f6; }
.pie-card.tone-info .stat-glyph { color: #0284c7; }
.pie-body {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-height: 0;
}
.pie-figure { width: min(46%, 168px); aspect-ratio: 1; flex: 0 0 auto; }
.pie-svg { width: 100%; height: 100%; display: block; }
.pie-track { stroke: #eef2f7; }
.pie-svg text { fill: #0f172a; }
.pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; flex: 1; }
.pie-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}
.pie-legend i { width: 10px; height: 10px; border-radius: 50%; }
.pie-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-legend b { color: #0f172a; font-variant-numeric: tabular-nums; }
html.theme-dark .pie-card { background: #211e2c; border-color: #342f45; }
html.theme-dark .pie-track { stroke: #342f45; }
html.theme-dark .pie-svg text,
html.theme-dark .pie-legend b { fill: #e7e4f2; color: #e7e4f2; }
html.theme-dark .pie-legend li { color: #c5d0e6; }
.sales-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 6px;
    overflow: hidden;
    color: #24385d;
}
.sales-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px dashed #e2e6ee;
    font-weight: 700;
}
.sales-muted { color: #8b99b4; font-weight: 600; }
.sales-tabs { display: flex; gap: 24px; }
.sales-tabs button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 0 8px;
    color: #24385d;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.sales-tabs button.is-active { color: #155bc5; border-bottom-color: #155bc5; background: none; }
.sales-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 20px 10px;
    border-bottom: 1px dashed #e2e6ee;
}
.sales-stat { text-align: center; min-width: 0; }
.sales-stat .sales-muted { margin-bottom: 9px; font-size: 13px; }
.sales-val { font-size: 16px; font-weight: 700; }
.sales-green { color: #00bda6; margin-right: 8px; }
.sales-chart { padding: 15px 20px 8px; }
.sales-svg { width: 100%; height: auto; display: block; }
html.theme-dark .sales-card { background: #211e2c; border-color: #342f45; color: #e7e4f2; }
html.theme-dark .sales-top,
html.theme-dark .sales-stats { border-color: #342f45; }
html.theme-dark .sales-tabs button { color: #e7e4f2; }
html.theme-dark .sales-svg text { fill: #c5d0e6; }
@media (max-width: 1180px) {
    .graph-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .graph-split > .sales-card { max-width: none; }
}
@media (max-width: 900px) {
    .graph-split { grid-template-columns: minmax(0, 1fr); }
    .graph-extra { grid-template-rows: none; }
    .sales-top { padding: 14px 12px; font-size: 13px; }
    .sales-tabs { gap: 12px; }
    .sales-stats { padding: 14px 0; }
    .sales-val { font-size: 13px; }
    .sales-chart { padding: 8px; }
}
.sms-balance-card {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 18px rgba(16, 24, 40, .05);
    margin: 0 0 16px;
}
.sms-balance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px 8px;
}
.sms-balance-head h2 { margin: 0; font-size: 16px; color: #0f172a; }
.sms-balance-head .sub { color: #64748b; font-weight: 600; }
.sms-balance-card .seg { gap: 18px; }
.sms-balance-card .seg button {
    background: transparent;
    color: #64748b;
    border-radius: 0;
    padding: 6px 2px 8px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}
.sms-balance-card .seg button.is-active {
    background: transparent;
    color: #3b5bdb;
    border-bottom-color: #3b5bdb;
}
.sms-balance-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
}
.sms-balance-metrics > div { padding: 16px 18px; }
.sms-balance-metrics > div + div { border-left: 1px solid #eef1f6; }
.sms-balance-metrics span { display: block; color: #64748b; font-size: 13px; }
.sms-balance-metrics strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 22px;
    color: #0f172a;
}
.sms-balance-metrics > div:nth-child(1) svg { color: #3b5bdb; }
.sms-balance-metrics > div:nth-child(2) svg { color: #f59f00; }
.sms-balance-card.is-low .sms-balance-status,
.sms-balance-card.is-low .sms-balance-metrics > div:nth-child(3) svg { color: #e03131; }
.sms-balance-card.is-warn .sms-balance-status,
.sms-balance-card.is-warn .sms-balance-metrics > div:nth-child(3) svg { color: #e67700; }
.sms-balance-card.is-ok .sms-balance-status,
.sms-balance-card.is-ok .sms-balance-metrics > div:nth-child(3) svg { color: #2f9e44; }
.sms-balance-plot { padding: 4px 12px 0; }
.sms-balance-svg { display: block; width: 100%; height: 148px; }
.sms-balance-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.sms-balance-legend i { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.sms-balance-card.is-low .sms-balance-legend i { background: #e03131; }
.sms-balance-card.is-warn .sms-balance-legend i { background: #f59f00; }
.sms-balance-card.is-ok .sms-balance-legend i { background: #7c6bf2; }
html.theme-dark .sms-balance-card { background: #211e2c; border-color: #342f45; }
html.theme-dark .sms-balance-head h2,
html.theme-dark .sms-balance-metrics strong { color: var(--text); }
html.theme-dark .sms-balance-metrics,
html.theme-dark .sms-balance-metrics > div + div { border-color: #342f45; }
@media (max-width: 720px) {
    .sms-balance-metrics { grid-template-columns: 1fr; }
    .sms-balance-metrics > div + div { border-left: 0; border-top: 1px solid #eef1f6; }
}
.sms-form h3 i, .sms-history h3 i { color: #1b4689; }
.sms-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    padding: 22px 12px 18px;
    border: 1px solid rgba(101, 109, 119, .16);
    border-radius: 8px;
    background: #fff;
}
.sms-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    min-height: 0;
    padding: 8px 10px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}
.sms-mode-logo {
    width: 48px;
    height: 48px;
    margin: 0 0 12px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e9f0ff;
    color: #206bc4;
    font-size: 20px;
}
.sms-mode-copy { display: grid; gap: 4px; min-width: 0; justify-items: center; }
.sms-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sms-studio .sms-mode input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.sms-studio .sms-person,
.sms-pop .sms-person,
.sms-studio .sms-check,
.sms-pop .sms-check {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.sms-studio .sms-check,
.sms-pop .sms-check { grid-template-columns: 22px auto; justify-content: start; }
.sms-studio .sms-person[hidden],
.sms-pop .sms-person[hidden],
.sms-studio [data-sms-row][hidden],
.sms-pop [data-sms-row][hidden],
.sms-person.is-filtered-out,
[data-sms-row].is-filtered-out { display: none !important; }
.sms-studio .sms-person input[type="checkbox"],
.sms-pop .sms-person input[type="checkbox"],
.sms-studio .sms-check input[type="checkbox"],
.sms-pop .sms-check input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    accent-color: #1b4689;
}
.sms-mode strong { font-size: 16px; font-weight: 700; color: #1d273b; line-height: 1.3; }
.sms-mode small, .sms-mode em { color: #667382; font-size: 13px; font-weight: 400; font-style: normal; line-height: 1.45; max-width: 220px; }
.sms-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    width: auto;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    background: #fff;
    color: #206bc4;
    min-height: 32px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}
.sms-card-btn i {
    width: 18px;
    font-size: 14px;
    text-align: center;
    color: #206bc4;
}
.sms-card-btn:hover { background: #f6f8fb; border-color: #dce3ed; }
.sms-mode:has(input:checked) { background: #f6f8fb; box-shadow: none; }
.sms-pop {
    position: fixed;
    inset: 0;
    z-index: 5100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 16px 24px;
}
.sms-pop[hidden] { display: none !important; }
.sms-pop-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    background: rgba(24, 36, 51, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0;
}
.sms-pop-card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 110px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 109, 119, .16);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(24, 36, 51, .18);
    opacity: 0;
    transform: translateY(22px) scale(.96);
}
.tblr-modal { z-index: 5000; }
.tblr-modal-card {
    width: min(1080px, calc(100% - 24px));
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.tblr-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 110px);
}
.tblr-modal-head,
.tblr-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(101, 109, 119, .16);
}
.tblr-modal-foot {
    border-bottom: 0;
    border-top: 1px solid rgba(101, 109, 119, .16);
    justify-content: flex-end;
}
.tblr-modal-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    color: #1d273b;
}
.tblr-modal-head h3 i { color: #206bc4; }
.tblr-modal-body {
    padding: 1.15rem 1.25rem;
    overflow: auto;
    display: grid;
    gap: 14px;
}
.tblr-modal-foot .btn-link {
    border: 0;
    background: transparent;
    color: #667382;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: .55rem 1rem;
}
.tblr-modal-foot .btn { margin-left: auto; }
.sms-studio.panel:hover,
.mail-compose.panel:hover,
.mail-history.panel:hover,
.dir-board:hover,
.lead-stats:hover,
.lead-stat:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.dir-table tbody tr,
table.dir-table tbody tr,
body.is-motion table.dir-table tbody tr,
body.is-motion table.data.dir-table tbody tr {
    animation: none !important;
}
.sms-pop.is-on .sms-pop-backdrop { animation: sms-fade .22s ease forwards; }
.sms-pop.is-on .sms-pop-card { animation: sms-pop-in .34s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes sms-fade { to { opacity: 1; } }
@keyframes sms-pop-in {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to { opacity: 1; transform: none; }
}
.sms-pop-card header strong { display: inline-flex; align-items: center; gap: 8px; }
.sms-pop-card header strong i { color: #1d4ed8; }
.sms-person-icon { color: #1d4ed8; font-size: 14px; }
.sms-pop-card footer .sms-card-btn { display: inline-flex; align-items: center; gap: 8px; }
.sms-pop-card header,
.sms-pop-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sms-pop-card header strong { font-size: 16px; color: #1d4f91; }
.sms-pop-card footer { justify-content: flex-end; }
.sms-pop-card footer .sms-card-btn { margin-top: 0; }
.sms-pop-x {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1d4f91;
    cursor: pointer;
}
.sms-pop .sms-panel { min-height: 0; overflow: auto; }
.sms-pop .sms-people { max-height: none; }
body.sms-pop-open { overflow: hidden; }
@keyframes sms-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.sms-panel { display: grid; gap: 10px; }
.sms-panel[hidden] { display: none !important; }
.sms-search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; border: 1px solid #d5dbe6; border-radius: 10px; background: #fff; }
.sms-search.discover-search { height: 58px; min-height: 58px; padding: 4px 4px 4px 14px; border: 1px solid #e6ebf2; border-radius: 999px; box-shadow: 0 10px 28px rgba(27, 70, 137, .08); }
.sms-search i { color: #94a3b8; }
.sms-search input { width: 100%; min-height: 42px; border: 0; background: transparent; color: #0f172a; font: inherit; }
.sms-search.discover-search input { width: auto; min-height: 0; height: 36px; flex: 1; }
.sms-search input:focus { outline: none; }
.sms-people { display: grid; gap: 8px; max-height: 280px; overflow: auto; padding-right: 2px; }
.sms-check, .sms-person { margin: 0; }
.sms-person {
    padding: 10px 12px;
    border: 1px solid #e7ebf3;
    border-radius: 10px;
    background: #fff;
}
.sms-person.is-missing { opacity: .62; }
.sms-person-copy { display: grid; min-width: 0; flex: 1; }
.sms-person-copy strong { font-size: 13px; color: #0f172a; }
.sms-person-copy small, .sms-person em { color: #64748b; font-size: 12px; font-style: normal; font-weight: 600; }
.sms-person em { white-space: nowrap; }
.sms-empty, .sms-hint { margin: 0; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.45; }
.sms-manual { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #334155; }
.sms-manual textarea, .sms-studio .word-editor { width: 100%; }
.sms-manual textarea {
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid #d5dbe6;
    border-radius: 10px;
    font: inherit;
    font-weight: 500;
    resize: vertical;
}
.sms-message { display: grid; gap: 8px; }
.sms-message > span { font-size: 13px; font-weight: 700; color: #334155; }
.sms-studio .word-editor-canvas { min-height: 220px; }
.sms-studio .word-editor-save,
.mail-compose .word-editor-save { display: none; }
.mail-compose .word-editor-canvas { min-height: 220px; }
.mail-send-row { display: flex; justify-content: flex-start; }
.mail-send-row .btn { width: auto; min-width: 168px; max-width: 220px; padding-left: 18px; padding-right: 18px; }
/* SMS compose: hide Word status/progress strip (Page 1 | words | 100%). */
.sms-studio .word-statusbar,
.mat-sms-studio .word-statusbar {
    display: none !important;
}
.cnote-ai-agent { margin-bottom: 16px; }
.cnote-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
}
.cnote-ai-out {
    margin: 0 16px 18px;
    padding: 18px 20px;
    min-height: 220px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    white-space: pre-wrap;
    font: 15px/1.65 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    color: #0f172a;
    max-height: 480px;
    overflow: auto;
}
html.theme-dark .cnote-ai-out {
    background: #211e2c;
    border-color: #3a3548;
    color: #e2e8f0;
}
.sms-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: auto;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #12b886;
    border-radius: 8px;
    background: #fff;
    color: #0ca678;
}
.sms-send:hover { background: #e6fcf5; color: #0ca678; }
.sms-send i { animation: sms-float 2.2s ease-in-out infinite; color: #0ca678; }
.sms-history { display: grid; gap: 12px; }
.lane-board {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 2px 8px;
}
.lane {
    flex: 1 1 240px;
    min-width: 230px;
    display: grid;
    gap: 10px;
}
.lane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 4px;
    background: #d8f4f0;
    color: #3d4b59;
}
.lane-head strong {
    font-size: 14px;
    font-weight: 600;
    color: #3d4b59;
}
.lane-count {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #f4fbfa;
    color: #5c6b78;
    font-size: 12px;
    font-weight: 600;
}
.lane-list {
    display: grid;
    align-content: start;
    gap: 10px;
    max-height: min(70vh, 640px);
    overflow: auto;
    padding-right: 2px;
}
.lane-card {
    position: relative;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 12px 40px 14px 14px;
    border: 1px solid #e7ebf2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.lane-card-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
}
.lane-card-delete button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff;
    color: #dc2626;
    cursor: pointer;
}
.lane-card-delete button:hover { background: #fef2f2; }
.lane-card .lane-title {
    display: block;
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #123a6f;
    font: 600 14px/1.35 var(--font);
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #123a6f;
    text-underline-offset: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
button.lane-title { cursor: pointer; }
button.lane-title:hover {
    color: #0c2749;
    text-decoration: underline;
    text-decoration-color: #0c2749;
}
.lane-card time,
.lane-card p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}
.lane-card time.is-late { color: #b91c1c; }
.lane-card form { margin-top: 8px; }
.lane-card select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 13px;
}
.lane-empty {
    margin: 0;
    padding: 4px 2px 8px;
    color: #94a3b8;
    font-size: 13px;
}
.todo-board:has(.lane-board) {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.mail-history .lane-board,
.alert-log .lane-board { padding: 0 16px 18px; }
html.theme-dark .lane-card { background: #211e2c; border-color: #342f45; }
html.theme-dark .lane-card time,
html.theme-dark .lane-card p,
html.theme-dark .lane-empty { color: #b7c0ce; }
html.theme-dark .lane-head { background: #1c3a3a; }
html.theme-dark .lane-head strong { color: #d5e7e4; }
html.theme-dark .lane-count { background: #163030; color: #d5e7e4; }
.sms-empty-board {
    padding: 28px 12px 36px;
    text-align: center;
}
.sms-empty-board h3 {
    display: block;
    margin: 0 0 28px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #1e293b;
}
.sms-empty-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: 920px;
    margin: 0 auto 28px;
}
.sms-empty-cols article { display: grid; justify-items: center; align-content: start; gap: 8px; }
.sms-empty-art { width: min(200px, 100%); height: auto; }
.sms-empty-cols strong { font-size: 14px; color: #0f172a; }
.sms-empty-cols p {
    max-width: 240px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}
.sms-empty-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: #3b5bdb;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.sms-empty-go:hover { background: #364fc7; }
.sms-history > header,
.sms-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}
.sms-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
}
.sms-toolbar-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.sms-history .discover-block {
    flex: 0 1 340px;
    width: min(340px, 100%);
    max-width: 340px;
    min-width: 220px;
}
.sms-history .sms-search,
.sms-history .sms-search.discover-search {
    width: 100%;
    max-width: 340px;
    height: 58px;
    min-height: 58px;
    margin: 0;
    padding: 4px 4px 4px 14px;
    gap: 10px;
    border: 1px solid #e6ebf2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(27, 70, 137, .08);
}
.sms-history .sms-search i { font-size: 16px; color: #94a3b8; }
.sms-history .sms-search input {
    width: auto;
    min-height: 0;
    height: 36px;
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}
.sms-history .sms-search:focus-within {
    background: #fff;
    border-color: #6d5efc;
    box-shadow: 0 10px 28px rgba(109, 94, 252, .16);
}
.sms-history .sms-search:focus-within i { color: #6d5efc; }
.sms-history form { margin: 0; }
.sms-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.sms-status.is-sent { background: #d9f5e6; color: #14804a; }
.sms-status.is-failed { background: #ffe0e8; color: #d61f69; }
.sms-status.is-pending { background: #e8f1ff; color: #2563eb; }
.sms-status.is-notfound { background: #d7f4f2; color: #0f8f88; }
.sms-table td small { display: block; margin-top: 6px; max-width: 260px; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.4; }
.sms-msg { white-space: nowrap; }
.sms-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #3b5bdb;
    border-radius: 8px;
    background: #fff;
    color: #3b5bdb;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.sms-view:hover { background: #edf2ff; }
.sms-pop-card.sms-message-card {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    height: auto;
    max-height: min(72vh, 680px);
}
.sms-message-view {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: min(52vh, 480px);
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.sms-resend,
.sms-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #1b4689;
    border-radius: 8px;
    background: #fff;
    color: #1b4689;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.sms-resend:hover { background: #eef4ff; }
.sms-delete {
    border-color: #fecaca;
    color: #dc2626;
}
.sms-delete:hover { background: #fef2f2; }
@media (max-width: 800px) {
    .sms-modes { grid-template-columns: 1fr; }
    .sms-empty-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sms-mode:has(input:checked) i, .sms-send i, .sms-head h2 i,
    .sms-pop.is-on .sms-pop-card, .sms-pop.is-on .sms-pop-backdrop { animation: none; }
    .sms-pop.is-on .sms-pop-card, .sms-pop.is-on .sms-pop-backdrop { opacity: 1; transform: none; }
}
html.theme-dark .sms-person,
html.theme-dark .sms-search,
html.theme-dark .sms-manual textarea,
html.theme-dark .sms-resend { background: #211e2c; color: var(--text); border-color: #342f45; }
html.theme-dark .sms-compose-page,
html.theme-dark .mat-sms-studio { background: #211e2c; border-color: transparent; }
html.theme-dark .mat-sms-head h2,
html.theme-dark .mat-sms-mode em { color: var(--text); }
html.theme-dark .mat-sms-mode-line,
html.theme-dark .mat-sms-studio .mat-field textarea,
html.theme-dark .mat-sms-studio .mat-message-field .word-editor {
    border-bottom-color: #443e58;
}
html.theme-dark .lane-card-delete button,
html.theme-dark .sms-delete {
    background: #2a1518;
    color: #f87171;
    border-color: #7f1d1d;
}
html.theme-dark .sms-mode { background: transparent; color: var(--text); box-shadow: none; }
html.theme-dark .sms-mode strong,
html.theme-dark .sms-person-copy strong,
html.theme-dark .sms-form h3,
html.theme-dark .sms-history h3,
html.theme-dark .sms-empty-board h3,
html.theme-dark .sms-empty-cols strong { color: var(--text); }
html.theme-dark .sms-empty-cols p { color: #94a3b8; }
html.theme-dark .sms-empty-art ellipse { fill: #2a2638; }
html.theme-dark .sms-modes { background: #1b1824; border-color: #342f45; }
html.theme-dark .sms-mode-logo { background: #2a3348; color: #6ea8ff; }
html.theme-dark .sms-mode:has(input:checked) { background: #211e2c; }
html.theme-dark .sms-pop-card,
html.theme-dark .sms-pop-card header strong { background: #211e2c; color: #dbe7ff; }
html.theme-dark .sms-view { background: #211e2c; color: #dbe7ff; border-color: #6ea8ff; }
html.theme-dark .sms-send { background: #211e2c; color: #3dd68c; border-color: #12b886; }
html.theme-dark .sms-send:hover,
html.theme-dark .sms-send i { color: #3dd68c; }
html.theme-dark .sms-message-view { background: #1a1724; border-color: #342f45; color: var(--text); }
html.theme-dark .sms-card-btn { background: #1d4ed8; color: #fff; }

.swal-announce {
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 42px 14px 16px;
    border: 1px solid #b7e4f3;
    border-radius: 8px;
    background: #e7f6fc;
    color: #24566c;
    box-shadow: none;
}
.swal-announce .swal-info-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #2f9ec8;
    color: #fff;
}
.swal-announce .swal-copy {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #24566c;
}
.swal-announce .swal-copy strong {
    display: inline;
    font-size: 14px;
    font-weight: 700;
    color: #24566c;
}
.swal-announce .swal-action {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #1b6f96;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
}
.swal-announce .swal-action:hover { background: transparent; color: #145676; }
.swal-announce .swal-close { color: #3d7f99; }
.dir-form-grid .dir-span { grid-column: 1 / -1; }
html.theme-dark .swal-announce { background: #163646; border-color: #24566c; color: #d5eef8; }
html.theme-dark .swal-announce .swal-copy,
html.theme-dark .swal-announce .swal-copy strong { color: #d5eef8; }

:is(body.staff-body, body.portal-shell) :is(
    .btn,
    .btn-outline,
    .btn-dark,
    .btn-primary,
    .btn-ghost,
    .dir-btn,
    .sms-card-btn,
    .sms-resend,
    .sms-view,
    .alert-line-btn,
    .todo-save,
    a.action-btn,
    button.action-btn
) {
    background: #fff;
    border: 1px solid #3b5bdb;
    color: #3b5bdb;
    border-radius: 6px;
    box-shadow: none;
}
:is(body.staff-body, body.portal-shell) button.btn-start-task,
:is(body.staff-body, body.portal-shell) button.btn-close-task {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    min-height: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
:is(body.staff-body, body.portal-shell) button.btn-close-task {
    border-color: #e03131;
    color: #e03131;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) button.btn-close-task:hover {
    border-color: #c92a2a;
    color: #c92a2a;
    background: #fff5f5;
}
:is(body.staff-body, body.portal-shell) button.btn-start-task {
    border-color: #2f9e44;
    color: #2f9e44;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) button.btn-start-task:hover {
    border-color: #2b8a3e;
    color: #2b8a3e;
    background: #ebfbee;
}
.task-start-form {
    display: inline-flex;
    margin: 0;
}
.client-record-work-title {
    margin: 0 0 6px;
    color: #1d273b;
    font-size: 1.05rem;
    font-weight: 700;
}
.client-record-work-hint {
    margin: 0 0 14px;
    color: #667382;
    font-size: 13px;
    line-height: 1.45;
}
:is(body.staff-body, body.portal-shell) :is(
    .btn,
    .btn-dark,
    .btn-primary,
    .dir-btn,
    .sms-card-btn,
    .sms-view,
    .todo-save,
    .alert-line-btn.is-save,
    a.action-btn,
    button.action-btn
):hover {
    background: #edf2ff;
    color: #3b5bdb;
}
:is(body.staff-body, body.portal-shell) :is(.btn-outline, .btn-ghost, .dir-btn-ghost) {
    border-color: #7950f2;
    color: #7950f2;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) :is(.btn-outline, .btn-ghost, .dir-btn-ghost):hover {
    background: #f3f0ff;
    color: #7950f2;
}
:is(body.staff-body, body.portal-shell) :is(.dir-btn-save, .alert-line-btn.is-save, .todo-save) {
    border-color: #12b886;
    color: #0ca678;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) :is(.dir-btn-save, .alert-line-btn.is-save, .todo-save):hover {
    background: #e6fcf5;
    color: #0ca678;
}
:is(body.staff-body, body.portal-shell) :is(.dir-btn-danger, .dir-btn-line, .alert-line-btn.is-delete) {
    border-color: #fa5252;
    color: #e03131;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) :is(.dir-btn-danger, .dir-btn-line, .alert-line-btn.is-delete):hover {
    background: #fff5f5;
    color: #e03131;
}
:is(body.staff-body, body.portal-shell) :is(.sms-resend, .alert-line-btn.is-resend, .btn.is-pending) {
    border-color: #fd7e14;
    color: #f76707;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) :is(.sms-resend, .alert-line-btn.is-resend, .btn.is-pending):hover {
    background: #fff4e6;
    color: #f76707;
}
:is(body.staff-body, body.portal-shell) a.signout-btn,
a.signout-btn {
    border-color: #fa5252;
    color: #e03131;
    background: #fff;
}
:is(body.staff-body, body.portal-shell) a.signout-btn:hover,
a.signout-btn:hover {
    background: #fff5f5;
    border-color: #e03131;
    color: #e03131;
}
a.signout-btn svg { color: inherit; stroke: currentColor; }
html.theme-dark :is(body.staff-body, body.portal-shell) a.signout-btn { background: #211e2c; color: #fb7185; border-color: #fb7185; }
html.theme-dark :is(body.staff-body, body.portal-shell) a.signout-btn:hover { background: #3f1515; }
html.theme-dark :is(body.staff-body, body.portal-shell) :is(
    .btn,
    .btn-outline,
    .btn-dark,
    .btn-primary,
    .btn-ghost,
    .dir-btn,
    .dir-btn-ghost,
    .dir-btn-danger,
    .dir-btn-line,
    .sms-card-btn,
    .sms-resend,
    .sms-view,
    .alert-line-btn,
    .todo-save,
    a.action-btn,
    button.action-btn
) {
    background: #211e2c;
}

:is(body.staff-body, body.portal-shell) .sms-form .sms-send {
    width: auto;
    justify-self: end;
    border: 1px solid #12b886;
    border-radius: 8px;
    background: #fff;
    color: #0ca678;
    box-shadow: none;
}
:is(body.staff-body, body.portal-shell) .sms-form .sms-send i { color: #0ca678; }
:is(body.staff-body, body.portal-shell) .sms-form .sms-send:hover {
    background: #e6fcf5;
    color: #0ca678;
}
:is(body.staff-body, body.portal-shell) .sms-form .sms-send:hover i { color: #0ca678; }
html.theme-dark :is(body.staff-body, body.portal-shell) .sms-form .sms-send {
    background: #211e2c;
    color: #3dd68c;
    border-color: #12b886;
}
html.theme-dark :is(body.staff-body, body.portal-shell) .sms-form .sms-send i,
html.theme-dark :is(body.staff-body, body.portal-shell) .sms-form .sms-send:hover,
html.theme-dark :is(body.staff-body, body.portal-shell) .sms-form .sms-send:hover i {
    color: #3dd68c;
}
:is(body.staff-body, body.portal-shell) button.sms-card-btn {
    background: #fff;
    border: 1px solid #d5dbe3;
    color: #334155;
    border-radius: 6px;
    box-shadow: none;
}
:is(body.staff-body, body.portal-shell) button.sms-card-btn:hover {
    background: #f8fafc;
    border-color: #c5cedb;
    color: #334155;
}
html.theme-dark :is(body.staff-body, body.portal-shell) button.sms-card-btn {
    background: #211e2c;
    border-color: #342f45;
    color: #e7eefc;
}
:is(body.staff-body, body.portal-shell) button.dropzone-btn {
    width: auto;
    background: #fff;
    border: 1px solid #3b5bdb;
    color: #3b5bdb;
    border-radius: 6px;
    box-shadow: none;
}
:is(body.staff-body, body.portal-shell) button.dropzone-btn:hover {
    background: #f5f7ff;
    border-color: #3b5bdb;
    color: #3b5bdb;
}

.mail-history-btn { width: auto; min-width: 148px; white-space: nowrap; }
.mail-history .table-wrap { overflow-x: auto; }
.hist-table { min-width: 1080px; }
.hist-table th {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
    white-space: nowrap;
}
.hist-table td { vertical-align: middle; }
.hist-id { color: #64748b; font-weight: 700; font-size: 13px; }
.hist-tag, .hist-status {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hist-tag.is-cloud { background: #d8f5e3; color: #1f9d55; }
.hist-tag.is-ai { background: #e7f0ff; color: #3b6fd8; }
.hist-tag.is-design { background: #fff0e4; color: #f08a24; }
.hist-tag.is-vr { background: #f3e8ff; color: #8b5cf6; }
.hist-tag.is-screen { background: #d7f6f3; color: #0f9d94; }
.hist-tag.is-ev { background: #e8f1ff; color: #3b82f6; }
.hist-tag.is-travel { background: #fde8f0; color: #e85a9b; }
.hist-status.is-progress { background: #e8f0fe; color: #3b6fd8; }
.hist-status.is-sent { background: #f3e8ff; color: #7c5cbf; }
.hist-status.is-failed { background: #fde8ef; color: #e11d6a; }
.hist-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}
.hist-action:hover { background: #f8fafc; color: #1b4689; }
.mail-history .table-pager button { border-radius: 8px; }
.hist-modal { width: min(640px, 100%); }
.hist-modal-body { max-height: 60vh; overflow: auto; padding: 16px 18px 20px; font-size: 14px; line-height: 1.65; color: #1d2433; }
.hist-letter { display: none !important; }
html.theme-dark .hist-action { background: #1e2433; color: #cbd5e1; border-color: #334155; }
html.theme-dark .hist-modal-body { color: #e2e8f0; }
html.theme-dark .hist-id { color: #94a3b8; }

:is(body.staff-body, body.portal-shell) .lead-submit,
:is(body.staff-body, body.portal-shell) .lead-submit-admin {
    background: #fff;
    border: 1px solid #2fb344;
    color: #2fb344;
    border-radius: 100px;
    font-weight: 500;
}
:is(body.staff-body, body.portal-shell) .lead-submit:hover,
:is(body.staff-body, body.portal-shell) .lead-submit-admin:hover {
    background: #2fb344;
    color: #fff;
}
.lead-submit i { font-size: 13px; }
.lead-view {
    color: #206bc4;
    border-color: #206bc4;
    background: #fff;
}
.lead-view:hover {
    color: #fff;
    border-color: #206bc4;
    background: #206bc4;
}
.lead-name-cell {
    max-width: 280px;
    vertical-align: middle;
}
.lead-name-link,
.table-name-link,
table.data td a.table-name-link,
table.dir-table td a.table-name-link,
table.data a.table-name-link,
table.data .lead-name-link,
table.dir-table .lead-name-link,
table.md-table .table-name-link,
table.md-table a.table-name-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #123a6f !important;
    font: 500 13px/1.45 var(--font);
    font-weight: 500 !important;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #123a6f;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
span.table-name-link.is-plain {
    color: #123a6f;
    text-decoration: underline;
    text-decoration-color: #123a6f;
    cursor: default;
}
table.data.dir-table td,
table.md-table td,
.panel.fit-table table.data td {
    color: #1f2937;
    font-weight: 400;
    vertical-align: middle;
}
.lead-name-link:hover,
.table-name-link:hover,
table.data td a.table-name-link:hover,
table.dir-table td a.table-name-link:hover,
table.data .lead-name-link:hover,
table.dir-table .lead-name-link:hover {
    color: #0c2749;
    text-decoration-color: #0c2749;
}
html.theme-dark .lead-name-link,
html.theme-dark .table-name-link,
html.theme-dark .lane-card .lane-title {
    color: #93c5fd;
    text-decoration-color: #93c5fd;
}
html.theme-dark .lead-name-link:hover,
html.theme-dark .table-name-link:hover,
html.theme-dark button.lane-title:hover {
    color: #bfdbfe;
    text-decoration-color: #bfdbfe;
}
.lead-delete {
    color: #d63939;
    border-color: #d63939;
    background: #fff;
}
.lead-delete:hover {
    color: #fff;
    border-color: #d63939;
    background: #d63939;
}
html.theme-dark :is(body.staff-body, body.portal-shell) .lead-submit,
html.theme-dark :is(body.staff-body, body.portal-shell) .lead-submit-admin {
    background: #211e2c;
    border-color: #2f9e44;
    color: #4ade80;
}
html.theme-dark .lead-view {
    color: #74c0fc;
    border-color: #1c4e8a;
    background: #16324f;
}
html.theme-dark .lead-delete {
    color: #ff8787;
    border-color: #8a2b2b;
    background: #3f1515;
}

.discover-block { display: grid; gap: 8px; min-width: min(100%, 280px); flex: 1 1 320px; max-width: 560px; }
.discover-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    height: 58px;
    margin: 0;
    padding: 4px 4px 4px 14px;
    border: 1px solid #e6ebf2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(27, 70, 137, .08);
    color: #64748b;
}
.discover-search input,
.discover-search input[type="search"] {
    flex: 1;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 36px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: #1e293b;
    font: inherit;
}
.discover-search input:focus { outline: none; }
.discover-icon { display: flex; color: #94a3b8; flex: none; }
.discover-icon svg { display: block; }
.discover-go {
    height: 46px;
    min-width: 118px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #123a6f;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    flex: none;
}
.discover-go:hover { background: #0c2749; color: #fff; }
.discover-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 13px;
}
.discover-picks button {
    border: 0;
    border-radius: 999px;
    background: #e8eef5;
    color: #64748b;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.discover-picks button:hover { background: #dbe4f0; color: #334155; }
.search-picks { display: none; }
body.search-centered .search-picks {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 18px);
}
:is(body.staff-body, body.portal-shell) .discover-go {
    background: #123a6f;
    border: 0;
    color: #fff;
    border-radius: 999px;
}
:is(body.staff-body, body.portal-shell) .discover-go:hover { background: #0c2749; color: #fff; }
.fit-bar .discover-search input[type="search"] { max-width: none; width: auto; flex: 1; }
html.theme-dark .discover-search { background: #211e2c; border-color: #342f45; }
html.theme-dark .discover-search input { color: var(--text); }
html.theme-dark .discover-picks button { background: #2a2638; color: #cbd5e1; }

body.staff-body .dir-btn.dir-btn-save,
body.portal-shell .dir-btn.dir-btn-save,
body.staff-body .alert-line-btn.is-save,
body.portal-shell .alert-line-btn.is-save,
body.staff-body .btn.todo-save,
body.portal-shell .btn.todo-save {
    background: #fff;
    border: 1px solid #2f9e44;
    color: #2f9e44;
}
body.staff-body .dir-btn.dir-btn-save:hover,
body.portal-shell .dir-btn.dir-btn-save:hover,
body.staff-body .alert-line-btn.is-save:hover,
body.portal-shell .alert-line-btn.is-save:hover,
body.staff-body .btn.todo-save:hover,
body.portal-shell .btn.todo-save:hover {
    background: #ebfbee;
    border-color: #2b8a3e;
    color: #2b8a3e;
}
body.staff-body .dir-btn.dir-btn-save :is(svg, .ri, i),
body.portal-shell .dir-btn.dir-btn-save :is(svg, .ri, i),
body.staff-body .alert-line-btn.is-save :is(svg, .ri, i),
body.portal-shell .alert-line-btn.is-save :is(svg, .ri, i),
body.staff-body .btn.todo-save :is(svg, .ri, i),
body.portal-shell .btn.todo-save :is(svg, .ri, i),
body.staff-body .lead-submit :is(svg, .ri, i),
body.portal-shell .lead-submit :is(svg, .ri, i),
body.staff-body .lead-submit-admin :is(svg, .ri, i),
body.portal-shell .lead-submit-admin :is(svg, .ri, i) {
    color: inherit;
    stroke: currentColor;
}
body.staff-body button.dir-btn.lead-submit-admin,
body.portal-shell button.dir-btn.lead-submit-admin,
body.staff-body button.dir-btn.lead-submit,
body.portal-shell button.dir-btn.lead-submit {
    background: #fff;
    border: 1px solid #2f9e44;
    color: #2b8a3e;
}
body.staff-body button.dir-btn.lead-submit-admin:hover,
body.portal-shell button.dir-btn.lead-submit-admin:hover,
body.staff-body button.dir-btn.lead-submit:hover,
body.portal-shell button.dir-btn.lead-submit:hover {
    background: #f0fdf4;
    border-color: #2b8a3e;
    color: #2b8a3e;
}

.client-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 440px) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.client-toolbar .dir-toolbar-left { justify-content: flex-start; }
.client-toolbar .dir-toolbar-right { margin-left: 0; justify-content: flex-end; }
.client-search-slot { display: flex; justify-content: center; min-width: 0; }
.client-toolbar .client-search-slot .discover-block,
.client-toolbar .client-search-slot .dir-search {
    width: min(400px, 100%);
    max-width: 420px;
    min-width: min(280px, 100%);
    flex: 0 0 auto;
    height: 48px;
    margin: 0;
}
@media (max-width: 1100px) {
    .client-toolbar { grid-template-columns: 1fr; }
    .client-toolbar .dir-toolbar-right { justify-content: flex-start; }
}

th.dir-check input[type="checkbox"],
td.dir-check input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 14px !important;
    accent-color: #6d5efc;
}
th.dir-check, td.dir-check { width: 32px; }

.dir-icon.dir-icon-view,
.dir-icon.dir-icon-edit,
.dir-icon.dir-icon-delete,
.dir-icon.lead-view,
.dir-icon.lead-delete {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 36px;
    padding: 7px 12px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.dir-icon.dir-icon-view,
.dir-icon.lead-view { color: #206bc4; border-color: #206bc4; background: transparent; }
.dir-icon.dir-icon-edit { color: #f76707; border-color: #f76707; background: transparent; }
.dir-icon.dir-icon-delete,
.dir-icon.lead-delete { color: #d63939; border-color: #d63939; background: transparent; }
.dir-icon.dir-icon-view:hover,
.dir-icon.lead-view:hover { color: #fff; background: #206bc4; border-color: #206bc4; }
.dir-icon.dir-icon-edit:hover { color: #fff; background: #f76707; border-color: #f76707; }
.dir-icon.dir-icon-delete:hover,
.dir-icon.lead-delete:hover { color: #fff; background: #d63939; border-color: #d63939; }
.dir-icon.dir-icon-view svg,
.dir-icon.dir-icon-edit svg,
.dir-icon.dir-icon-delete svg,
.dir-icon.lead-view svg,
.dir-icon.lead-delete svg { color: inherit; stroke: currentColor; width: 16px; height: 16px; }
.hist-action { color: #2563eb; border-color: transparent; background: transparent; }
.hist-action:hover { color: #1d4ed8; background: #eff6ff; }
.hist-action svg { color: inherit; stroke: currentColor; }

:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-view,
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-edit,
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-delete {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-view {
    color: #206bc4;
    border-color: #206bc4;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-edit {
    color: #f76707;
    border-color: #f76707;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-delete {
    color: #d63939;
    border-color: #d63939;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-view:hover {
    color: #fff;
    background: #206bc4;
    border-color: #206bc4;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-edit:hover {
    color: #fff;
    background: #f76707;
    border-color: #f76707;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .btn-outline.act-delete:hover {
    color: #fff;
    background: #d63939;
    border-color: #d63939;
}
.app-row-actions .act-view svg,
.app-row-actions .act-edit svg,
.app-row-actions .act-delete svg,
.app-row-actions .dir-icon svg {
    color: inherit;
    stroke: currentColor;
    width: 16px;
    height: 16px;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .dir-icon.dir-icon-view {
    color: #206bc4;
    border-color: #206bc4;
    background: transparent;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .dir-icon.dir-icon-edit {
    color: #f76707;
    border-color: #f76707;
    background: transparent;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .dir-icon.dir-icon-delete {
    color: #d63939;
    border-color: #d63939;
    background: transparent;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .dir-icon.dir-icon-view:hover {
    color: #fff;
    background: #206bc4;
    border-color: #206bc4;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .dir-icon.dir-icon-edit:hover {
    color: #fff;
    background: #f76707;
    border-color: #f76707;
}
:is(body.staff-body, body.portal-shell) .app-row-actions .dir-icon.dir-icon-delete:hover {
    color: #fff;
    background: #d63939;
    border-color: #d63939;
}

.engage-head { align-items: center; }
.engage-head-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.engage-head-main h2 { margin: 0; white-space: nowrap; }
.engage-head .discover-block,
.engage-head .dir-search { flex: 0 0 auto; width: min(400px, 100%); max-width: 420px; min-width: min(280px, 100%); height: 48px; margin: 0; }
table.data.dir-table.engage-table td { vertical-align: middle; }
table.data.dir-table.engage-table th:last-child,
table.data.dir-table.engage-table td:last-child { text-align: left; width: 1%; white-space: nowrap; }
.engage-none { color: #94a3b8; font-size: 13px; white-space: nowrap; }
.engage-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.engage-docs a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3b5bdb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.engage-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.engage-status.is-ok { background: #e7f6ec; color: #2b8a3e; }
.engage-status.is-pending { background: #fff4e6; color: #d9480f; }
.engage-status.is-fail { background: #fff0f0; color: #d63939; }
#engage-upload-modal .hero-modal-card { width: min(520px, 100%); }
#engage-upload-modal .dropzone { min-height: 180px; }
#engage-upload-modal .engage-title { width: 100%; }
.dir-crumb a { color: inherit; text-decoration: none; }
.dir-crumb a:hover { color: #3b5bdb; }
html.theme-dark .engage-none { color: #94a3b8; }
html.theme-dark .engage-docs a { background: #241f38; color: #c4b5fd; }
html.theme-dark .engage-status.is-ok { background: #163226; color: #8ce99a; }
html.theme-dark .engage-status.is-pending { background: #3a2a16; color: #ffc078; }
html.theme-dark .engage-status.is-fail { background: #3a1d24; color: #ffa8a8; }

.crm-kpi.stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.crm-kpi .stat-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(56, 65, 74, .06);
    padding: 16px 18px 14px;
}
.crm-kpi .stat-kicker {
    margin: 0 0 16px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.crm-kpi .stat-main { align-items: center; }
.crm-kpi .stat-figure { gap: 8px; }
.crm-kpi .stat-glyph,
.crm-kpi .stat-card.tone-primary .stat-glyph,
.crm-kpi .stat-card.tone-success .stat-glyph,
.crm-kpi .stat-card.tone-info .stat-glyph,
.crm-kpi .stat-card.tone-warning .stat-glyph {
    color: #8b95a7;
}
.crm-kpi .stat-glyph svg { width: 18px; height: 18px; }
.crm-kpi .stat-card strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #343a46;
}
.crm-kpi .stat-chart {
    width: 118px;
    height: 52px;
    flex: 0 0 118px;
}
.crm-kpi .stat-chart:has(.mini-radial) {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
}
.crm-kpi .mini-radial { width: 58px; height: 58px; }
.crm-kpi .stat-foot {
    margin-top: 16px;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
}
.crm-kpi .stat-pct.up,
.crm-kpi .stat-move b.up { color: #2f9e44; }
.crm-kpi .stat-pct.down,
.crm-kpi .stat-move b.down { color: #e03131; }
.crm-kpi .stat-move { color: #868e96; font-weight: 600; }
html.theme-dark .crm-kpi .stat-card {
    background: #211e2c;
    border-color: #3a3450;
}
html.theme-dark .crm-kpi .stat-card strong { color: #f8fafc; }
html.theme-dark .crm-kpi .stat-kicker,
html.theme-dark .crm-kpi .stat-glyph { color: #94a3b8; }
html.theme-dark .crm-kpi .stat-move { color: #94a3b8; }
@media (max-width: 1199px) {
    .crm-kpi.stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .crm-kpi.stat-row { grid-template-columns: minmax(0, 1fr); }
}

.tblr-home {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tblr-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tblr-pretitle {
    color: #667382;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tblr-pagehead h1 {
    margin: 2px 0 0;
    color: #1e293b;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
}
.tblr-pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tblr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #e6e7e9;
    background: #fff;
    color: #1e293b;
    font: inherit;
    font-weight: 600;
    border-radius: 8px !important;
    cursor: pointer;
}
.tblr-btn-ghost { background: #fff; }
.tblr-btn-primary {
    background: #066fd1;
    border-color: #066fd1;
    color: #fff;
}
.tblr-btn-primary:hover { filter: brightness(.96); }
.tblr-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}
.tblr-col-3 { grid-column: span 3; min-width: 0; }
.tblr-col-6 { grid-column: span 6; min-width: 0; }
.tblr-stack { display: grid; gap: 16px; }
.tblr-card {
    background: #fff;
    border: 1px solid #e6e7e9;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
    min-width: 0;
}
.tblr-card-body { padding: 16px 18px; }
.tblr-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.tblr-kicker {
    color: #667382;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tblr-h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #1e293b;
    line-height: 1.1;
}
.tblr-pad { margin: 10px 0 12px; }
.tblr-muted { margin: 8px 0 0; color: #667382; font-size: 13px; }
.tblr-statline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}
.tblr-statline-wide { justify-content: space-between; margin: 0 0 8px; color: #1e293b; }
.tblr-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tblr-chip {
    color: #667382;
    font-size: 12px;
    font-weight: 600;
}
.tblr-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.tblr-trend.is-up { color: #2fb344; }
.tblr-trend.is-down { color: #d63939; }
.tblr-trend.is-flat { color: #667382; }
.tblr-progress {
    height: 6px;
    margin-top: 8px;
    background: #e6e7e9;
    border-radius: 99px !important;
    overflow: hidden;
}
.tblr-progress span { display: block; height: 100%; border-radius: 99px !important; }
.tblr-progress .is-primary { background: #066fd1; }
.tblr-progress .is-success { background: #2fb344; }
.tblr-progress .is-danger { background: #d63939; }
.tblr-progress .is-info { background: #4299e1; }
.tblr-progress-split { display: flex; height: 8px; margin: 10px 0 12px; }
.tblr-progress-split span { height: 100%; }
.tblr-spark { height: 56px; }
.tblr-spark-in { margin-top: 10px; height: 48px; }
.tblr-spark .mini-chart { width: 100%; height: 100%; }
.tblr-ring-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.tblr-ring-wrap .mini-radial { width: 120px; height: 120px; }
.tblr-ring-label { text-align: center; }
.tblr-ring-label small { display: block; color: #667382; font-size: 11px; text-transform: uppercase; }
.tblr-ring-label b { font-size: 22px; color: #1e293b; }
.tblr-welcome { background: linear-gradient(180deg, #eef6ff 0%, #fff 58%); }
.tblr-welcome .tblr-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 12px;
    align-items: center;
    min-height: 210px;
}
.tblr-welcome-copy h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}
.tblr-welcome-copy p { margin: 0 0 18px; color: #667382; }
.tblr-welcome-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: auto;
}
.tblr-welcome-art svg { width: 100%; height: auto; display: block; }
.tblr-stat-sm-body {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tblr-stat-sm strong { display: block; color: #1e293b; font-size: 15px; }
.tblr-stat-sm small { color: #667382; }
.tblr-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px !important;
    color: #fff;
    flex: none;
}
.tblr-icon.is-primary { background: #066fd1; }
.tblr-icon.is-green { background: #2fb344; }
.tblr-icon.is-dark { background: #1e293b; }
.tblr-icon.is-blue { background: #1877f2; }
.tblr-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    background: #f1f5f9;
    border-radius: 8px !important;
}
.tblr-seg button {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #667382;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px !important;
    cursor: pointer;
}
.tblr-seg button.is-active { background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.tblr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    color: #667382;
    font-size: 12px;
}
.tblr-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tblr-legend i {
    width: 10px;
    height: 10px;
    border-radius: 99px !important;
    display: inline-block;
}
.tblr-legend .is-primary { background: #066fd1; }
.tblr-legend .is-info { background: #4299e1; }
.tblr-legend .is-success { background: #2fb344; }
.tblr-legend b { color: #1e293b; }
.tblr-storage-line { margin: 0 0 8px; color: #1e293b; }
.tblr-feed { max-height: 28rem; overflow: auto; }
.tblr-feed-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid #eef1f4;
}
.tblr-feed-item:first-child { border-top: 0; padding-top: 0; }
.tblr-feed-item strong { display: block; color: #1e293b; font-size: 13px; }
.tblr-feed-item small { color: #667382; font-size: 12px; }
.tblr-dev-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}
.tblr-dev-head .mini-radial { width: 54px; height: 54px; }
.tblr-table-wrap { overflow: auto; }
.tblr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tblr-table th,
.tblr-table td {
    padding: 10px 16px;
    border-top: 1px solid #eef1f4;
    text-align: left;
    vertical-align: middle;
}
.tblr-table th {
    color: #667382;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f8fafc;
}
.tblr-nowrap { white-space: nowrap; color: #667382; }
.tblr-home .panel {
    border-radius: 8px !important;
    overflow: hidden;
}
.tblr-home .sales-svg { display: block; width: 100%; height: 180px; }
@media (max-width: 1199px) {
    .tblr-col-3 { grid-column: span 6; }
    .tblr-welcome .tblr-card-body { grid-template-columns: 1fr; }
    .tblr-welcome-art { max-width: 200px; }
}
@media (max-width: 767px) {
    .tblr-col-6,
    .tblr-col-3 { grid-column: span 12; }
    .tblr-welcome-stats { grid-template-columns: 1fr; }
}
html.theme-dark .tblr-pagehead h1,
html.theme-dark .tblr-card h3,
html.theme-dark .tblr-h1,
html.theme-dark .tblr-welcome-copy h2,
html.theme-dark .tblr-stat-sm strong,
html.theme-dark .tblr-feed-item strong,
html.theme-dark .tblr-legend b,
html.theme-dark .tblr-storage-line,
html.theme-dark .tblr-ring-label b { color: #f8fafc; }
html.theme-dark .tblr-card,
html.theme-dark .tblr-home .panel,
html.theme-dark .tblr-btn { background: #211e2c; border-color: #3a3450; color: #e2e8f0; }
html.theme-dark .tblr-welcome { background: linear-gradient(180deg, #1a2740 0%, #211e2c 62%); }
html.theme-dark .tblr-seg { background: #2a2638; }
html.theme-dark .tblr-seg button.is-active { background: #3a3450; color: #f8fafc; }
html.theme-dark .tblr-table th { background: #2a2638; }
html.theme-dark .tblr-table th,
html.theme-dark .tblr-table td { border-color: #3a3450; }
html.theme-dark .tblr-progress,
html.theme-dark .tblr-btn-ghost { background: #2a2638; border-color: #3a3450; }

/* Material-style tables (Recent Assignments look) — all boards */
.panel.fit-table,
.dir-board,
.md-board {
    background: #fff;
    border: 1px solid #e6ebf2;
    box-shadow: 0 1px 2px rgba(27, 70, 137, .04), 0 10px 28px rgba(27, 70, 137, .06);
    overflow: hidden;
}
.panel.fit-table {
    border-radius: 0;
}
.panel.fit-table > .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px 12px;
    border-bottom: 0;
    background: transparent;
}
.panel.fit-table > .panel-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.panel.fit-table > .panel-head .muted { font-weight: 500; }
.panel.fit-table table.data,
table.data.dir-table {
    width: 100%;
    border-collapse: collapse;
}
.panel.fit-table table.data th,
.panel.fit-table table.data td,
table.data.dir-table th,
table.data.dir-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e8edf3;
    border-top: 0;
    font-size: 13px;
    color: #1f2937;
}
.panel.fit-table table.data thead th,
table.data.dir-table thead th {
    background: #e8ebef !important;
    color: #111827 !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid #d5dbe3;
    white-space: nowrap;
}
.panel.fit-table table.data tbody tr:hover td,
table.data.dir-table tbody tr:hover td {
    background: #fafbfd;
}
.panel.fit-table .table-foot {
    justify-content: flex-end;
    border-top: 0;
}
.panel.fit-table .person,
.md-table .person,
table.data .person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.panel.fit-table .person .table-avatar,
.panel.fit-table .person .initial,
.md-table .person .table-avatar,
.md-table .person .initial,
table.data .person .table-avatar,
table.data .person .initial {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 34px;
}
.panel.fit-table .person .initial,
.md-table .person .initial,
table.data .person .initial {
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #1b4689;
}

/* Compact action buttons (View / Edit / Delete) */
.app-row-actions .dir-icon,
.md-doc-actions .dir-icon,
.dir-actions .dir-icon {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: .02em;
    text-transform: uppercase !important;
    white-space: nowrap;
}
.app-row-actions .dir-icon svg,
.md-doc-actions .dir-icon svg,
.dir-actions .dir-icon svg {
    width: 13px !important;
    height: 13px !important;
    color: inherit;
    stroke: currentColor;
}
.app-row-actions .dir-icon-view,
.md-doc-actions .dir-icon-view,
.dir-actions .dir-icon-view { color: #206bc4 !important; border-color: #206bc4 !important; background: transparent !important; }
.app-row-actions .dir-icon-edit,
.md-doc-actions .dir-icon-edit,
.dir-actions .dir-icon-edit { color: #f76707 !important; border-color: #f76707 !important; background: transparent !important; }
.app-row-actions .dir-icon-delete,
.md-doc-actions .dir-icon-delete,
.dir-actions .dir-icon-delete { color: #d63939 !important; border-color: #d63939 !important; background: transparent !important; }
.app-row-actions .dir-icon-view:hover,
.md-doc-actions .dir-icon-view:hover,
.dir-actions .dir-icon-view:hover { color: #fff !important; background: #206bc4 !important; border-color: #206bc4 !important; }
.app-row-actions .dir-icon-edit:hover,
.md-doc-actions .dir-icon-edit:hover,
.dir-actions .dir-icon-edit:hover { color: #fff !important; background: #f76707 !important; border-color: #f76707 !important; }
.app-row-actions .dir-icon-delete:hover,
.md-doc-actions .dir-icon-delete:hover,
.dir-actions .dir-icon-delete:hover { color: #fff !important; background: #d63939 !important; border-color: #d63939 !important; }
.app-row-actions .dir-icon[aria-disabled="true"],
.md-doc-actions .dir-icon[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

.md-board {
    background: #fff;
    border: 1px solid #e6ebf2;
    box-shadow: 0 1px 2px rgba(27, 70, 137, .04), 0 10px 28px rgba(27, 70, 137, .06);
    overflow: hidden;
}
.md-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px 12px;
}
.md-board-head.md-board-head-search {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(280px, 400px) minmax(120px, 1fr);
    align-items: center;
    gap: 14px;
}
.md-board-head.md-board-head-search h2 {
    justify-self: start;
}
.md-board-head.md-board-head-search .md-center-search {
    justify-self: center;
    width: min(400px, 100%);
    max-width: 420px;
    margin: 0 auto;
    border: 1px solid #d8dce6;
}
.md-board-head.md-board-head-search .md-board-actions {
    justify-self: end;
    margin-left: 0;
}
.md-board-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}
.md-board-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .md-board-head.md-board-head-search {
        grid-template-columns: 1fr;
    }
    .md-board-head.md-board-head-search .md-center-search,
    .md-board-head.md-board-head-search .md-board-actions {
        justify-self: stretch;
        width: 100%;
        max-width: none;
    }
}
.md-btn-primary,
.md-btn-ghost,
.md-upload .md-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    background: #123a6f;
    color: #fff;
    font: 700 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.md-btn-primary:hover { background: #0f2f5a; color: #fff; }
.md-btn-ghost {
    background: #fff;
    color: #123a6f;
    border: 1px solid #c9d6e8;
}
.md-btn-ghost:hover { background: #f3f7fc; color: #123a6f; }
.md-table-wrap { overflow-x: auto; }
.md-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}
.md-table th,
.md-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e8edf3;
    font-size: 13px;
    color: #1f2937;
}
.md-table thead th {
    background: #e8ebef;
    color: #111827;
    font-weight: 700;
    border-bottom: 1px solid #d5dbe3;
    white-space: nowrap;
}
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table tbody tr:hover td { background: #fafbfd; }
.md-doc-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.md-doc-link,
table.data a.md-doc-link,
.md-table a.md-doc-link,
.client-workspace-table a.md-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #123a6f;
    text-decoration: none;
    font-weight: 500;
}
.md-doc-link .ri,
table.data a.md-doc-link .ri,
.md-table a.md-doc-link .ri {
    color: #123a6f;
    flex-shrink: 0;
}
.md-doc-link .md-file-type-icon,
table.data a.md-doc-link .md-file-type-icon,
.md-table a.md-doc-link .md-file-type-icon,
.client-workspace-table .md-file-type-icon {
    width: 22px;
    height: 29px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
/* Document title: same underlined blue text as Recent Queries */
.md-doc-link > .table-name-link,
.md-doc-link > span.table-name-link,
.client-workspace-table a.md-doc-link > .table-name-link,
table.data a.md-doc-link > .table-name-link,
.md-table a.md-doc-link > .table-name-link {
    display: inline;
    color: #123a6f !important;
    font: 500 13px/1.45 var(--font);
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-color: #123a6f !important;
    text-underline-offset: 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.md-doc-link:hover > .table-name-link,
.client-workspace-table a.md-doc-link:hover > .table-name-link {
    color: #0c2749 !important;
    text-decoration-color: #0c2749 !important;
}
.md-doc-link:hover,
table.data a.md-doc-link:hover,
.md-table a.md-doc-link:hover {
    color: #0c2749;
}
.md-doc-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.md-table .person-copy,
table.data .person-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.md-table .person-copy strong,
table.data .person-copy strong {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}
.md-table .person-copy small,
table.data .person-copy small {
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.md-board-foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px 14px;
}
.md-show-more {
    border: 0;
    background: none;
    padding: 0;
    color: #1b4f9c;
    font: 700 12px/1.4 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
}
.md-show-more:hover { color: #123a6f; }
.md-show-more[hidden] { display: none !important; }
.md-upload {
    padding: 4px 18px 18px;
}
.md-upload label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #334155;
}
.md-upload input[type="text"],
.md-upload input[type="file"] {
    width: 100%;
    max-width: 420px;
}
@media (max-width: 767px) {
    .md-table { min-width: 0 !important; width: 100% !important; max-width: 100%; }
    .md-table thead { display: none; }
    .md-table,
    .md-table tbody,
    .md-table tr,
    .md-table td { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
    .md-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid #e8edf3;
        overflow: hidden;
    }
    .md-table td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        padding: 6px 0;
        border: 0;
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .md-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        min-width: 0;
        max-width: 100%;
        flex: 0 0 auto;
    }
    .md-table td > * {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-align: left;
    }
    .md-table td a {
        display: inline-block;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .md-table td[data-label=""],
    .md-table td:has(.app-row-actions),
    .md-table td:has(.dir-icon),
    .md-table td:has(.btn),
    .md-table td:has(.btn-outline) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 8px;
        overflow: visible;
    }
    .md-table td[data-label=""]::before,
    .md-table td:has(.app-row-actions)::before,
    .md-table td:has(.dir-icon)::before,
    .md-table td:has(.btn)::before,
    .md-table td:has(.btn-outline)::before {
        flex: 0 0 100%;
        width: 100%;
        text-align: left;
    }
}
html.theme-dark .md-board {
    background: #211e2c;
    border-color: #3a3450;
}
html.theme-dark .md-board-head h2,
html.theme-dark .md-table td { color: #e2e8f0; }
html.theme-dark .md-table thead th {
    background: #2a2638;
    color: #f8fafc;
    border-color: #3a3450;
}
html.theme-dark .md-table th,
html.theme-dark .md-table td { border-color: #3a3450; }
html.theme-dark .md-table tbody tr:hover td { background: #2a2638; }
html.theme-dark .md-btn-ghost {
    background: #211e2c;
    border-color: #3a3450;
    color: #93c5fd;
}

/* Coming Soon hero (unfinished pages) */
.coming-soon {
    --coming-soon-image: none;
    position: relative;
    isolation: isolate;
    min-height: min(72vh, 640px);
    margin: 0 0 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(28, 37, 54, .18);
    background:
        linear-gradient(180deg, rgba(16, 24, 40, .28), rgba(16, 24, 40, .42)),
        var(--coming-soon-image) center / cover no-repeat;
    box-shadow: var(--shadow);
}
.coming-soon-compact {
    min-height: 220px;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: #fff;
}
.coming-soon-compact .coming-soon-card {
    width: min(100%, calc(100% - 24px));
    margin: 16px 12px;
    padding: 22px 18px;
    color: #1e293b;
    background: #fff;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.coming-soon-compact .coming-soon-brand {
    color: #64748b;
}
.coming-soon-compact .coming-soon-note {
    font-size: 16px;
    color: #ca8a04;
}
.coming-soon-compact .coming-soon-title {
    font-size: clamp(22px, 4vw, 32px);
    color: #0f172a;
    text-shadow: none;
}
.card > .coming-soon,
.card > .coming-soon-compact {
    border-radius: 0;
    background: #fff;
}
.coming-soon-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(12, 18, 32, .18), rgba(12, 18, 32, .55) 70%),
        linear-gradient(180deg, rgba(12, 18, 32, .2), rgba(12, 18, 32, .45));
    pointer-events: none;
}
.coming-soon-card {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100% - 36px));
    margin: 28px 18px;
    padding: clamp(28px, 5vw, 48px) clamp(22px, 4vw, 40px);
    text-align: center;
    color: #fff;
    background: rgba(22, 28, 40, .72);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(2px);
    box-shadow: 0 18px 48px rgba(8, 12, 24, .35);
    animation: comingSoonIn .7s ease both;
}
.coming-soon-brand {
    margin: 0 0 14px;
    font: 600 13px/1.45 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
.coming-soon-lead {
    margin: 0 auto 18px;
    max-width: 38rem;
    font: 400 15px/1.65 ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    color: rgba(255, 255, 255, .92);
}
.coming-soon-note {
    margin: 0 0 8px;
    font: italic 700 22px/1.2 "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
    color: #d4e157;
    letter-spacing: .02em;
}
.coming-soon-title {
    margin: 0;
    font: 800 clamp(34px, 7vw, 56px)/1.05 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
@keyframes comingSoonIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .coming-soon-card { animation: none; }
}
html.theme-dark .coming-soon {
    border-color: #3a3450;
}
html.theme-dark .coming-soon-card {
    background: rgba(18, 16, 28, .78);
}

/* Material underline fields (leads, tasks, allocate) */
.hero-modal-card.mat-lead-form {
    width: min(760px, 96vw);
    max-width: 760px;
}
.mat-lead-body {
    display: grid;
    gap: 18px;
    padding: 18px 22px 20px;
}
.mat-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    margin-top: 4px;
}
.mat-field {
    display: grid;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    color: #64748b;
}
.mat-field > span {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.2;
}
.mat-field > span i,
.mat-message-field > span i {
    color: #dc2626;
    font-style: normal;
    margin-left: 2px;
}
.mat-field input:not(.word-topbar-search):not([data-word-search]),
.mat-field select:not(.word-font-select):not(.word-size-select):not(.word-line-select) {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 6px 12px 8px;
    border: 0;
    border-bottom: 1px solid #c5cad3;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.mat-field select:not(.word-font-select):not(.word-size-select):not(.word-line-select) {
    padding: 6px 28px 8px 12px;
    text-indent: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.mat-field select option,
.mat-field select optgroup {
    padding: 10px 14px;
    margin: 0;
}
.mat-field input:not(.word-topbar-search):not([data-word-search]):focus,
.mat-field select:not(.word-font-select):not(.word-size-select):not(.word-line-select):focus {
    border-bottom-width: 2px;
    border-bottom-color: #123a6f;
    padding-bottom: 7px;
}
.mat-field-wide { grid-column: 1 / -1; }
.mat-lead-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 4px;
}
.mat-create-btn {
    min-height: 36px;
    min-width: 108px;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;
    background: #e5e7eb;
    color: #374151;
    font: 700 13px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.mat-create-btn:hover {
    background: #123a6f;
    color: #fff;
}
.mat-message-field {
    display: grid;
    gap: 8px;
}
.mat-message-field > span {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}
.mat-message-field .word-editor {
    width: 100%;
    border: 1px solid #c8c8c8;
    border-radius: 0;
    box-shadow: none;
    background: #e6e6e6;
}
.mat-message-field .word-editor-save { display: none; }
.mat-message-field .word-editor-canvas {
    min-height: 180px;
    padding: 28px 32px;
    background: #ffffff !important;
}
.mat-message-view {
    padding: 18px 22px 22px;
    color: #334155;
    line-height: 1.55;
}

/* Wide multi-step Create Client wizard */
#client-create-modal .hero-modal-card.mat-client-wizard {
    width: min(1180px, calc(100vw - 40px));
    max-width: 1180px;
    padding: 0;
    overflow-x: hidden;
}
#client-create-modal .mat-field {
    font-weight: 500;
    color: #64748b;
    gap: 6px;
}
#client-create-modal .mat-field input[type="text"],
#client-create-modal .mat-field input[type="email"],
#client-create-modal .mat-field input[type="password"],
#client-create-modal .mat-field input[type="date"],
#client-create-modal .mat-field input[type="tel"],
#client-create-modal .mat-field select,
.mat-client-wizard .mat-field input[type="password"] {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 4px 8px;
    border: 0 !important;
    border-bottom: 1px solid #c5cad3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
#client-create-modal .mat-field select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}
#client-create-modal .mat-field input:focus,
#client-create-modal .mat-field select:focus,
.mat-client-wizard .mat-field input[type="password"]:focus {
    border-bottom-width: 2px !important;
    border-bottom-color: #123a6f !important;
    padding-bottom: 7px;
}
#client-create-modal .client-password-hint,
.client-password-hint {
    margin: 0;
    padding-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}
.mat-wizard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 28px 12px;
    border-bottom: 1px solid #eef1f5;
}
.mat-wizard-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.mat-wizard-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0 8px;
    cursor: pointer;
    color: #94a3b8;
}
.mat-wizard-step::before {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    height: 2px;
    background: #dbe3ee;
}
.mat-wizard-step:first-child::before { display: none; }
.mat-wizard-step span {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8eef5;
    color: #64748b;
    font: 700 13px/1 var(--font);
}
.mat-wizard-step em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.mat-wizard-step.is-active { color: #123a6f; }
.mat-wizard-step.is-active span,
.mat-wizard-step.is-done span {
    background: #123a6f;
    color: #fff;
}
.mat-wizard-step.is-done::before,
.mat-wizard-step.is-active::before { background: #123a6f; }
.mat-wizard-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mat-wizard-next,
.mat-wizard-create {
    min-height: 36px;
    min-width: 96px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: #123a6f;
    color: #fff;
    font: 700 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.mat-wizard-next:hover,
.mat-wizard-create:hover { background: #0c2749; }
.mat-wizard-body { padding: 28px 36px 16px; }
.mat-field-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 40px;
}
.mat-wizard-pane[hidden] { display: none !important; }
.mat-wizard-foot {
    display: flex;
    justify-content: flex-start;
    padding: 8px 28px 20px;
}
.mat-wizard-back {
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #c9d6e8;
    border-radius: 4px;
    background: #fff;
    color: #123a6f;
    font: 700 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.mat-wizard-back:hover { background: #f3f7fc; }

/* Edit client — same look as create wizard, all sections on one page */
#client-edit-modal .hero-modal-card.mat-client-edit-page {
    width: min(1180px, calc(100vw - 40px));
    max-width: 1180px;
    max-height: min(92vh, 920px);
    padding: 0;
    overflow: auto;
}
#client-edit-modal .mat-edit-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}
#client-edit-modal .mat-edit-head strong {
    font: 700 18px/1.2 var(--font);
    color: #0f172a;
}
#client-edit-modal .mat-edit-body {
    display: grid;
    gap: 28px;
    padding: 22px 36px 8px;
}
#client-edit-modal .mat-edit-section {
    display: grid;
    gap: 16px;
}
#client-edit-modal .mat-edit-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #123a6f;
}
#client-edit-modal .mat-edit-section-label span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #123a6f;
    color: #fff;
    font: 700 13px/1 var(--font);
}
#client-edit-modal .mat-edit-section-label em {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
}
#client-edit-modal .mat-field {
    font-weight: 500;
    color: #64748b;
    gap: 6px;
}
#client-edit-modal .mat-field input[type="text"],
#client-edit-modal .mat-field input[type="email"],
#client-edit-modal .mat-field input[type="password"],
#client-edit-modal .mat-field input[type="date"],
#client-edit-modal .mat-field input[type="tel"],
#client-edit-modal .mat-field select {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 6px 4px 8px;
    border: 0 !important;
    border-bottom: 1px solid #c5cad3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font: 500 14px/1.4 var(--font);
    color: #0f172a;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
#client-edit-modal .mat-field select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}
#client-edit-modal .mat-field input:focus,
#client-edit-modal .mat-field select:focus {
    border-bottom-width: 2px !important;
    border-bottom-color: #123a6f !important;
    padding-bottom: 7px;
}
#client-edit-modal .client-password-hint {
    margin: 0;
    padding-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}
#client-edit-modal .mat-edit-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 36px 24px;
    border-top: 1px solid #eef1f5;
    position: sticky;
    bottom: 0;
    background: #fff;
}
#client-edit-modal .mat-edit-foot .mat-wizard-back {
    border-color: #fecaca;
    color: #dc2626;
}
#client-edit-modal .mat-edit-foot .mat-wizard-back:hover {
    background: #fef2f2;
}
@media (max-width: 900px) {
    #client-edit-modal .mat-edit-body { padding: 18px 18px 8px; }
    #client-edit-modal .mat-edit-foot { padding: 12px 18px 20px; }
}

@media (max-width: 900px) {
    .mat-field-grid-3 { grid-template-columns: 1fr 1fr; }
    .mat-wizard-step em { font-size: 11px; }
}
@media (max-width: 640px) {
    .mat-field-grid-3 { grid-template-columns: 1fr; }
    .mat-wizard-steps { width: 100%; }
}

/* Tasks board — Material assignment list */
.mat-task-board {
    border: 0;
    box-shadow: none;
    background: #fff;
}
.mat-task-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 8px 18px;
    flex-wrap: wrap;
}
.mat-task-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 18px 28px;
    flex: 1;
    min-width: 0;
}
.mat-task-fabs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-bottom: 2px;
}
.mat-fab {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #123a6f;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(18, 58, 111, .28);
    text-decoration: none;
    flex-shrink: 0;
}
a.mat-fab { color: #fff; }
.mat-fab:hover { background: #0c2749; color: #fff; }
.mat-fab svg { stroke: #fff; }
.mat-task-table td {
    color: #1f2937;
    font-weight: 400;
    vertical-align: middle;
}
.mat-task-table thead th {
    background: #f1f3f6;
    color: #475569;
    font-weight: 700;
}
.mat-more {
    position: relative;
    display: inline-flex;
}
.mat-more-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}
.mat-more-btn svg { stroke: #fff; fill: #fff; }
.mat-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 148px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    display: grid;
    gap: 2px;
}
.mat-more-menu a,
.mat-more-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: transparent;
    color: #334155;
    font: 600 13px/1.3 var(--font);
    text-align: left;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.mat-more-menu a:hover,
.mat-more-menu button:hover { background: #f1f5f9; }
.mat-more-menu form { margin: 0; }
.mat-task-foot {
    justify-content: flex-end;
    gap: 16px;
}
@media (max-width: 900px) {
    .mat-task-filters { grid-template-columns: 1fr; width: 100%; }
    .mat-task-toolbar { align-items: stretch; }
}
@media (max-width: 640px) {
    .mat-field-grid { grid-template-columns: 1fr; gap: 16px; }
}
html.theme-dark .mat-field > span,
html.theme-dark .mat-message-field > span { color: #94a3b8; }
html.theme-dark .mat-field input,
html.theme-dark .mat-field select {
    color: #e2e8f0;
    border-bottom-color: #475569;
}
html.theme-dark .mat-field input:focus,
html.theme-dark .mat-field select:focus {
    border-bottom-color: #93c5fd;
}
html.theme-dark .mat-create-btn {
    background: #334155;
    color: #e2e8f0;
}
html.theme-dark .mat-more-menu {
    background: #211e2c;
    border-color: #342f45;
}
html.theme-dark .mat-more-menu a,
html.theme-dark .mat-more-menu button { color: #e2e8f0; }

/* Account settings (Tabler-style shell + portal typography) */
.acct-settings {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.acct-settings-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #0f172a;
}
.acct-settings-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}
.acct-shell {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-height: 520px;
}
.acct-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    background: #fff;
    border: 1px solid #e6ebf2;
    box-shadow: 0 1px 2px rgba(27, 70, 137, .04);
}
.acct-nav-group {
    margin: 14px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.acct-nav-group:first-child { margin-top: 2px; }
.acct-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
}
.acct-nav-item:hover { background: #f8fafc; color: #0f172a; }
.acct-nav-item.is-active {
    background: #eef3f9;
    border-left-color: #003366;
    color: #003366;
}
.acct-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}
.acct-panel[hidden] { display: none !important; }
.acct-panel.is-active,
.acct-panel { display: grid; gap: 16px; }
.acct-md-stack { display: grid; gap: 16px; margin: 0; min-width: 0; }
.acct-md-board { margin: 0; min-width: 0; overflow: hidden; }
.acct-md-board .table-wrap {
    overflow: visible !important;
    max-width: 100%;
}
.acct-md-board .md-btn-primary {
    background: #003366;
}
.acct-md-board .md-btn-primary:hover { background: #00264d; color: #fff; }
.acct-md-table,
.acct-settings table.md-table,
.acct-settings .md-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}
.acct-md-table th,
.acct-md-table td {
    vertical-align: top;
}
.acct-md-table th:first-child,
.acct-md-table td:first-child {
    width: 180px;
    max-width: 180px;
    white-space: normal;
    font-weight: 600;
    color: #1f2937;
    vertical-align: top;
    padding-top: 18px;
}
.acct-md-table tr.acct-md-photo-row td:first-child {
    width: 170px;
    max-width: 170px;
}
.acct-md-table th:last-child,
.acct-md-table td:last-child {
    width: auto;
    min-width: 0;
    vertical-align: top;
}
.acct-md-table thead th {
    vertical-align: middle;
    padding-top: 14px;
}
.acct-md-table td .md-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1.3;
}
.acct-md-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d8dce6;
    background: #fff;
    color: #1f2937;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}
.acct-md-input:focus {
    outline: 0;
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, .12);
}
.acct-md-input[readonly] {
    background: #f8fafc;
    color: #64748b;
}
.acct-md-photo-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.acct-md-photo-item .acct-avatar {
    width: 132px;
    height: 132px;
}
.acct-md-photo-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.acct-md-photo-copy .dropzone {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    padding: 14px 12px;
    gap: 6px;
}
.acct-md-photo-copy .dropzone strong { font-size: 13px; }
.acct-md-photo-copy .dropzone-icon svg { width: 36px; height: 40px; }
.acct-md-foot-note {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    margin-right: auto;
}
.acct-md-board .md-board-foot {
    justify-content: flex-start;
}
.acct-help {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
}
.acct-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    background: #e8eef8;
    border: 1px solid #dbe3ef;
    flex: 0 0 auto;
    display: block;
}
.acct-btn-primary,
.acct-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 0;
    font: 700 12px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}
.acct-btn-primary {
    border: 0;
    background: #003366;
    color: #fff;
}
.acct-btn-primary:hover { background: #00264d; color: #fff; }
.acct-btn-ghost {
    border: 1px solid #c9d6e8;
    background: #fff;
    color: #003366;
}
.acct-btn-ghost:hover { background: #f3f7fc; color: #003366; }
@media (max-width: 900px) {
    .acct-shell { grid-template-columns: 1fr; }
    .acct-nav {
        border-right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 12px;
    }
    .acct-nav-group {
        flex: 1 0 100%;
        margin: 8px 4px 2px;
    }
    .acct-nav-item {
        border-left-width: 0;
        border-bottom: 3px solid transparent;
        width: auto;
    }
    .acct-nav-item.is-active {
        border-left-color: transparent;
        border-bottom-color: #003366;
    }
}
@media (max-width: 640px) {
    .acct-md-photo-item .acct-avatar,
    .acct-avatar {
        width: 112px;
        height: 112px;
    }
    .acct-md-table th:first-child,
    .acct-md-table td:first-child,
    .acct-md-table tr.acct-md-photo-row td:first-child {
        width: 120px;
        max-width: 120px;
    }
}
html.theme-dark .acct-settings-head h1 { color: #f1f5f9; }
html.theme-dark .acct-settings-head p,
html.theme-dark .acct-help,
html.theme-dark .acct-md-foot-note { color: #94a3b8; }
html.theme-dark .acct-nav { background: #1b1826; border-color: #342f45; }
html.theme-dark .acct-nav-item { color: #cbd5e1; }
html.theme-dark .acct-nav-item:hover { background: #2a2638; color: #f1f5f9; }
html.theme-dark .acct-nav-item.is-active {
    background: #243247;
    border-left-color: #93c5fd;
    color: #93c5fd;
}
html.theme-dark .acct-md-input {
    background: #16141f;
    border-color: #342f45;
    color: #e2e8f0;
}
html.theme-dark .acct-md-input[readonly] { background: #1b1826; color: #94a3b8; }

/* Cursor Agent — Fix errors (ICANN lookup-style) */
.ca-lookup {
    margin: 0 0 18px;
    padding: 22px 24px 28px;
    background: #fff;
    border: 1px solid #d9e2ec;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
}
.ca-lookup-title {
    margin: 0 0 10px;
    color: #005da9;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
}
.ca-lookup-links {
    margin: 0 0 14px;
    color: #555;
    font-size: 0.88rem;
    line-height: 1.45;
}
.ca-lookup-form { margin: 0; }
.ca-lookup-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 760px;
}
.ca-lookup-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #9aa5b1;
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: #222;
    font-size: 1rem;
    font-family: inherit;
}
.ca-lookup-input:focus {
    outline: 2px solid #005da9;
    outline-offset: -1px;
    z-index: 1;
}
.ca-lookup-btn {
    flex: 0 0 auto;
    min-width: 110px;
    height: 42px;
    padding: 0 22px;
    border: 1px solid #005da9;
    border-radius: 0;
    background: #005da9;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ca-lookup-btn:hover { background: #004b8a; border-color: #004b8a; }
.ca-lookup-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ca-lookup-legal {
    margin: 12px 0 0;
    max-width: 760px;
    color: #555;
    font-size: 0.8rem;
    line-height: 1.5;
}
.ca-lookup-section {
    margin-top: 28px;
    padding-top: 8px;
}
.ca-lookup-section h2 {
    margin: 0 0 12px;
    color: #333;
    font-size: 1.15rem;
    font-weight: 700;
}
.ca-lookup-empty {
    margin: 0;
    color: #555;
    font-size: 0.92rem;
}
.ca-lookup-table-wrap {
    overflow: auto;
    border: 1px solid #d9e2ec;
    background: #fff;
}
.ca-lookup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.ca-lookup-table th,
.ca-lookup-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e8eef4;
}
.ca-lookup-table thead th {
    background: #f5f8fb;
    color: #333;
    font-weight: 700;
    white-space: nowrap;
}
.ca-lookup-check { width: 36px; }
.ca-muted { color: #667085; }
.ca-nowrap { white-space: nowrap; }
.ca-msg {
    font-weight: 600;
    max-width: 42rem;
    word-break: break-word;
}
.ca-sev {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--ca-sev, #d92d20) 35%, #fff);
    background: color-mix(in srgb, var(--ca-sev, #d92d20) 12%, #fff);
    color: var(--ca-sev, #d92d20);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ca-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ca-status.is-open {
    color: #b54708;
    background: #fff7ed;
    border: 1px solid #fdba74;
}
.ca-status.is-done {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #86efac;
}
.ca-lookup-del-form { margin: 0; }
.ca-lookup-del {
    appearance: none;
    border: 1px solid #b42318;
    background: #fff;
    color: #b42318;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ca-lookup-del:hover {
    background: #b42318;
    color: #fff;
}
html.theme-dark .ca-lookup {
    background: #1b1826;
    border-color: #342f45;
    color: #e2e8f0;
}
html.theme-dark .ca-lookup-title { color: #93c5fd; }
html.theme-dark .ca-lookup-links,
html.theme-dark .ca-lookup-legal,
html.theme-dark .ca-lookup-empty,
html.theme-dark .ca-muted { color: #94a3b8; }
html.theme-dark .ca-lookup-section h2 { color: #f1f5f9; }
html.theme-dark .ca-lookup-input {
    background: #16141f;
    border-color: #475569;
    color: #e2e8f0;
}
html.theme-dark .ca-lookup-table-wrap { border-color: #342f45; }
html.theme-dark .ca-lookup-table th,
html.theme-dark .ca-lookup-table td { border-bottom-color: #342f45; }
html.theme-dark .ca-lookup-table thead th {
    background: #16141f;
    color: #cbd5e1;
}
html.theme-dark .ca-lookup-del {
    background: transparent;
}
@media (max-width: 720px) {
    .ca-lookup { padding: 16px; }
    .ca-lookup-row { flex-direction: column; }
    .ca-lookup-input { border-right: 1px solid #9aa5b1; }
    .ca-lookup-btn { width: 100%; }
}

.ca-open-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0 0 12px;
}
.ca-open-head h2 { margin: 0; }
.ca-open-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ca-open-fix {
    appearance: none;
    border: 1px solid #005da9;
    background: #005da9;
    color: #fff;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ca-open-fix:hover { background: #004b8a; border-color: #004b8a; }
.ca-open-delete-all {
    appearance: none;
    border: 1px solid #b42318;
    background: #fff;
    color: #b42318;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ca-open-delete-all:hover {
    background: #b42318;
    color: #fff;
}
html.theme-dark .ca-open-delete-all { background: transparent; }

.ca-jobs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0 0 12px;
}
.ca-jobs-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    white-space: nowrap;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.ca-jobs-select-all input[type="checkbox"],
.ca-jobs .ca-lookup-check input[type="checkbox"],
.ca-lookup-table .ca-lookup-check input[type="checkbox"],
.ca-lookup [data-ca-open-check] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 16px !important;
    box-sizing: border-box;
    accent-color: #005da9;
    vertical-align: middle;
}
.ca-jobs-delete {
    appearance: none;
    border: 1px solid #b42318;
    background: #fff;
    color: #b42318;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ca-jobs-delete:hover {
    background: #b42318;
    color: #fff;
}
.ca-jobs-refresh {
    margin: 0 0 6px;
    padding: 5px 10px !important;
    font-size: 12px !important;
}
html.theme-dark .ca-jobs-select-all { color: #94a3b8; }
html.theme-dark .ca-jobs-delete {
    background: transparent;
}

.swal2-popup.pt-pub-swal,
.swal2-popup.pt-pub-swal.swal2-modal { border-radius: 0 !important; }
.swal2-popup.pt-pub-swal .swal2-title { color: #0e2a52; font-weight: 800; }
.swal2-popup.pt-pub-swal .swal2-confirm { border-radius: 0 !important; font-weight: 800; }
.swal2-popup.pt-fix-swal {
    width: min(860px, 92vw) !important;
    max-width: 92vw !important;
}
.swal2-popup.pt-fix-swal .swal2-html-container {
    max-height: min(70vh, 560px);
    overflow: auto;
    text-align: left;
}

.acct-md-board .md-board-actions form { margin: 0; }
.wipe-data-board .wipe-all-btn,
.wipe-data-board .md-board-actions .md-btn-primary.wipe-all-btn {
    background: #b91c1c;
    color: #fff;
}
.wipe-data-board .wipe-all-btn:hover,
.wipe-data-board .md-board-actions .md-btn-primary.wipe-all-btn:hover {
    background: #991b1b;
    color: #fff;
}
.wipe-data-table th,
.wipe-data-table td,
.wipe-data-table .md-doc-link,
.wipe-data-table .dir-icon {
    text-transform: uppercase;
}

.word-editor,
.word-editor-bar,
.word-editor-bar button,
.word-editor-bar select,
.word-editor-canvas,
.word-pop,
.word-help {
    font-family: var(--font);
}

:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td {
    text-transform: uppercase;
}
:is(body.staff-body, body.portal-shell) table.acct-md-table tbody td,
:is(body.staff-body, body.portal-shell) table.acct-md-table tbody td * {
    text-transform: none;
}
:is(body.staff-body, body.portal-shell) table.wipe-data-table tbody td,
:is(body.staff-body, body.portal-shell) table.wipe-data-table tbody td * {
    text-transform: uppercase;
}
.acct-md-table .acct-md-input {
    text-transform: none;
}

:is(body.staff-body, body.portal-shell) :is(
    table.data,
    table.md-table
) tbody :is(
    .dir-icon,
    .app-row-actions a,
    .app-row-actions button,
    .md-doc-actions a,
    .md-doc-actions button,
    .dir-actions a,
    .dir-actions button
) {
    font-family: var(--font);
    text-transform: uppercase !important;
}

:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td.is-email,
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td.is-email *,
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td[data-label="Email"],
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td[data-label="Email"] *,
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td[data-label="Barua pepe"],
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody td[data-label="Barua pepe"] *,
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody .is-email,
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table, .excel-sheet table) tbody a[href^="mailto:"] {
    text-transform: none;
}

:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table) tbody td:has(.dir-empty),
:is(body.staff-body, body.portal-shell) :is(table.data, table.md-table) tbody td:has(.dir-empty) * {
    text-transform: none;
}

/* Website Content hub + section interiors */
.webc-hub {
  display: grid;
  gap: 18px;
  max-width: 860px;
  margin: 24px auto 0;
  justify-items: center;
  text-align: center;
}
.webc-hub-head { max-width: 560px; }
.webc-hub-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
.webc-hub-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
}
.webc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 360px));
  gap: 18px;
  justify-content: center;
  width: 100%;
  text-align: left;
}
.webc-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #e6ebf2;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.webc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14), 0 2px 4px rgba(15, 23, 42, .06);
  color: inherit;
}
.webc-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #eef3f9;
  color: #003366;
}
.webc-card strong {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}
.webc-card small {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}
.webc-card-go {
  margin-top: auto;
  font: 700 12px/1 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #003366;
}
.webc-section { display: grid; gap: 16px; }
.webc-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #64748b;
}
.webc-crumb a { color: #64748b; text-decoration: none; }
.webc-crumb a:hover { color: #003366; }
.webc-crumb strong { color: #0f172a; font-weight: 700; }
.webc-board { margin: 0; }
.webc-empty {
  margin: 0;
  padding: 28px 18px;
  color: #64748b;
  text-align: center;
}
.webc-item-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 8px 14px 16px;
}
.webc-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  border: 1px solid #e6ebf2;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 70, 137, .04), 0 6px 16px rgba(27, 70, 137, .05);
}
.webc-item-media,
.webc-item-media.is-hero {
  width: 100%;
  height: 118px;
  min-height: 118px;
  background: #e8eef5;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
button.webc-item-media {
  appearance: none;
  font: inherit;
  color: inherit;
}
.webc-item-media img,
.webc-item-media .webc-item-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #e8eef5;
}
.webc-item-placeholder { color: #94a3b8; }
.webc-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  flex: 1 1 auto;
}
.webc-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #64748b;
  font-size: 10px;
}
.webc-item-meta em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #003366;
}
.webc-item-body strong {
  font-size: 13px;
  font-weight: 800;
  color: #003366;
  line-height: 1.3;
}
.webc-item-body p {
  margin: 0;
  color: #475569;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.webc-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
}
.webc-item-actions form { margin: 0; display: inline-flex; }
.webc-item-actions .md-btn-primary,
.webc-item-actions .md-btn-ghost,
.webc-item-actions .dir-icon-delete {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}
.webc-item-actions .md-btn-primary {
  background: #003366;
}
.webc-item-actions .md-btn-primary:hover { background: #00264d; }
.webc-edit-btn {
  min-height: 28px;
  gap: 4px;
  text-decoration: none;
}
.webc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .72);
}
.webc-lightbox[hidden] { display: none !important; }
.webc-lightbox-card {
  position: relative;
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  padding: 16px;
}
.webc-lightbox-card img {
  display: block;
  max-width: 100%;
  max-height: min(80vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.webc-lightbox-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.webc-lightbox-x:hover { background: rgba(255,255,255,.22); }
.webc-edit-btn svg { stroke: currentColor; }
.webc-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.webc-row-actions form { margin: 0; display: inline-flex; }
.webc-form-card {
  background: #fff;
  border: 1px solid #e6ebf2;
  box-shadow: 0 1px 2px rgba(27, 70, 137, .04), 0 10px 28px rgba(27, 70, 137, .06);
  overflow: hidden;
}
.webc-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 28px;
}
.webc-form-grid .mat-field-wide { grid-column: 1 / -1; }
.webc-form-grid .mat-field {
  display: grid;
  gap: 6px;
  margin: 0;
  font-weight: 500;
  color: #64748b;
}
.webc-form-grid .mat-field > span {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.webc-form-grid .mat-field input,
.webc-form-grid .mat-field select {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-bottom: 1px solid #cfd6e0;
  border-radius: 0;
  background: transparent;
  padding: 6px 0;
  font: inherit;
  color: #0f172a;
}
.webc-form-grid .mat-field input:focus,
.webc-form-grid .mat-field select:focus {
  outline: 0;
  border-bottom-color: #003366;
}
.webc-hint { display: block; margin-top: 6px; color: #64748b; font-size: 12px; }
.webc-form-cancel { display: flex; justify-content: flex-start; align-items: end; }
.webc-form-card .mat-wizard-next,
.webc-form-card .md-btn-primary {
  background: #003366;
}
.webc-form-card .mat-wizard-next:hover { background: #00264d; }
.webc-form-card .mat-wizard-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.webc-form-card .mat-wizard-head-actions .md-btn-ghost {
  min-height: 36px;
}
[data-news-create-picture][hidden] { display: none !important; }
.webc-form-card .webc-media-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 22px;
  width: 100%;
  margin: 4px 0 8px;
}
.webc-form-card .webc-media-row .mat-field {
  flex: 0 1 460px;
  width: min(460px, 100%);
  max-width: 480px;
}
.webc-form-card .webc-media-row .dropzone {
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(27, 70, 137, .06),
    0 10px 28px rgba(27, 70, 137, .12);
}
.webc-form-card .webc-media-row .dropzone:hover,
.webc-form-card .webc-media-row .dropzone.is-over {
  box-shadow:
    0 2px 4px rgba(27, 70, 137, .08),
    0 14px 32px rgba(27, 70, 137, .16);
}
.word-style-chip,
.word-editor-bar .word-style-chip {
  background: #ffffff !important;
}
.word-editor-bar select.word-font-select,
.word-editor-bar select.word-size-select,
.word-editor-bar select.word-line-select {
  background: #ffffff !important;
  border: 1px solid #c9ced6 !important;
  color: #1f2937;
}
.word-editor-bar select.word-line-select {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 26px !important;
  flex: 0 0 auto !important;
}
.webc-form-card .word-editor-save { display: none; }
.webc-current-photo {
  width: 100%;
  max-width: 280px;
  margin: 0 0 10px;
  border: 1px solid #e6ebf2;
  overflow: hidden;
  background: #eef3f9;
}
.webc-current-photo img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.webc-notice-board .table-wrap {
  margin: 0;
  border: 0;
  overflow: auto;
}
.webc-notice-table {
  min-width: 860px;
}
.webc-notice-table th,
.webc-notice-table td,
.webc-notice-board .md-table th,
.webc-notice-board .md-table td {
  text-transform: none !important;
  vertical-align: middle;
  padding: 14px 16px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  letter-spacing: 0;
}
.webc-notice-table thead th,
.webc-notice-board .md-table thead th {
  background: #d7dbe2 !important;
  color: #111827 !important;
  font-weight: 700;
  font-size: 13px;
  border-top: 1px solid #b8bec8;
  border-bottom: 1px solid #b8bec8;
  white-space: nowrap;
}
.webc-notice-table tbody tr:hover td {
  background: #fafbfd;
}
.webc-notice-table tbody tr:last-child td {
  border-bottom: 1px solid #e5e7eb;
}
.webc-notice-link.md-doc-link,
button.webc-notice-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  text-align: left;
  max-width: 40ch;
  color: #123a6f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.webc-notice-table .webc-row-actions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
.webc-notice-table .webc-edit-btn {
  min-height: 32px;
  padding: 0 12px;
}
#webc-news-edit-modal .webc-news-modal .stack > label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
#webc-news-edit-modal .webc-news-modal .stack > label input,
#webc-news-edit-modal .webc-news-modal .stack > label select {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
  font: 500 13px/1.4 var(--font);
  color: #1f2937;
}
#webc-news-edit-modal .webc-news-modal .stack > label input:focus,
#webc-news-edit-modal .webc-news-modal .stack > label select:focus {
  outline: 0;
  border-bottom-color: #123a6f;
}
#webc-news-edit-modal .webc-news-modal .drop-field {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  padding-top: 4px;
  border-top: 1px solid #e5e7eb;
}
#webc-news-edit-modal.hero-modal,
[data-news-modal].hero-modal,
[data-hero-modal].hero-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: start;
  justify-items: center;
  padding: 108px 24px 32px;
  overflow: auto;
  box-sizing: border-box;
}
#webc-news-edit-modal .hero-modal-backdrop,
[data-news-modal] .hero-modal-backdrop,
[data-hero-modal] .hero-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.webc-lightbox {
  z-index: 10050;
}
body.hero-modal-open .sidebar,
body.hero-modal-open .topbar,
body.hero-modal-open .portal-header {
  z-index: 1 !important;
}
[data-hero-modal] .hero-modal-card {
  width: min(640px, 100%);
  margin: 0 auto 24px;
  border-radius: 0;
  max-height: none;
}
[data-hero-modal] .hero-modal-actions,
#webc-news-edit-modal .webc-news-modal .hero-modal-actions {
  justify-content: flex-end;
  margin-top: 12px;
  gap: 10px;
}
[data-hero-modal] .hero-modal-actions .tool-card-go,
#webc-news-edit-modal .webc-news-modal .hero-modal-actions .tool-card-go {
  background: #003366;
  border-radius: 0;
  color: #fff;
}
[data-hero-modal] .hero-modal-actions .tool-card-go:hover,
#webc-news-edit-modal .webc-news-modal .hero-modal-actions .tool-card-go:hover {
  background: #00264d;
}
#webc-news-edit-modal .hero-modal-card.webc-news-modal {
  width: min(1180px, 100%);
  height: calc(100vh - 148px);
  max-height: calc(100vh - 148px);
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
#webc-news-edit-modal .webc-news-modal > header {
  flex: 0 0 auto;
}
#webc-news-edit-modal .webc-news-modal .tool-card-body.stack {
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
  padding: 10px 20px 18px;
  overflow: auto;
}
#webc-news-edit-modal .webc-news-modal .stack > label:first-child {
  margin-top: 0;
}
#webc-news-edit-modal .webc-news-modal [data-news-preview-wrap][hidden],
#webc-news-edit-modal .webc-news-modal [data-news-picture-field][hidden] {
  display: none !important;
}
#webc-news-edit-modal .webc-news-modal .webc-current-photo {
  max-width: 220px;
  height: auto;
  margin: 0 0 8px;
}
#webc-news-edit-modal .webc-news-modal .webc-current-photo img {
  height: 120px;
}
#webc-news-edit-modal .webc-news-modal .word-editor-save { display: none; }
#webc-news-edit-modal .webc-news-modal .word-editor {
  border: 1px solid #e6ebf2;
  min-width: 0;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon {
  flex-wrap: nowrap;
  row-gap: 8px;
  padding: 6px 6px 0;
  overflow: hidden;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-group {
  min-height: 108px;
  padding: 6px 10px 0;
  gap: 4px;
  overflow: visible;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-group.is-font {
  min-width: 270px;
  flex: 1.4 1 auto;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-group.is-styles {
  min-width: 340px;
  flex: 1.6 0 auto;
  overflow: visible;
}
#webc-news-edit-modal .webc-news-modal .word-style-gallery {
  justify-content: flex-start;
  overflow: visible;
  gap: 4px;
}
#webc-news-edit-modal .webc-news-modal .word-style-chip {
  width: 54px;
  min-width: 54px;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-row {
  min-height: 32px;
  gap: 4px;
  justify-content: flex-start;
}
#webc-news-edit-modal .webc-news-modal .word-editor-bar button {
  height: 32px;
  min-width: 32px;
  padding: 0 6px;
}
#webc-news-edit-modal .webc-news-modal .word-editor-bar select {
  height: 32px;
  font-size: 13px;
  padding: 0 6px;
  background: #ffffff !important;
  border: 1px solid #c9ced6 !important;
  color: #1f2937;
}
#webc-news-edit-modal .webc-news-modal .word-editor-bar svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-btn {
  min-width: 56px !important;
  min-height: 64px !important;
  padding: 4px 6px !important;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-btn .word-ribbon-glyph svg {
  width: 26px;
  height: 26px;
}
#webc-news-edit-modal .webc-news-modal .word-line-select {
  max-width: 100%;
  width: 100%;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-btn .word-ribbon-caption {
  font-size: 10px;
}
#webc-news-edit-modal .webc-news-modal .word-ribbon-label {
  font-size: 10px;
  padding: 6px 0 4px;
}
#webc-news-edit-modal .webc-news-modal .word-font-select {
  min-width: 140px;
  width: 140px;
  max-width: 180px;
  height: 32px;
  flex: 0 0 auto;
  background: #ffffff !important;
  border: 1px solid #c9ced6 !important;
}
#webc-news-edit-modal .webc-news-modal .word-size-select {
  width: 48px;
  height: 32px;
  flex: 0 0 auto;
}
#webc-news-edit-modal .webc-news-modal .word-editor-canvas {
  min-height: 160px;
  max-height: none;
  overflow: auto;
}
#webc-news-edit-modal .webc-news-modal .dropzone { min-height: 110px; }
#webc-news-edit-modal .webc-news-modal .hero-modal-actions {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
  gap: 10px;
  flex: 0 0 auto;
}
#webc-news-edit-modal .webc-news-modal .hero-modal-actions .tool-card-go {
  background: #003366;
  border-radius: 0;
}
#webc-news-edit-modal .webc-news-modal .hero-modal-actions .tool-card-go:hover {
  background: #00264d;
}
@media (max-width: 900px) {
  .webc-cards { grid-template-columns: 1fr; max-width: 420px; }
  .webc-form-grid { grid-template-columns: 1fr; gap: 16px; }
  .webc-item-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .webc-item-media,
  .webc-item-media.is-hero {
    height: 100px;
    min-height: 100px;
  }
  #webc-news-edit-modal.hero-modal,
  [data-news-modal].hero-modal,
  [data-hero-modal].hero-modal {
    padding: 96px 12px 20px;
  }
  #webc-news-edit-modal .hero-modal-card.webc-news-modal {
    height: calc(100vh - 124px);
    max-height: calc(100vh - 124px);
  }
}
@media (max-width: 600px) {
  .webc-item-list { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Engagement board uses assignment-style filters */
.engage-board.mat-task-board {
    margin-top: 18px;
    padding: 8px 12px 16px;
}
.engage-board .mat-task-toolbar {
    padding: 12px 8px 20px;
}
.engage-board .engage-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.engage-board .engage-status.is-ok { background: #e7f6ec; color: #2b8a3e; }
.engage-board .engage-status.is-pending { background: #fff4e6; color: #d9480f; }
.engage-board .engage-status.is-fail { background: #fff0f0; color: #d63939; }
.engage-board .engage-none { color: #8b90a0; }

/* CRDB-inspired public chrome. Toggle HomeLook::STYLE to classic to restore. */
body.home-look-panel .tra-header {
    height: auto;
    background: #fff;
    box-shadow: 0 1px 0 rgba(14, 42, 82, .08);
}
body.home-look-panel .tra-nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    background: #fff;
    color: #0e2a52;
    font-weight: 800;
}
body.home-look-panel.tra-page-news .tra-header,
body.home-look-panel.tra-page-overview .tra-header {
    height: auto;
    background: #fff;
}
body.home-look-panel.tra-page-news .tra-nav,
body.home-look-panel.tra-page-overview .tra-nav {
    position: relative;
    top: auto;
    background: #fff;
}
body.home-look-panel .tra-nav-logo {
    height: 48px;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
body.home-look-panel .tra-nav-links {
    justify-content: center;
    gap: 4px;
}
body.home-look-panel .tra-nav a {
    color: #0e2a52;
    border-radius: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 22px 10px;
    background: transparent;
}
body.home-look-panel .tra-nav-links > a:hover,
body.home-look-panel .tra-drop > a:hover {
    background: transparent;
    color: #1b4689;
}
body.home-look-panel .tra-nav-links > a.is-current {
    box-shadow: inset 0 -3px 0 #0e2a52;
}
body.home-look-panel .tra-drop > a::after {
    color: #0e2a52;
    border: 0;
}
body.home-look-panel .tra-drop-menu {
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(14, 42, 82, .12);
}
body.home-look-panel .tra-drop-menu a {
    color: #0e2a52;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    padding: 10px 12px;
}
body.home-look-panel .tra-drop-menu a:hover {
    background: #f3f6fb;
}
body.home-look-panel .tra-nav-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}
body.home-look-panel .tra-nav-call,
body.home-look-panel .tra-nav-find,
body.home-look-panel .tra-nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #0e2a52;
    padding: 10px 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13px;
    line-height: 1;
}
body.home-look-panel .tra-nav-call svg,
body.home-look-panel .tra-nav-find svg,
body.home-look-panel .tra-nav-search svg {
    flex: none;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}
body.home-look-panel .tra-nav-call:hover,
body.home-look-panel .tra-nav-find:hover,
body.home-look-panel .tra-nav-search:hover {
    background: #f3f6fb;
    color: #0e2a52;
}
body.home-look-panel .tra-burger {
    background: transparent;
}
body.home-look-panel .tra-burger span {
    background: #0e2a52;
}
body.home-look-panel .px-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 42, 82, .05), transparent 28%),
        repeating-linear-gradient(135deg, rgba(14, 42, 82, .035) 0 2px, transparent 2px 18px),
        #f7f9fc;
    padding: 72px 0 80px;
}
body.home-look-panel .px-hero > .tra-wrap {
    width: min(1400px, calc(100% - 48px));
}
body.home-look-panel .px-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.28fr);
    gap: 32px 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
body.home-look-panel .px-hero-title {
    margin: 0;
    color: #0e2a52;
    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.15;
    font-weight: 800;
    max-width: 14ch;
}
body.home-look-panel .px-hero-line {
    margin: 14px 0 0;
    color: #4b5568;
    font-size: 17px;
    font-weight: 600;
    max-width: 42ch;
}
body.home-look-panel .px-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    min-height: 44px;
    padding: 0 22px;
    background: #0e2a52;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 4px;
}
body.home-look-panel .px-hero-cta:hover {
    background: #16386c;
    color: #fff;
}
body.home-look-panel .px-hero-search {
    margin: 18px 0 0;
    width: min(420px, 100%);
    height: 46px;
    pointer-events: auto;
}
body.home-look-panel .px-hero-visual {
    position: relative;
    min-height: 460px;
    /* Keep clear gap so dots never touch the image */
    padding: 16px 16px 28px 92px;
}
body.home-look-panel .px-hero-orb {
    position: absolute;
    top: -56px;
    right: -52px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 8px, transparent 8px 16px),
        #0e2a52;
    z-index: 0;
}
body.home-look-panel .px-hero-dots {
    /* 4×8 — wider band beside the image */
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 7px);
    grid-template-rows: repeat(8, 7px);
    gap: 15px 18px;
    z-index: 0;
    pointer-events: none;
}
body.home-look-panel .px-hero-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0e2a52;
    display: block;
}
body.home-look-panel .px-hero-frame {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
    box-shadow:
        0 4px 10px rgba(15, 23, 42, .06),
        0 18px 40px rgba(15, 23, 42, .14),
        0 32px 64px rgba(15, 23, 42, .12);
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    background: #0e2a52;
}
body.home-look-panel .px-hero-frame .tra-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
}
body.home-look-panel .px-hero-frame .tra-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    transform: none !important;
    animation: none !important;
    object-fit: cover;
    object-position: center center;
}
body.home-look-panel .px-hero .tra-slide-btn {
    width: 40px;
    height: 56px;
    background: rgba(14, 42, 82, .12);
    color: #0e2a52;
    z-index: 3;
}
body.home-look-panel .px-hero .tra-slide-btn:hover {
    background: #0e2a52;
    color: #fff;
}
body.home-look-panel .px-hero .tra-slide-btn.prev { left: -8px; }
body.home-look-panel .px-hero .tra-slide-btn.next { right: -8px; }
body.home-look-panel .px-wish {
    /* Same approach as CRDB .pattern-white: white bar motif top + bottom */
    --px-wish-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206 56' fill='%23fff'%3E%3Crect x='6' y='6.2' width='44.3' height='8.8'/%3E%3Crect x='6' y='23.6' width='44.3' height='8.8'/%3E%3Crect x='6' y='41' width='44.3' height='8.8'/%3E%3Crect x='62.5' y='6' width='8.8' height='44.3'/%3E%3Crect x='79.9' y='6' width='8.8' height='44.3'/%3E%3Crect x='97.3' y='6' width='8.8' height='44.3'/%3E%3Cg transform='translate(103 0)'%3E%3Crect x='6' y='6.2' width='44.3' height='8.8'/%3E%3Crect x='6' y='23.6' width='44.3' height='8.8'/%3E%3Crect x='6' y='41' width='44.3' height='8.8'/%3E%3Crect x='62.5' y='6' width='8.8' height='44.3'/%3E%3Crect x='79.9' y='6' width='8.8' height='44.3'/%3E%3Crect x='97.3' y='6' width='8.8' height='44.3'/%3E%3C/g%3E%3C/svg%3E");
    background-color: #0e2a52;
    background-image: var(--px-wish-pattern), var(--px-wish-pattern);
    background-repeat: repeat-x, repeat-x;
    background-position: center top, center bottom;
    background-size: auto 25px, auto 25px;
    color: #fff;
    padding: 56px 0 64px;
    position: relative;
    width: 100%;
}
body.home-look-panel .px-wish > .tra-wrap {
    width: min(1280px, calc(100% - 48px));
}
body.home-look-panel .px-wish::before,
body.home-look-panel .px-wish::after {
    content: none;
}
body.home-look-panel .px-wish h2 {
    margin: 0 0 36px;
    text-align: center;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
}
body.home-look-panel .px-wish-carousel {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    overflow: clip;
    min-width: 0;
}
body.home-look-panel .px-wish-viewport {
    overflow: hidden;
    width: 100%;
    min-width: 0;
    touch-action: pan-y;
}
body.home-look-panel .px-wish-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: max-content;
    max-width: none;
    transition: transform .5s ease;
    backface-visibility: hidden;
}
body.home-look-panel .px-wish-row a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    flex: 0 0 auto;
    width: 320px;
    padding: 10px 16px;
    box-sizing: border-box;
    text-align: center;
}
body.home-look-panel .px-wish-row a span {
    width: 96px;
    height: 96px;
    border: 1.5px solid rgba(255,255,255,.95);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
}
body.home-look-panel .px-wish-row a:hover {
    color: #f5c518;
}
body.home-look-panel .px-wish-row a:hover span {
    border-color: #f5c518;
    background: rgba(255,255,255,.06);
}
body.home-look-panel .px-wish-nav {
    width: 34px;
    height: 34px;
    border: 1.5px solid rgba(255,255,255,.85);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.home-look-panel .px-wish-nav:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
    color: #fff;
}
@media (max-width: 1100px) {
    body.home-look-panel .tra-nav-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    body.home-look-panel .tra-nav-logo { order: 1; }
    body.home-look-panel .tra-nav-tools {
        display: inline-flex !important;
        order: 2;
        margin-left: auto;
        gap: 0;
        position: relative;
        z-index: 50;
    }
    body.home-look-panel .tra-burger {
        order: 3;
        margin-left: 0;
    }
    body.home-look-panel .tra-nav-call,
    body.home-look-panel .tra-nav-find,
    body.home-look-panel .tra-nav-search,
    body.home-look-panel .tra-nav-call:visited,
    body.home-look-panel .tra-nav-find:visited,
    body.home-look-panel .tra-nav-search:visited,
    body.home-look-panel .tra-nav-call:hover,
    body.home-look-panel .tra-nav-find:hover,
    body.home-look-panel .tra-nav-search:hover {
        padding: 8px;
        min-width: 40px;
        min-height: 40px;
        color: #0e2a52 !important;
        background: transparent;
    }
    body.home-look-panel .tra-nav-call svg,
    body.home-look-panel .tra-nav-find svg,
    body.home-look-panel .tra-nav-search svg {
        color: #0e2a52 !important;
        stroke: #0e2a52 !important;
    }
    body.home-look-panel .tra-nav-find-label {
        display: none;
    }
    body.home-look-panel .tra-nav-links {
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: nowrap !important;
    }
    body.home-look-panel .tra-nav a {
        padding: 12px 10px;
        text-transform: none;
        letter-spacing: 0;
        color: #fff;
        border-radius: 0 !important;
    }
    body.home-look-panel .tra-nav a:visited,
    body.home-look-panel .tra-nav-links > a:hover,
    body.home-look-panel .tra-nav-links > a:focus,
    body.home-look-panel .tra-nav-links > a:active,
    body.home-look-panel .tra-drop > a:hover,
    body.home-look-panel .tra-drop > a:focus,
    body.home-look-panel .tra-drop > a:active,
    body.home-look-panel .tra-drop.is-open > a,
    body.home-look-panel .tra-drop:focus-within > a {
        color: #fff;
        /* Solid navy tint — white rgba highlights anti-alias into white flecks at the drawer edge */
        background: #16386c;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    body.home-look-panel .tra-nav-links > a.is-current {
        box-shadow: none;
        background: #16386c;
        color: #fff;
    }
    body.home-look-panel .tra-drop > a::after {
        content: none !important;
        display: none !important;
    }
    body.home-look-panel .tra-drop-menu,
    body.home-look-panel .tra-drop .tra-drop-menu,
    body.home-look-panel .tra-drop.is-open .tra-drop-menu,
    body.home-look-panel .tra-drop:focus-within .tra-drop-menu {
        display: grid !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none;
    }
    body.home-look-panel .tra-drop-menu a,
    body.home-look-panel .tra-drop-menu a:visited {
        color: #fff;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    body.home-look-panel .tra-drop-menu a:hover,
    body.home-look-panel .tra-drop-menu a:focus,
    body.home-look-panel .tra-drop-menu a:active {
        color: #fff;
        background: #16386c;
    }
    body.pub-nav-open.home-look-panel .tra-burger span { background: #fff; }
}
@media (max-width: 900px) {
    body.home-look-panel .px-hero { padding: 32px 0 40px; }
    body.home-look-panel .px-hero > .tra-wrap {
        width: calc(100% - 16px);
    }
    body.home-look-panel .px-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    body.home-look-panel .px-hero-title {
        max-width: none;
        font-size: clamp(24px, 6.5vw, 32px);
        min-height: 2.5em;
    }
    body.home-look-panel .px-hero-line {
        min-height: 1.55em;
    }
    body.home-look-panel .px-wish-row a,
    body.home-look-panel .px-wish-row a span {
        animation: none !important;
    }
    .year-seal,
    .seal-spin {
        animation: none;
    }
    body.home-look-panel .px-hero-visual { min-height: 0; padding: 8px 10px 24px; }
    body.home-look-panel .px-hero-orb { width: 140px; height: 140px; top: -28px; right: -18px; }
    body.home-look-panel .px-hero-dots { display: none; }
    body.home-look-panel .px-hero-frame { border-radius: 16px; }
    body.home-look-panel .px-hero .tra-slide-btn.prev { left: 4px; }
    body.home-look-panel .px-hero .tra-slide-btn.next { right: 4px; }
    body.home-look-panel .px-wish {
        padding: 44px 0 52px;
        background-size: auto 20px, auto 20px;
    }
    body.home-look-panel .px-wish > .tra-wrap {
        width: calc(100% - 24px);
    }
    body.home-look-panel .px-wish-carousel {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        max-width: 100%;
        gap: 6px;
    }
    body.home-look-panel .px-wish-row a { width: 160px; font-size: 13px; }
    body.home-look-panel .px-wish-row a span { width: 76px; height: 76px; }
    body.home-look-panel .px-wish-nav { width: 30px; height: 30px; font-size: 18px; }
}
.px-cookie {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 240;
    width: min(420px, calc(100vw - 28px));
    opacity: 0;
    transform: translate3d(0, 56px, 0);
    pointer-events: none;
    transition: opacity .48s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
    font: 600 13px/1.45 system-ui, Segoe UI, Arial, sans-serif;
}
.px-cookie.is-on {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}
.px-cookie.is-out {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    pointer-events: none;
}
.px-cookie[hidden] { display: none !important; }
.px-cookie-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 14px;
    padding: 18px 18px 16px;
    background: #fff;
    color: #16345c;
    border: 1px solid #d5e0ee;
    border-radius: 0;
    box-shadow: 0 18px 44px rgba(14, 42, 82, .22);
}
.px-cookie-mark {
    grid-row: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: #0e2a52;
    flex-shrink: 0;
    border-radius: 0;
}
.px-cookie-copy {
    grid-column: 2;
    min-width: 0;
}
.px-cookie-copy strong {
    display: block;
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #0e2a52;
    letter-spacing: -.01em;
}
.px-cookie-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4b6078;
    font-weight: 500;
}
.px-cookie-copy a {
    color: #0e2a52;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.px-cookie-copy a:hover { color: #c9a20e; }
.px-cookie-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.px-cookie-accept,
.px-cookie-reject {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}
.px-cookie-accept {
    border: 0;
    background: #f5c518;
    color: #111;
}
.px-cookie-accept:hover { background: #ffd84a; }
.px-cookie-reject {
    background: #fff;
    color: #0e2a52;
    border: 1.5px solid #c5d3e4;
}
.px-cookie-reject:hover {
    background: #f4f7fb;
    border-color: #0e2a52;
}
body.cookie-consent-on .side-report { bottom: 28px; }
body.cookie-consent-on .year-seal { bottom: 28px; }
@media (max-width: 640px) {
    .px-cookie {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }
    .px-cookie-actions { justify-content: stretch; }
    .px-cookie-accept,
    .px-cookie-reject { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .px-cookie {
        transition: opacity .2s ease;
        transform: none;
    }
}
.px-hours {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 8px 0 14px;
    padding: 8px 12px;
    background: rgba(14, 42, 82, .08);
    color: #0e2a52;
    font-weight: 700;
}
.px-hours.is-open { background: rgba(22, 163, 74, .12); color: #166534; }
.px-hours strong { font-size: 14px; }
.px-hours span, .px-hours small, .px-hours p { margin: 0; font-weight: 600; font-size: 13px; }
.px-tax-next { list-style: none; margin: 0 0 12px; padding: 0; }
.px-tax-next li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #e5e7eb; }
.px-tax-next em { font-style: normal; font-weight: 700; color: #0e2a52; white-space: nowrap; }
.px-tax-table { display: grid; gap: 8px; margin: 18px 0 36px; }
.px-tax-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #e5e7eb; background: #fff; }
.px-tax-row.is-soon { border-color: #f5c518; }
.px-tax-row strong { display: block; color: #0e2a52; }
.px-tax-row small { color: #64748b; }
.px-tax-row em { font-style: normal; font-weight: 800; color: #0e2a52; }
.px-cal-embed {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 8px 0 48px;
}
body.tra-body > .page-head {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 4px 0 6px;
}
.px-cal {
    margin: 8px 0 48px;
    background: #fff;
    border: 1px solid #d7e2ef;
    box-shadow: 0 14px 36px rgba(14, 42, 82, .08);
}
.px-cal-poster {
    overflow: hidden;
}
.px-cal-poster-hero {
    position: relative;
    min-height: 280px;
    background: #1a1a1a;
}
.px-cal-poster-hero img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}
.px-cal-year-badge {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    background: rgba(34, 34, 34, .88);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}
.px-cal-poster-band {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.2fr);
    gap: 0;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #e8edf3;
}
.px-cal-month-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 18px 16px 14px;
    background: #e2b203;
    color: #fff;
}
.px-cal-month-num {
    position: absolute;
    left: 14px;
    top: 8px;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .02em;
    pointer-events: none;
}
.px-cal-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }
.px-cal-month {
    margin: 0;
    min-width: 9rem;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}
.px-cal-quote {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 18px 20px;
    background: #fff;
}
.px-cal-quote p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
}
.px-cal-shift,
.px-cal-today {
    min-height: 36px;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}
.px-cal-shift {
    width: 36px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 22px;
    line-height: 1;
}
.px-cal-shift:hover { background: #fff; color: #111; }
.px-cal-today {
    justify-self: start;
    padding: 0 14px;
    background: #0e2a52;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 12px;
}
.px-cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .85fr);
    min-height: 420px;
}
.px-cal-board { padding: 18px 16px 22px; background: #f3f5f7; }
.px-cal-week,
.px-cal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.px-cal-week {
    margin-bottom: 10px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}
.px-cal-week .is-sun,
.px-cal-cell.is-sun > span {
    color: #e2b203;
}
.px-cal-cell {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    border: 0;
    background: #eceff3;
    color: #374151;
    cursor: pointer;
    font: inherit;
    text-align: center;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, .9),
        inset -2px -2px 5px rgba(148, 163, 184, .45);
}
.px-cal-cell span { font-weight: 800; font-size: 15px; }
.px-cal-cell b { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.px-cal-cell b i,
.px-cal-legend i,
.px-cal-item::before {
    width: 8px;
    height: 8px;
    display: inline-block;
    background: #0e2a52;
}
.px-cal-cell.is-blank {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    cursor: default;
}
.px-cal-cell.is-past { color: #94a3b8; }
.px-cal-cell.is-today {
    box-shadow:
        inset 0 0 0 2px #e2b203,
        inset 2px 2px 4px rgba(255, 255, 255, .9),
        inset -2px -2px 5px rgba(148, 163, 184, .35);
}
.px-cal-cell.is-picked,
.px-cal-cell:hover:not(.is-blank) {
    background: #0e2a52;
    color: #fff;
    box-shadow: 0 8px 18px rgba(14, 42, 82, .18);
}
.px-cal-cell.is-picked.is-sun > span,
.px-cal-cell:hover:not(.is-blank).is-sun > span { color: #f5c518; }
.px-cal-cell.has-event span { text-decoration: none; }
.px-cal-side {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 18px 18px 22px;
    border-left: 1px solid #d7e2ef;
    background: #fff;
}
.px-cal-side-kicker {
    margin: 0 0 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.px-cal-next-hint {
    margin: 0 0 10px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
}
.px-cal-next-items {
    display: grid;
    gap: 8px;
}
.px-cal-next-item {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2eaf3;
    background: #f8fbfe;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.px-cal-next-item:hover {
    border-color: #0e2a52;
    background: #fff;
}
.px-cal-next-tag {
    display: inline-flex;
    width: max-content;
    margin: 0 0 4px;
    padding: 2px 7px;
    background: #0e2a52;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.px-cal-next-item.is-vat .px-cal-next-tag { background: #c99700; color: #111; }
.px-cal-next-item.is-instalment .px-cal-next-tag { background: #1685d6; }
.px-cal-next-item.is-return .px-cal-next-tag { background: #0f9d58; }
.px-cal-next-item strong {
    color: #0e2a52;
    font-size: 13px;
    line-height: 1.35;
}
.px-cal-next-item em {
    font-style: normal;
    font-weight: 800;
    color: #0e2a52;
    font-size: 12px;
}
.px-cal-next-item small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.px-cal-selected {
    padding-bottom: 4px;
}
.px-cal-next-list {
    padding-top: 14px;
    border-top: 1px solid #e8edf3;
}
.px-cal-side-date { margin: 0 0 14px; font-size: 18px; color: #0e2a52; }
.px-cal-empty { margin: 0; color: #64748b; }
.px-cal-item {
    position: relative;
    margin: 0 0 10px;
    padding: 10px 12px 10px 16px;
    border: 1px solid #e5eef6;
    background: #f8fbfe;
}
.px-cal-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    height: auto;
}
.px-cal-item strong { display: block; color: #0e2a52; font-size: 14px; }
.px-cal-item small,
.px-cal-item em { display: block; color: #64748b; font-size: 12px; }
.px-cal-item em { font-style: normal; font-weight: 800; color: #0e2a52; margin-top: 4px; }
.px-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0;
    padding: 12px 18px;
    list-style: none;
    border-top: 1px solid #e5eef6;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.px-cal-legend li { display: flex; align-items: center; gap: 6px; }
.px-cal-cell b i.is-paye,
.px-cal-legend i.is-paye,
.px-cal-item.is-paye::before { background: #0e2a52; }
.px-cal-cell b i.is-vat,
.px-cal-legend i.is-vat,
.px-cal-item.is-vat::before { background: #f5c518; }
.px-cal-cell b i.is-instalment,
.px-cal-legend i.is-instalment,
.px-cal-item.is-instalment::before { background: #1685d6; }
.px-cal-cell b i.is-return,
.px-cal-legend i.is-return,
.px-cal-item.is-return::before { background: #0f9d58; }
.px-cal-cell.is-picked b i,
.px-cal-cell:hover:not(.is-blank) b i { background: #f5c518; }
.px-cal-side-shot {
    margin: -18px -18px 18px;
    height: 220px;
    overflow: hidden;
    background: #0e2a52;
}
.px-cal-side-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}
.px-cal-cell.is-today:not(.is-picked) {
    background: #fff8dc;
    border-color: #f5c518;
}
.px-cal-cell.has-event:not(.is-picked):not(.is-today) {
    box-shadow: inset 3px 0 0 #0e2a52;
}
.px-cal-cell.has-holiday:not(.is-picked) {
    background: #fff5f5;
    box-shadow: inset 3px 0 0 #c41e3a;
}
.px-cal-cell.has-holiday.is-christmas:not(.is-picked) {
    background: #fef2f2;
    box-shadow: inset 3px 0 0 #b91c1c;
}
.px-cal-hol-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #b91c1c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.px-cal-cell.is-picked .px-cal-hol-name,
.px-cal-cell:hover:not(.is-blank) .px-cal-hol-name { color: #fde68a; }
.px-cal-cell b i.is-holiday,
.px-cal-legend i.is-holiday,
.px-cal-item.is-holiday::before { background: #c2410c; }
.px-cal-cell b i.is-christmas,
.px-cal-legend i.is-christmas,
.px-cal-item.is-christmas::before { background: #b91c1c; }
body.tra-page-calendar .ov-page { padding-top: 40px; }
body.tra-page-calendar .ov-top { padding-top: 22px; margin-bottom: 28px; }
body.tra-page-calendar .ov-page { background: #f4f7fb; }
body.tra-page-calendar .tra-wrap { padding-bottom: 24px; }
.cal-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    margin: 0 0 18px;
    background: #0e2a52;
    box-shadow: 0 18px 40px rgba(14, 42, 82, .16);
}
.cal-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    opacity: .38;
}
.cal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 42, 82, .88) 0%, rgba(14, 42, 82, .55) 58%, rgba(14, 42, 82, .2) 100%);
    pointer-events: none;
}
.cal-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    padding: 46px 40px 42px;
    color: #fff;
}
.cal-hero-kicker {
    margin: 0 0 8px;
    color: #f5c518;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.cal-hero-copy h2 {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}
.cal-hero-copy p { margin: 0; color: #dbe7f5; font-size: 15px; line-height: 1.55; }
.cal-shots {
    display: grid;
    grid-template-columns: 1.15fr .9fr .9fr;
    gap: 12px;
    margin: 0 0 28px;
}
.cal-shot {
    position: relative;
    margin: 0;
    min-height: 240px;
    overflow: hidden;
    background: #0e2a52;
    box-shadow: 0 12px 28px rgba(14, 42, 82, .12);
}
.cal-shot img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}
.cal-shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 28px 16px 14px;
    background: linear-gradient(transparent, rgba(14, 42, 82, .88));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.cal-next-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 12px; }
.cal-next-head h2 { margin: 0; color: #0e2a52; font-size: 20px; }
.cal-next-head p { margin: 0; color: #64748b; font-size: 13px; }
.cal-next {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 28px;
}
.cal-next-card {
    display: grid;
    align-content: start;
    padding: 0 0 14px;
    border: 1px solid #d7e2ef;
    background: #fff;
    box-shadow: 0 10px 24px rgba(14, 42, 82, .07);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.cal-next-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.cal-next-tag {
    display: inline-block;
    margin: 12px 14px 6px;
    padding: 3px 8px;
    background: #0e2a52;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: max-content;
}
.cal-next-card strong { display: block; margin: 0 14px 6px; color: #0e2a52; font-size: 14px; line-height: 1.35; }
.cal-next-card em { display: block; margin: 0 14px; font-style: normal; font-weight: 800; color: #0e2a52; font-size: 13px; }
.cal-next-card small { display: block; margin: 6px 14px 0; color: #64748b; font-size: 12px; font-weight: 700; }
body.tra-page-calendar .px-cal {
    margin-top: 0;
    overflow: hidden;
    animation: calFadeUp .7s ease both;
    animation-delay: .22s;
}
body.tra-page-calendar .legal-lead { display: none; }
body.tra-page-calendar .cal-hero {
    animation: calFadeUp .55s ease both;
}
body.tra-page-calendar .cal-hero > img {
    animation: calKenBurns 14s ease-out both;
}
body.tra-page-calendar .cal-hero-copy {
    animation: calFadeUp .7s ease both;
    animation-delay: .12s;
}
body.tra-page-calendar .cal-shot {
    animation: calFadeUp .55s ease both;
}
body.tra-page-calendar .cal-shot:nth-child(1) { animation-delay: .08s; }
body.tra-page-calendar .cal-shot:nth-child(2) { animation-delay: .16s; }
body.tra-page-calendar .cal-shot:nth-child(3) { animation-delay: .24s; }
.cal-shot img,
.cal-next-card img,
.px-cal-side-shot img {
    transition: transform .7s ease;
}
.cal-shot:hover img,
.cal-next-card:hover img,
.px-cal-side-shot:hover img {
    transform: scale(1.06);
}
.cal-next-head { animation: calFadeUp .5s ease both; animation-delay: .18s; }
body.tra-page-calendar .cal-next-card {
    animation: calFadeUp .5s ease both;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.tra-page-calendar .cal-next-card:nth-child(1) { animation-delay: .12s; }
body.tra-page-calendar .cal-next-card:nth-child(2) { animation-delay: .2s; }
body.tra-page-calendar .cal-next-card:nth-child(3) { animation-delay: .28s; }
body.tra-page-calendar .cal-next-card:nth-child(4) { animation-delay: .36s; }
.cal-next-card:hover {
    border-color: #0e2a52;
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(14, 42, 82, .14);
}
.px-cal-days.is-swap { animation: calFadeUp .38s ease; }
.px-cal-cell {
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.px-cal-cell:hover:not(.is-blank):not(.is-picked) { transform: translateY(-1px); }
.px-cal-cell.has-holiday:not(.is-picked) {
    animation: calHolGlow 2.6s ease-in-out infinite;
}
.px-cal-today { animation: calTodayPulse 2.2s ease-in-out infinite; }
@keyframes calFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes calKenBurns {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}
@keyframes calHolGlow {
    0%, 100% { background: #fff5f5; box-shadow: inset 3px 0 0 #c41e3a; }
    50% { background: #ffe4e6; box-shadow: inset 3px 0 0 #fb7185; }
}
@keyframes calTodayPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .45); }
    50% { box-shadow: 0 0 0 6px rgba(245, 197, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
    body.tra-page-calendar .cal-hero,
    body.tra-page-calendar .cal-hero > img,
    body.tra-page-calendar .cal-hero-copy,
    body.tra-page-calendar .cal-shot,
    body.tra-page-calendar .cal-next-card,
    body.tra-page-calendar .px-cal,
    .cal-next-head,
    .px-cal-days.is-swap,
    .px-cal-cell.has-holiday:not(.is-picked),
    .px-cal-today {
        animation: none !important;
    }
    .cal-shot img,
    .cal-next-card img,
    .px-cal-side-shot img,
    .cal-next-card,
    .px-cal-cell {
        transition: none !important;
    }
}
@media (max-width: 900px) {
    .px-cal-poster-band { grid-template-columns: 1fr; }
    .px-cal-poster-hero img { height: 220px; }
    .px-cal-month { font-size: 22px; min-width: 0; }
    .px-cal-layout { grid-template-columns: 1fr; }
    .px-cal-side { border-left: 0; border-top: 1px solid #d7e2ef; }
    .px-cal-cell { min-height: 58px; padding: 6px; }
    .cal-hero-copy { padding: 32px 20px; }
    .cal-hero-copy h2 { font-size: 24px; }
    .cal-shots, .cal-next { grid-template-columns: 1fr 1fr; }
    .cal-next-head { flex-direction: column; }
    .px-cal-side-shot { height: 180px; margin: 0 0 16px; }
}
@media (max-width: 640px) {
    .cal-shots, .cal-next { grid-template-columns: 1fr; }
    .cal-shot img { height: 180px; }
}
.px-faq-band { background: #f7f9fc; padding: 36px 0 48px; }
.px-faq-list { display: grid; gap: 8px; margin: 12px 0 18px; }
.px-faq { background: #fff; border: 1px solid #e5e7eb; }
.px-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 800; color: #0e2a52; }
.px-faq-body { padding: 2px 18px 16px; }
.px-faq p { margin: 0 0 10px; padding: 0; color: #334155; line-height: 1.7; font-size: 15px; }
.px-faq-body p:last-child { margin-bottom: 0; }
.px-helpbot-msg { white-space: pre-wrap; }
.px-map-wrap { padding: 8px 0 28px; color: #fff; }
.px-map-wrap h3 { margin: 0 0 6px; }
.px-map { overflow: hidden; border-radius: 12px; min-height: 240px; background: #dbe4f0; }
.px-map iframe { display: block; width: 100%; height: 280px; border: 0; }
.px-contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; padding-bottom: 48px; }
.px-contact-form { display: grid; gap: 12px; }
.px-contact-form label { display: grid; gap: 6px; font-weight: 700; color: #0e2a52; font-size: 13px; }
.px-contact-form input, .px-contact-form textarea {
    font: inherit; padding: 10px 12px; border: 1px solid #d5dde8; background: #fff; color: #0f172a;
}
.px-contact-form button, .px-contact-form-lite button {
    min-height: 44px; border: 0; background: #0e2a52; color: #fff; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.px-contact-form-lite { margin-top: 18px; max-width: 520px; }
.px-contact-lite-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.px-contact-form-lite input, .px-contact-form-lite textarea { width: 100%; font: inherit; padding: 10px 12px; border: 0; }
.px-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.px-form-note { margin: 12px auto; padding: 10px 14px; background: #ecfdf3; color: #166534; font-weight: 700; }
.px-form-note.is-error { background: #fef2f2; color: #b91c1c; }
.legal-page .legal-copy { max-width: 72ch; line-height: 1.65; padding-bottom: 48px; }
.legal-page .legal-copy h2 { margin: 22px 0 8px; font-size: 18px; color: #0e2a52; }
.legal-lead { max-width: 70ch; color: #4b5563; }
.px-wa, .px-top {
    position: fixed; right: 16px; z-index: 80; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; box-shadow: 0 8px 20px rgba(15, 23, 42, .22); border: 0; cursor: pointer;
}
.px-wa { bottom: 68px; background: #25d366; }
.px-wa svg { width: 28px; height: 28px; }
.px-top { bottom: 128px; background: #0e2a52; color: #fff; font-size: 20px; font-weight: 800; }
.px-top[hidden] { display: none !important; }
.px-helpbot { position: fixed; right: 16px; bottom: 18px; z-index: 90; pointer-events: none; }
.px-helpbot-toggle,
.px-helpbot-panel { pointer-events: auto; }
.px-helpbot-toggle {
    min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #0e2a52; color: #fff;
    font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(14, 42, 82, .28);
}
.px-helpbot-panel {
    position: absolute; right: 0; bottom: 52px; width: min(360px, calc(100vw - 24px));
    height: min(520px, 72vh); max-height: min(520px, 72vh);
    background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
}
.px-helpbot-panel[hidden] { display: none !important; }
.px-helpbot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.px-helpbot-head strong { color: #0e2a52; font-size: 14px; }
.px-helpbot-close { width: 32px; height: 32px; border: 0; background: transparent; color: #64748b; font-size: 22px; cursor: pointer; }
.px-helpbot-log {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 8px; padding-right: 2px;
}
.px-helpbot-msg { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; max-width: 92%; }
.px-helpbot-msg.is-bot { background: #f1f5f9; color: #0f172a; align-self: flex-start; }
.px-helpbot-msg.is-user { background: #0e2a52; color: #fff; align-self: flex-end; }
.px-helpbot-chips { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.px-helpbot-chips[hidden] { display: none !important; }
.px-helpbot-chips button {
    border: 1px solid #dbe4f0; background: #f8fafc; color: #0e2a52; font: inherit; font-size: 12px;
    font-weight: 700; padding: 8px 10px; cursor: pointer; text-align: left; border-radius: 8px; width: 100%;
}
.px-helpbot-form {
    flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 6px;
    background: #fff; padding-top: 8px; border-top: 1px solid #e8edf3; z-index: 2;
}
.px-helpbot-form input { min-width: 0; border: 1px solid #d5dde8; padding: 10px 12px; font: inherit; background: #fff; }
.px-helpbot-form button { border: 0; background: #0e2a52; color: #fff; font-weight: 800; padding: 0 14px; cursor: pointer; }
.px-helpbot-links { display: flex; flex-wrap: wrap; gap: 8px 10px; flex: 0 0 auto; }
.px-helpbot-links a { color: #1b4689; font-weight: 700; font-size: 12px; text-decoration: none; }
.help-jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.help-jump {
    display: grid; gap: 4px; padding: 14px 16px; background: #f8fafc; border: 1px solid #e5eef6;
    color: inherit; text-decoration: none; min-height: 72px;
}
.help-jump:hover { border-color: #0e2a52; background: #fff; }
.help-jump strong { color: #0e2a52; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.help-jump span { color: #475569; font-size: 13px; font-weight: 600; }
.help-copy { padding: 16px; line-height: 1.6; }
.help-faq-list { padding: 8px 14px 18px; }
.help-panel { overflow: visible; }
.page-body { padding-bottom: 88px; }
@media (max-width: 700px) {
    .help-jumps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .px-contact-grid, .px-contact-lite-row, .px-tax-row { grid-template-columns: 1fr; }
    .px-wa { bottom: 72px; }
    .px-top { bottom: 132px; }
}
body.tra-page-contact .ov-page { padding-top: 24px; }
body.tra-page-contact .ov-top { padding: 12px 0 12px; margin-bottom: 20px; }
body.tra-page-contact .ov-page.is-contact-sent {
    padding: 48px 16px 80px;
    background: #eef1f5;
    min-height: calc(100vh - 140px);
}
.px-contact-thanks {
    display: grid;
    place-items: center;
    width: min(520px, 100%);
    margin: 0 auto;
}
body.tra-page-contact .pt-ty-wrap {
    position: relative;
    width: min(480px, 100%);
    margin: 0 auto;
    animation: ptTyIn .5s ease both;
}
body.tra-page-contact .pt-ty-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 28px;
    right: -18px;
    bottom: -26px;
    height: 42px;
    background: radial-gradient(ellipse at 55% 40%, rgba(15, 23, 42, .28) 0%, rgba(15, 23, 42, .1) 45%, rgba(15, 23, 42, 0) 72%);
    filter: blur(8px);
    transform: translateX(18px);
    pointer-events: none;
}
body.tra-page-contact .pt-ty-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid #e2e6ec;
    box-shadow:
        14px 18px 0 rgba(15, 23, 42, .05),
        20px 28px 34px rgba(15, 23, 42, .16),
        28px 40px 48px rgba(15, 23, 42, .1);
    padding: 2.35rem 1.85rem 2rem;
    text-align: center;
}
body.tra-page-contact .pt-ty-mail {
    position: relative;
    width: min(220px, 72%);
    height: 150px;
    margin: 0 auto 1.35rem;
}
body.tra-page-contact .pt-ty-env { position: absolute; inset: 0; z-index: 1; }
body.tra-page-contact .pt-ty-env img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    pointer-events: none;
    mix-blend-mode: multiply;
}
body.tra-page-contact .pt-ty-env .is-closed { animation: ptEnvClosed 3.8s ease-in-out infinite; }
body.tra-page-contact .pt-ty-env .is-open { opacity: 0; animation: ptEnvOpen 3.8s ease-in-out infinite; }
body.tra-page-contact .pt-ty-badge {
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: 84px;
    height: 84px;
    margin-left: -42px;
    z-index: 2;
    animation: ptCardInOut 3.8s ease-in-out infinite;
}
body.tra-page-contact .pt-ty-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.tra-page-contact .pt-ty-tick {
    fill: none;
    stroke: #fff;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: ptTickDraw 3.8s ease-in-out infinite;
}
body.tra-page-contact .pt-ty-card h1 {
    margin: 0 0 .55rem;
    color: #1c3a5f;
    font-size: 2rem;
    font-weight: 700;
}
body.tra-page-contact .pt-ty-lead,
body.tra-page-contact .pt-ty-note {
    margin: 0 0 .55rem;
    color: #2a4a6e;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
}
body.tra-page-contact .pt-ty-note { margin-bottom: 1rem; }
body.tra-page-contact .pt-ty-phones { display: grid; gap: 8px; justify-items: center; }
body.tra-page-contact .pt-ty-phones a {
    color: #1c3a5f;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.tra-page-contact .pt-ty-again {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.35rem;
    min-height: 44px;
    padding: 0 22px;
    background: #0e2a52;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
body.tra-page-contact .pt-ty-again:hover { background: #16386c; color: #fff; }
@keyframes ptTyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ptCardInOut {
    0%, 8% { transform: translateY(40px) scale(.78) rotate(-8deg); z-index: 0; }
    22% { transform: translateY(-18px) scale(1.08) rotate(4deg); z-index: 3; }
    32%, 48% { transform: translateY(-56px) scale(1.12) rotate(0deg); z-index: 3; }
    58% { transform: translateY(-40px) scale(1.05) rotate(-3deg); z-index: 3; }
    72%, 100% { transform: translateY(40px) scale(.78) rotate(6deg); z-index: 0; }
}
@keyframes ptTickDraw {
    0%, 12% { stroke-dashoffset: 90; }
    26%, 52% { stroke-dashoffset: 0; }
    68%, 100% { stroke-dashoffset: 90; }
}
@keyframes ptEnvClosed {
    0%, 14% { opacity: 1; }
    24%, 58% { opacity: 0; }
    70%, 100% { opacity: 1; }
}
@keyframes ptEnvOpen {
    0%, 14% { opacity: 0; }
    24%, 58% { opacity: 1; }
    70%, 100% { opacity: 0; }
}

/* WordPress data viewer */
.wpv-page { display: grid; gap: 14px; }
@keyframes wpvIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes wpvRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.wpv-anim {
    animation: wpvIn .45s ease both;
    animation-delay: var(--wpv-delay, 0ms);
}
.wpv-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; background: linear-gradient(135deg, #fff 0%, #f5f8fd 100%);
    border: 1px solid #e6ebf2;
}
.wpv-head-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1 1 320px; }
.wpv-head-ico {
    flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
    border: 1px solid #c7d7f5; background: #eef4ff; color: #1d4ed8;
}
.wpv-head-copy { min-width: 0; }
.wpv-head h1 {
    margin: 0 0 6px; font-size: 20px; line-height: 1.25; color: #1d273b;
    letter-spacing: .02em;
}
.wpv-lead { margin: 0; color: #667382; font-size: 13px; max-width: 62ch; line-height: 1.45; }
.wpv-head-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
}
.wpv-meta-chip {
    display: inline-flex; align-items: center; padding: 4px 10px;
    background: #fff; border: 1px solid #e6ebf2; color: #334155; font-size: 11px; font-weight: 700;
}
.wpv-meta-link {
    color: #2563eb; font-size: 12px; text-decoration: none; word-break: break-all;
}
.wpv-meta-link:hover { text-decoration: underline; }
.wpv-head-btn { flex: 0 0 auto; white-space: nowrap; }
.wpv-kicker {
    margin: 0 0 4px !important; color: #8a94a6; font-size: 11px; font-weight: 700;
    letter-spacing: .08em;
}
.wpv-pill {
    display: inline-flex; align-items: center; padding: 3px 9px;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.wpv-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.wpv-stat {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px; background: #fff; border: 1px solid #e6ebf2;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wpv-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(29, 39, 59, .06);
    border-color: #d5deea;
}
.wpv-stat-ico {
    flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid transparent;
}
.wpv-stat.is-blue .wpv-stat-ico { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.wpv-stat.is-teal .wpv-stat-ico { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
.wpv-stat.is-amber .wpv-stat-ico { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.wpv-stat.is-rose .wpv-stat-ico { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }
.wpv-stat.is-violet .wpv-stat-ico { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
.wpv-stat.is-sky .wpv-stat-ico { color: #0284c7; background: #f0f9ff; border-color: #bae6fd; }
.wpv-stat.is-navy .wpv-stat-ico { color: #1e3a8a; background: #eef2ff; border-color: #c7d2fe; }
.wpv-stat.is-green .wpv-stat-ico { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.wpv-stat span {
    display: block; margin-bottom: 2px; color: #8a94a6; font-size: 10px;
    font-weight: 800; letter-spacing: .06em;
}
.wpv-stat strong { color: #1d273b; font-size: 22px; font-weight: 800; line-height: 1.1; }
.wpv-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #fff; border: 1px solid #e6ebf2;
}
.wpv-tabs a {
    padding: 8px 12px; color: #4b5565; text-decoration: none; font-size: 11px; font-weight: 800;
    letter-spacing: .04em; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wpv-tabs a:hover { background: #f8fafc; }
.wpv-tabs a.is-active { color: #0f3d7a; background: #eef4ff; border-color: #c7d7f5; }
.wpv-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px; background: #fff; border: 1px solid #e6ebf2;
}
.wpv-search { flex: 1 1 220px; }
.wpv-search input, .wpv-toolbar select, .wpv-per select {
    width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid #d7dee8; background: #fff; color: #1d273b;
}
.wpv-toolbar select { width: auto; min-width: 160px; }
.wpv-count { margin-left: auto; color: #667382; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.wpv-panel, .wpv-empty {
    padding: 20px; background: #fff; border: 1px solid #e6ebf2;
}
.wpv-panel h2, .wpv-panel h3 { margin: 0 0 8px; color: #1d273b; letter-spacing: .03em; }
.wpv-help, .wpv-hint { margin: 0 0 14px; color: #667382; font-size: 13px; line-height: 1.45; }
.wpv-upload { display: grid; gap: 14px; max-width: 640px; }
.wpv-type-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
    margin: 12px 0 0; padding: 0; list-style: none;
}
.wpv-type-list li {
    display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px;
    background: #f7f9fc; border: 1px solid #e6ebf2; font-size: 13px;
}
.wpv-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e6ebf2; }
.wpv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wpv-table th, .wpv-table td {
    padding: 10px 10px; border-bottom: 1px solid #eef2f7; text-align: left; vertical-align: middle;
}
.wpv-table th {
    color: #8a94a6; font-size: 10px; letter-spacing: .07em; font-weight: 800; background: #f8fafc;
}
.wpv-table-media {
    table-layout: fixed;
    width: 100%;
}
.wpv-table-media .wpv-col-check { width: 34px; }
.wpv-table-media .wpv-col-preview { width: 58px; }
.wpv-table-media .wpv-col-title { width: 16%; }
.wpv-table-media .wpv-col-author { width: 10%; }
.wpv-table-media .wpv-col-mime { width: 11%; }
.wpv-table-media .wpv-col-date { width: 12%; white-space: nowrap; }
.wpv-table-media .wpv-col-dims { width: 9%; white-space: nowrap; }
.wpv-table-media .wpv-col-source { width: auto; }
.wpv-table-media .wpv-col-status { width: 9%; white-space: nowrap; }
.wpv-table-media .wpv-col-actions {
    width: 250px;
    text-align: right;
    white-space: nowrap;
}
.wpv-col-title small {
    display: block; margin-top: 2px;
}
.wpv-col-title small code {
    font-size: 10px; letter-spacing: .02em; padding: 1px 5px;
}
.wpv-col-author,
.wpv-col-mime {
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    word-break: break-word;
}
.wpv-source {
    display: grid; gap: 2px; color: inherit; text-decoration: none; min-width: 0;
}
.wpv-source strong {
    color: #1d273b; font-size: 11px; font-weight: 800; letter-spacing: .03em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wpv-source small {
    display: block; color: #667382; font-size: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wpv-source:hover strong { color: #2563eb; }
.wpv-table-media .wpv-col-actions .wpv-actions {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
}
.wpv-table tbody tr.wpv-row {
    animation: wpvRowIn .35s ease both;
    animation-delay: var(--wpv-delay, 0ms);
    transition: background .15s ease;
}
.wpv-table tbody tr:hover { background: #f9fbff; }
.wpv-table strong {
    display: block; color: #1d273b; font-size: 12px; font-weight: 800; letter-spacing: .03em;
}
.wpv-table small { color: #8a94a6; font-size: 11px; letter-spacing: .02em; }
.wpv-table code {
    font-size: 11px; color: #334155; letter-spacing: .03em; background: #f8fafc;
    padding: 2px 6px; border: 1px solid #eef2f7;
}
.wpv-col-check { width: 36px; text-align: center !important; }
.wpv-check {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #4b5565;
}
.wpv-check input[type="checkbox"],
.wpv-col-check input[type="checkbox"],
.wpv-media-actions input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 14px !important;
    accent-color: #1d4ed8;
    cursor: pointer;
    transform: none !important;
    scale: 1 !important;
    box-shadow: none !important;
}
.wpv-empty-cell { text-align: center !important; color: #667382; padding: 28px !important; letter-spacing: .04em; }
.wpv-actions {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
}
.wpv-actions a, .wpv-actions .linkish, .wpv-act {
    display: inline-flex; align-items: center; gap: 4px;
    color: #2563eb; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-decoration: none;
    white-space: nowrap;
}
.wpv-actions a:hover, .wpv-actions .linkish:hover, .wpv-act:hover { text-decoration: underline; }
.wpv-actions .linkish.is-danger,
.wpv-act-delete { color: #dc2626 !important; }
.wpv-act-download { color: #0f766e !important; }
.wpv-thumb {
    width: 48px; height: 48px; padding: 0; border: 1px solid #e6ebf2; background: #f8fafc;
    cursor: zoom-in; overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.wpv-thumb:hover { transform: scale(1.04); border-color: #bfdbfe; }
.wpv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpv-thumb.is-missing { background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 6px, #fee2e2 6px, #fee2e2 12px); }
.wpv-file-ico {
    width: 48px; height: 48px; display: grid; place-items: center; color: #8a94a6; border: 1px solid #e6ebf2; background: #f8fafc;
}
.wpv-badge {
    display: inline-block; padding: 3px 8px; border: 1px solid #e6ebf2; background: #f8fafc;
    color: #4b5565; font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.wpv-badge.is-ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.wpv-badge.is-warn { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.wpv-media-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
    padding: 12px 14px; background: #fff; border: 1px solid #e6ebf2; border-bottom: 0;
}
.wpv-media-left {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; flex: 1 1 240px;
}
.wpv-media-right {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto;
}
.wpv-media-actions .wpv-hint {
    margin: 0; font-size: 12px; max-width: 42ch; line-height: 1.35;
}
.wpv-btn-danger {
    color: #b91c1c !important; border-color: #fecaca !important; background: #fff5f5 !important;
}
.wpv-btn-danger:hover { background: #fee2e2 !important; }
.wpv-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; background: #fff; border: 1px solid #e6ebf2;
}
.wpv-pager-nav {
    display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #4b5565;
}
.wpv-pager a {
    color: #2563eb; text-decoration: none; font-weight: 800; letter-spacing: .04em;
    padding: 6px 10px; border: 1px solid #dbe4f3; background: #f8fbff; transition: background .15s ease;
}
.wpv-pager a:hover { background: #eef4ff; }
.wpv-per {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #4b5565;
}
.wpv-per select { width: auto; min-width: 96px; min-height: 34px; padding: 6px 10px; }
.wpv-modal { border: 0; padding: 0; background: transparent; max-width: min(920px, calc(100vw - 24px)); }
.wpv-modal::backdrop { background: rgba(15, 23, 42, .55); }
.wpv-modal-card {
    margin: 0; background: #fff; border: 1px solid #e6ebf2; width: min(920px, calc(100vw - 24px));
    animation: wpvIn .28s ease both;
}
.wpv-modal-card header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid #eef2f7;
}
.wpv-modal-card h2 { margin: 0; font-size: 17px; color: #1d273b; }
.wpv-modal-card header button {
    width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e6ebf2; background: #fff; cursor: pointer;
}
.wpv-modal-body { display: grid; gap: 14px; padding: 16px; }
.wpv-modal-body img { max-width: 100%; max-height: 420px; object-fit: contain; background: #f8fafc; border: 1px solid #eef2f7; }
.wpv-modal-body dl {
    display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; font-size: 13px;
}
.wpv-modal-body dt { color: #8a94a6; font-weight: 700; }
.wpv-modal-body dd { margin: 0; color: #1d273b; word-break: break-word; }
.wpv-modal-body a { color: #2563eb; }
@media (max-width: 900px) {
    .wpv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wpv-media-right { width: 100%; justify-content: flex-start; }
    .wpv-table-media .wpv-col-date,
    .wpv-table-media .wpv-col-dims { width: 120px; }
}
@media (max-width: 640px) {
    .wpv-stats { grid-template-columns: 1fr 1fr; }
    .wpv-modal-body dl { grid-template-columns: 1fr; }
    .wpv-pager { justify-content: center; }
}
/* —— Client Note —— */
.cnote-board,
.cnote-workspace,
.cnote-form,
.cnote-report,
.cnote-modal,
.cnote-share-modal,
.cnote-a4-cover,
.cnote-a4-industry,
.cnote-a4-analytics,
.cnote-a4-details,
.cnote-page {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-lead {
    margin: 0 18px 12px;
    color: #64748b;
    font-size: 13px;
}
.cnote-workspace { display: grid; gap: 16px; }
.cnote-workspace-head {
    position: relative;
    margin: 0 0 18px;
}
.cnote-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cnote-overview-head-main {
    min-width: 0;
    flex: 1 1 auto;
}
.cnote-workspace-head h1 {
    margin: 4px 0 0;
    font-size: 21px;
    line-height: 1.25;
    color: #0f274f;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    font-weight: 700;
}
.cnote-workspace[data-cnote-mode="overview"] .cnote-client-title {
    margin: 6px 0 0;
    text-align: left;
    padding: 0;
}
.cnote-workspace-head p { margin: 6px 0 0; color: #64748b; font-size: 13px; }
.cnote-overview-head-actions {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.cnote-report-period-filter.is-head {
    margin: 0;
}
.cnote-report-period-filter.is-head .cnote-period-field {
    min-width: 190px;
    margin: 0;
}
.cnote-report-period-filter.is-head .cnote-period-field span {
    display: block;
    font: 700 11px/1.2 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
}
.cnote-report-period-filter.is-head .cnote-period-field select {
    min-width: 190px;
    height: 38px;
    border: 1px solid #c5d0e0;
    background: #fff;
    color: #0e2a52;
    font: 600 13px/1.2 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    padding: 0 10px;
}
.cnote-record-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid #0e2a52;
    background: #0e2a52;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.cnote-record-btn:hover {
    background: #123a6f;
    border-color: #123a6f;
    color: #fff;
}
.cnote-record-btn .ri { color: #fff; }
.cnote-record-btn.is-ghost {
    background: #fff;
    color: #0e2a52;
    border-color: #c5d0e0;
}
.cnote-record-btn.is-ghost:hover {
    background: #f4f7fc;
    border-color: #0e2a52;
    color: #0e2a52;
}
.cnote-record-btn.is-ghost .ri { color: #0e2a52; }
.cnote-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: #1b4689; text-decoration: none; font-size: 13px; font-weight: 700;
}
@media (max-width: 720px) {
    .cnote-overview-head {
        align-items: stretch;
    }
    .cnote-overview-head-actions {
        width: 100%;
    }
    .cnote-record-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}
.cnote-service-rail {
    position: relative;
    margin: 0 0 18px;
}
.cnote-analytics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 2px 4px;
}
.cnote-analytics::-webkit-scrollbar { display: none; }
.cnote-analytics-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-width: 240px;
    min-height: 168px;
    padding: 18px 16px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    scroll-snap-align: start;
}
.cnote-service-metric {
    display: flex;
    align-items: baseline;
    min-height: 36px;
}
.cnote-service-metric strong {
    color: #0f172a;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}
.cnote-service-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cnote-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #111827;
}
.cnote-service-icon svg {
    stroke: currentColor;
    stroke-width: 1.7;
}
.cnote-service-title {
    display: block;
    color: #111827;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.15;
}
.cnote-service-sub {
    display: block;
    margin-top: 4px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}
.cnote-service-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cnote-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1;
}
.cnote-service-btn svg {
    flex: 0 0 auto;
    stroke: currentColor;
}
.cnote-service-btn.is-ghost {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
}
.cnote-service-btn.is-ghost:hover {
    background: #f9fafb;
}
.cnote-service-btn.is-solid {
    border: 1px solid #111827;
    background: #111827;
    color: #fff;
}
.cnote-service-btn.is-solid svg {
    color: #facc15;
    stroke: #facc15;
}
.cnote-service-btn.is-solid:hover {
    background: #1f2937;
}
@media (max-width: 980px) {
    .cnote-service-rail,
    .cnote-workspace {
        max-width: 100%;
        overflow-x: clip;
    }
    .cnote-analytics {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: hidden;
        scroll-snap-type: none;
    }
    .cnote-analytics-card {
        min-width: 0;
        width: auto;
    }
}
.cnote-analytics-progress {
    margin-top: auto;
    height: 8px;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
}
.cnote-analytics-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1b4689;
}
.cnote-analytics-spark {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: auto;
}
.cnote-spark-area {
    fill: rgba(27, 70, 137, .14);
    stroke: none;
}
.cnote-spark-line {
    fill: none;
    stroke: #1b4689;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cnote-spark-line.is-dashed {
    stroke: #94a3b8;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}
.cnote-analytics-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 36px;
    margin-top: auto;
}
.cnote-analytics-bars > i {
    flex: 1;
    display: block;
    height: var(--h, 16px);
    border-radius: 3px 3px 0 0;
    background: #1b4689;
}
.cnote-analytics-pie-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    min-height: 42px;
}
.cnote-analytics-pie {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}
.cnote-analytics-pie-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}
.cnote-analytics-pie-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}
.cnote-analytics-pie-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
@media (max-width: 980px) {
    .cnote-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cnote-analytics {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        overflow-x: hidden;
    }
    .cnote-analytics-card {
        min-width: 0;
        min-height: 0;
    }
    .cnote-overview-head-actions,
    .cnote-report-period-filter.is-head {
        width: 100%;
        max-width: 100%;
    }
    .cnote-report-period-filter.is-head .cnote-period-field,
    .cnote-report-period-filter.is-head .cnote-period-field select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
.cnote-details-board {
    margin: 0 0 18px;
    border-radius: 0;
}
.cnote-details-table td {
    color: #334155;
    font-weight: 500;
}
.cnote-details-toggle-col {
    width: 40px;
    text-align: center;
}
.cnote-details-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d5dee9;
    background: #fff;
    color: #1b4689;
    cursor: pointer;
}
.cnote-details-toggle-btn:hover {
    background: #eef4fb;
}
.cnote-details-summary td:not(.cnote-details-toggle-col) {
    cursor: pointer;
}
.cnote-details-summary:hover td {
    background: #f8fafc;
}
.cnote-details-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform .18s ease;
}
.cnote-details-board.is-open .cnote-details-chevron {
    transform: rotate(180deg);
}
.cnote-details-board .cnote-details-expand {
    display: none;
}
.cnote-details-board.is-open .cnote-details-expand {
    display: table-row;
}
.cnote-details-board .cnote-details-expand > td {
    padding: 0 !important;
    background: #f8fafc;
    border-top: 0;
}
.cnote-details-panel {
    padding: 12px 14px 14px;
}
.cnote-details-fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 12px;
}
.cnote-details-fields > div {
    min-width: 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e7ebf3;
}
.cnote-details-fields span {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.cnote-details-fields strong {
    display: block;
    color: #0f274f;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cnote-details-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e7ebf3;
}
.cnote-details-note span {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.cnote-details-note p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}
.cnote-details-history {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e7ebf3;
}
.cnote-details-history h3 {
    margin: 0 0 8px;
    color: #0f274f;
    font-size: 13px;
}
.cnote-details-history .table-wrap {
    margin: 0;
    border: 1px solid #e7ebf3;
    background: #fff;
}
.cnote-details-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.cnote-details-history-table th,
.cnote-details-history-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}
.cnote-details-history-table th {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #f8fafc;
}
.cnote-details-history-table tr:last-child td {
    border-bottom: 0;
}
.cnote-details-history-table td {
    color: #334155;
}
@media (max-width: 1100px) {
    .cnote-details-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .cnote-details-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cnote-details-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cnote-task-status.is-overdue {
    color: #b91c1c;
    font-weight: 700;
}
.cnote-task-status.is-late {
    color: #b45309;
    font-weight: 600;
}
.cnote-history-board { border-radius: 0; }
.cnote-form { border-radius: 0; overflow: hidden; }
.cnote-form-body { padding: 18px; display: grid; gap: 16px; }
.cnote-project-field input,
.cnote-entry input,
.cnote-entry textarea {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    border-radius: 0 !important;
}
.cnote-entries { display: grid; gap: 14px; }
.cnote-entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 16px;
    border: 1px solid #d5dde8;
    background: #e8eef5 !important;
    border-radius: 0;
    box-sizing: border-box;
}
.cnote-desc-field textarea { min-height: 84px; resize: vertical; width: 100%; }
.cnote-attach {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed #c5d0e0;
    background: #f7fafc;
}
.cnote-attach-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.cnote-attach-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    letter-spacing: .04em;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}
.cnote-attach-btn,
.cnote-attach-remove {
    padding: 6px 10px !important;
    font-size: 12px !important;
}
.cnote-attach-remove {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
.cnote-attach-remove:hover {
    color: #b91c1c !important;
    background: #fff5f5 !important;
}
.cnote-attach-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #d7dee8;
}
.cnote-attach-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.cnote-attach-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cnote-attach-name .md-file-type-icon {
    width: 22px;
    height: 29px;
    object-fit: contain;
    flex-shrink: 0;
}
.cnote-attach-name .md-file-type-icon[hidden] { display: none !important; }
.cnote-attach-file a {
    color: #1b4689;
    font-weight: 700;
    text-decoration: underline;
    word-break: break-all;
}
.cnote-attach-when {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}
.cnote-attach-when[hidden] { display: none !important; }
.cnote-attach-file[hidden] { display: none !important; }
.cnote-attach-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 32000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: transparent;
}
.cnote-attach-modal[hidden] { display: none !important; }
.cnote-attach-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}
.cnote-attach-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid #d7dee8;
    padding: 18px 18px 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}
.cnote-attach-modal-card strong {
    display: block;
    color: #0f274f;
    font-size: 16px;
    margin-bottom: 6px;
}
.cnote-attach-modal-card p {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
.cnote-attach-upload {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.cnote-attach-upload[hidden] { display: none !important; }
.cnote-attach-upload span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0f274f;
    margin-bottom: 8px;
}
.cnote-attach-progress {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.cnote-attach-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #111827, #374151);
    transition: width .12s linear;
}
.cnote-attach-upload em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    color: #64748b;
    font-size: 12px;
    word-break: break-all;
}
.cnote-attach-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
body.cnote-attach-lock {
    overflow: hidden !important;
}
.cnote-study-attach {
    margin-top: 6px;
    font-size: 12px;
}
.cnote-study-attach a {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    color: #1b4689;
    font-weight: 700;
    text-decoration: underline;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cnote-study-attach .md-file-type-icon,
.cnote-doc-name .md-file-type-icon {
    width: 18px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.cnote-doc-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cnote-remove,
.cnote-entry-close {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 0;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid #fecaca;
    background: #fff;
    cursor: pointer;
    border-radius: 0;
    color: #dc2626 !important;
    font: 700 12px/1.2 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}
.cnote-remove:hover,
.cnote-entry-close:hover {
    color: #b91c1c !important;
    border-color: #f87171;
    background: #fff5f5;
}
.cnote-add { justify-self: start; border-radius: 0 !important; }
.cnote-report-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cnote-report-toolbar h2 { margin: 0; font-size: 20px; color: #0f274f; }
.cnote-report {
    display: grid; gap: 18px;
}
.cnote-page {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 39, 79, .06);
}
.cnote-cover {
    position: relative;
    min-height: 420px;
    background:
        linear-gradient(135deg, rgba(15,39,79,.88), rgba(27,70,137,.55)),
        radial-gradient(circle at 70% 40%, #3b82f6 0, transparent 45%),
        #0f274f;
    color: #fff;
}
.cnote-cover-shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(115deg, transparent 42%, #1b4689 42.2%, #1b4689 58%, transparent 58.2%),
        linear-gradient(115deg, transparent 62%, #0b1f3d 62.2%, #0b1f3d 78%, transparent 78.2%);
    opacity: .55;
}
.cnote-cover-copy { position: relative; z-index: 1; padding: 36px; min-height: 420px; display: grid; align-content: space-between; }
.cnote-logo {
    width: 84px; height: 84px; display: grid; place-items: center;
    border: 2px solid #fff; font-weight: 800; letter-spacing: .04em; font-size: 12px;
}
.cnote-cover-banner {
    max-width: 520px;
    background: #1b4689;
    clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
    padding: 28px 64px 28px 28px;
}
.cnote-cover-banner h2 {
    margin: 0 0 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: .02em;
}
.cnote-cover-banner p { margin: 0; opacity: .92; font-size: 14px; }
.cnote-cover-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; opacity: .92; }
.cnote-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
    align-content: start;
}
.cnote-spread > .cnote-page {
    margin: 0;
    align-self: start;
}
.cnote-summary header,
.cnote-method header {
    background: #1b4689;
    color: #fff;
    padding: 14px 18px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .03em;
}
.cnote-summary > p,
.cnote-method > p,
.cnote-insights > p,
.cnote-methodical > p { padding: 16px 18px; margin: 0; color: #334155; line-height: 1.6; }
.cnote-unveil {
    margin: 0 18px 18px;
    background: linear-gradient(120deg, #1b4689, #3b82f6);
    color: #fff;
    padding: 18px;
}
.cnote-unveil h3 { margin: 0 0 8px; font-size: 16px; }
.cnote-unveil p { margin: 0; opacity: .95; }
.cnote-insights,
.cnote-methodical { padding: 18px; }
.cnote-insights h3,
.cnote-methodical h3 { margin: 0 0 10px; color: #0f274f; font-size: 22px; }
.cnote-bars {
    display: flex; align-items: flex-end; gap: 10px; min-height: 170px;
    padding: 12px 0 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 16px;
}
.cnote-bar { flex: 1; display: grid; justify-items: center; gap: 6px; }
.cnote-bar span { display: block; width: 100%; max-width: 28px; background: linear-gradient(180deg, #3b82f6, #1b4689); }
.cnote-bar em { font-style: normal; font-size: 11px; color: #64748b; }
.cnote-spotlight {
    display: block;
    margin: 12px 18px 16px;
}
.cnote-spotlight h4 { margin: 0 0 6px; color: #0f274f; }
.cnote-spotlight p { margin: 0; color: #475569; font-size: 13px; line-height: 1.5; }
.cnote-line-chart { width: 100%; height: auto; display: block; margin: 12px 0; }
.cnote-line-chart circle { fill: #1b4689; }
.cnote-line-chart text { fill: #64748b; font-size: 10px; font-family: "Trebuchet MS", sans-serif; }
.cnote-method blockquote {
    margin: 0 18px 18px; padding: 16px 18px;
    border-left: 4px solid #1b4689; background: #f8fafc; color: #334155;
}
.cnote-method blockquote span { display: block; font-size: 42px; line-height: 1; color: #1b4689; }
.cnote-cycle {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px;
}
.cnote-cycle-item {
    border: 1px solid #dbe3ef; background: #f8fafc; padding: 14px; text-align: center;
}
.cnote-cycle-item strong {
    display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto 8px;
    background: #1b4689; color: #fff; border-radius: 50%;
}
.cnote-cycle-item p { margin: 0; font-size: 12px; color: #475569; line-height: 1.4; }
.cnote-pie-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; margin: 12px 0; }
.cnote-pie { width: 180px; height: 180px; }
.cnote-pie-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cnote-pie-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #334155; }
.cnote-pie-legend i { width: 12px; height: 12px; display: inline-block; }
.cnote-precision {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;
}
.cnote-precision > div { border-top: 3px solid #1b4689; background: #f8fafc; padding: 12px; }
.cnote-precision h4 { margin: 0 0 6px; color: #0f274f; font-size: 14px; }
.cnote-precision p { margin: 0; color: #475569; font-size: 12px; line-height: 1.45; }
.cnote-study { padding: 0 0 12px; }
.cnote-study-bar { height: 10px; background: #93c5fd; }
.cnote-study h2 {
    margin: 18px 22px 8px;
    font-size: 34px;
    color: #0f274f;
    line-height: 1.05;
}
.cnote-study h2 span {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 8px;
    background: #93c5fd;
    color: #0f274f;
    font-size: 11px;
    vertical-align: middle;
}
.cnote-study-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    padding: 8px 22px 18px;
}
.cnote-study-grid p { color: #334155; line-height: 1.6; font-size: 13px; }
.cnote-study-grid h3 { margin: 0 0 10px; color: #0f274f; font-size: 16px; }
.cnote-study-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.cnote-study-table th,
.cnote-study-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}
.cnote-study-table th { color: #64748b; font-size: 12px; }
.cnote-study-table th:nth-child(1),
.cnote-study-table td:nth-child(1) { width: 12%; }
.cnote-study-table th:nth-child(2),
.cnote-study-table td:nth-child(2) { width: 22%; }
.cnote-study-table th:nth-child(3),
.cnote-study-table td:nth-child(3),
.cnote-study-table .cnote-study-desc { width: 66%; }
.cnote-study-desc {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cnote-study footer {
    display: flex; justify-content: space-between;
    margin: 0 22px; padding-top: 10px; border-top: 2px solid #93c5fd;
    color: #64748b; font-size: 12px;
}
@media (max-width: 980px) {
    .cnote-spread,
    .cnote-study-grid,
    .cnote-entry,
    .cnote-pie-wrap,
    .cnote-precision,
    .cnote-cycle { grid-template-columns: 1fr; }
}
@media print {
    .sidebar, .topbar, .cnote-form, .cnote-details-board, .cnote-analytics, .cnote-history-board,
    .cnote-workspace-head, .cnote-report-toolbar, .swal-banner { display: none !important; }
    .cnote-report { gap: 0; }
    .cnote-page { break-after: page; box-shadow: none; border: 0; }
}
.cnote-entry-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    gap: 12px;
    align-items: end;
    padding-right: 72px;
}
.cnote-date-field { max-width: none; }
.cnote-subtitle-field,
.cnote-date-field {
    width: 100%;
}
.cnote-entry .cnote-subtitle-field input,
.cnote-entry .cnote-date-field input {
    background: #ffffff !important;
    border: 1px solid #d7dee8 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 42px;
    padding: 10px 12px !important;
}
.cnote-entry .cnote-subtitle-field span,
.cnote-entry .cnote-date-field span,
.cnote-desc-label {
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cnote-desc-field {
    display: grid;
    gap: 8px;
}
.cnote-desc-field[data-mode="view"] .cnote-desc-view {
    /* Word-like page width so text does not stretch across the whole screen */
    width: min(816px, 100%);
    max-width: 816px;
}
.cnote-desc-field[data-mode="view"] {
    background: #e8eef5;
    border: 1px solid #d7dee8;
    padding: 16px 12px 18px;
    box-sizing: border-box;
}
.cnote-desc-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}
@media (max-width: 720px) {
    .cnote-entry-meta { grid-template-columns: 1fr; }
}
.cnote-desc-label i { color: #e11d48; font-style: normal; margin-left: 2px; }
.cnote-desc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cnote-desc-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cnote-desc-toolbar .md-btn-ghost,
.cnote-desc-toolbar .md-btn-primary {
    padding: 6px 10px;
    font-size: 12px;
}
.cnote-desc-close-btn,
.cnote-close-btn,
.cnote-modal-actions [data-cnote-close] {
    color: #dc2626 !important;
}
.cnote-desc-close-btn:hover,
.cnote-close-btn:hover,
.cnote-modal-actions [data-cnote-close]:hover {
    color: #b91c1c !important;
}
.cnote-desc-close-btn svg,
.cnote-close-btn svg,
.cnote-modal-actions [data-cnote-close] svg {
    stroke: currentColor;
}
.cnote-desc-field[data-mode="view"] .cnote-desc-edit,
.cnote-desc-field[data-mode="view"] .cnote-desc-done-btn,
.cnote-desc-field[data-mode="view"] .cnote-desc-close-btn { display: none !important; }
.cnote-desc-field[data-mode="edit"] .cnote-desc-view,
.cnote-desc-field[data-mode="edit"] .cnote-desc-edit-btn { display: none !important; }
.cnote-desc-view {
    width: min(816px, 100%);
    max-width: 816px;
    min-height: 320px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #d7dee8;
    background: #ffffff !important;
    padding: 48px 56px;
    box-sizing: border-box;
    color: #222;
    line-height: 1.5;
    font-size: 15px;
    box-shadow: 0 0 2px #aaa;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    overflow-wrap: break-word;
    word-break: break-word;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    box-shadow: none;
}
.cnote-desc-view p { margin: 0 0 8px; background: transparent !important; }
.cnote-desc-view p:last-child { margin-bottom: 0; }
.cnote-desc-view ul,
.cnote-desc-view ol { margin: 0 0 8px; padding-left: 1.25em; background: transparent !important; }
.cnote-desc-view li,
.cnote-desc-view span,
.cnote-desc-view div { background: transparent !important; }
.cnote-desc-view table,
.cnote-study-desc table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    table-layout: fixed;
    background: #fff;
}
.cnote-desc-view td,
.cnote-desc-view th,
.cnote-study-desc td,
.cnote-study-desc th {
    border: 1px solid #444 !important;
    padding: 8px 10px;
    vertical-align: top;
    background: #fff;
}
.cnote-desc-view img,
.cnote-desc-view iframe,
.cnote-study-desc img,
.cnote-study-desc iframe {
    max-width: 100%;
    height: auto;
}
.cnote-desc-view .muted { color: #94a3b8; font-style: italic; }
.cnote-desc-edit {
    background: transparent;
}
.cnote-desc-field .word-editor {
    width: 100%;
    border: 1px solid #d7dee8;
    background: #e8eef5;
    border-radius: 0;
    box-sizing: border-box;
}
.cnote-desc-field .word-ribbon-viewport,
.cnote-desc-field .word-topbar,
.cnote-desc-field .word-tabs,
.cnote-desc-field .word-statusbar {
    width: 100%;
}
.cnote-desc-field .word-ribbon-viewport {
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-anchor: none;
}
.cnote-desc-field .word-editor {
    overflow-anchor: none;
}
.cnote-desc-field .word-editor-canvas {
    width: min(816px, calc(100% - 28px));
    max-width: 100%;
    min-height: 1056px;
    height: auto;
    margin: 18px auto 22px;
    padding: 48px 56px;
    background: #ffffff !important;
    border: 0;
    box-shadow: 0 0 2px #aaa;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}
.cnote-desc-field .word-editor-save { display: none !important; }
.cnote-desc-field .word-statusbar {
    min-height: 24px;
    padding: 4px 12px;
    font-size: 12px;
}
.cnote-reports-board { border-radius: 0; }
.cnote-dash-tables { border-radius: 0; overflow: hidden; }
.cnote-reports-board .md-board-head,
.cnote-dash-tables-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cnote-table-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cnote-table-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d7dee8;
    background: #f8fafc;
    color: #334155;
    font: 700 12px/1.2 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 0;
}
.cnote-table-tab .ri {
    flex: 0 0 auto;
    color: currentColor;
}
.cnote-table-tab.is-reports {
    background: #e8f1fb;
    border-color: #b7cce8;
    color: #1b4689;
}
.cnote-table-tab.is-reports:hover {
    background: #dceaf8;
    border-color: #1b4689;
    color: #0e2a52;
}
.cnote-table-tab.is-reports.is-active {
    background: #0e2a52;
    border-color: #0e2a52;
    color: #fff;
}
.cnote-table-tab.is-work {
    background: #fff;
    border-color: #e2b203;
    border-width: 1px;
    color: #0e2a52;
}
.cnote-table-tab.is-work:hover {
    background: #fff;
    border-color: #c99700;
    color: #0e2a52;
}
.cnote-table-tab.is-work.is-active {
    background: #fff;
    border-color: #e2b203;
    border-width: 1px;
    color: #0e2a52;
}
.cnote-table-tab.is-work.is-active .ri {
    color: #e2b203;
}
.cnote-table-panel[hidden] { display: none !important; }
.cnote-table-panel.is-active { display: block; }
.cnote-workspace[data-cnote-mode="notes"] .cnote-workspace-head {
    margin-bottom: 14px;
}
.cnote-workspace[data-cnote-mode="notes"] .cnote-form {
    margin-top: 0;
}
.cnote-reports-board .table-name-link {
    color: #123a6f !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-color: #123a6f !important;
    text-underline-offset: 2px;
}
.cnote-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cnote-report-actions .cnote-act,
.cnote-modal-actions .cnote-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cnote-report-actions .cnote-act .ri,
.cnote-modal-actions .cnote-act .ri {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
/* Colored action icons: View blue, Download green, Share gold */
.cnote-report-actions .cnote-act-view .ri,
.cnote-modal-actions .cnote-act-view .ri {
    color: #206bc4;
    stroke: #206bc4;
}
.cnote-report-actions .cnote-act-download .ri,
.cnote-modal-actions .cnote-act-download .ri {
    color: #0ca678;
    stroke: #0ca678;
}
.cnote-report-actions .cnote-act-share .ri,
.cnote-modal-actions .cnote-act-share .ri {
    color: #ffd43b;
    stroke: #ffd43b;
}
.cnote-report-actions .cnote-act-delete-form {
    display: inline-flex;
    margin: 0;
}
.cnote-report-actions .cnote-act-delete {
    color: #c92a2a;
    border-color: #f1b0b0;
}
.cnote-report-actions .cnote-act-delete .ri {
    color: #c92a2a;
    stroke: #c92a2a;
}
.cnote-report-actions .cnote-act-delete:hover {
    background: #fff5f5;
    border-color: #e03131;
    color: #a61e1e;
}
.cnote-report-actions .cnote-act-delete:hover .ri {
    color: #a61e1e;
    stroke: #a61e1e;
}
.cnote-report-actions .cnote-act-view:hover .ri,
.cnote-modal-actions .cnote-act-view:hover .ri {
    color: #1864ab;
    stroke: #1864ab;
}
.cnote-report-actions .cnote-act-download:hover .ri,
.cnote-modal-actions .cnote-act-download:hover .ri {
    color: #099268;
    stroke: #099268;
}
.cnote-report-actions .cnote-act-share:hover .ri,
.cnote-modal-actions .cnote-act-share:hover .ri {
    color: #ffe066;
    stroke: #ffe066;
}
/* Lock scroll without layout jump / mobile “shake” (avoid 100vw + bare overflow:hidden). */
html.cnote-modal-lock,
body.cnote-modal-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
}
body.cnote-modal-lock.is-scroll-pinned {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
}
.cnote-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    display: none;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-y;
}
.cnote-modal.is-open { display: flex !important; }
.cnote-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 39, 79, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cnote-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    max-height: 100dvh;
    height: 100%;
    margin: 0;
    background: #d7dee8;
    border: 0;
    box-shadow: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    overscroll-behavior: contain;
}
.cnote-modal-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.cnote-modal-toolbar strong {
    display: block;
    color: #0f274f;
    font-size: 15px;
}
.cnote-modal-toolbar span {
    display: block;
    color: #64748b;
    font-size: 12px;
}
.cnote-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cnote-modal-scroll {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
    background: #cfd8e3;
    min-height: 0;
}
.cnote-report-pages {
    width: min(210mm, 100%);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}
.cnote-a4-cover {
    width: min(210mm, 100%);
    max-width: 100%;
    aspect-ratio: 210 / 297;
    margin: 0 auto 14px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #d8e1e7;
    box-shadow: 0 12px 32px rgba(15, 39, 79, .18);
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cnote-a4-cover .photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.cnote-a4-cover .header-shape {
    position: absolute;
    left: 0; top: 0;
    width: 67%; height: 18%;
    background: rgba(248,249,249,.98);
    clip-path: polygon(0 0,100% 0,77% 100%,0 100%);
    z-index: 2;
}
.cnote-a4-cover .header-shadow {
    position: absolute;
    top: 0; left: 48%;
    width: 24%; height: 18%;
    background: rgba(24,39,51,.28);
    clip-path: polygon(38% 0,100% 0,68% 100%,0 100%);
    z-index: 2;
}
.cnote-a4-cover .logo {
    position: absolute;
    top: 7mm; left: 8mm;
    display: flex;
    align-items: center;
    gap: 2.5mm;
    color: #1b2d3e;
    z-index: 5;
}
.cnote-a4-cover .logo img {
    width: 42mm;
    height: auto;
    display: block;
}
.cnote-a4-cover .logo-name {
    font-size: 8pt;
    font-weight: 800;
    letter-spacing: .6px;
}
.cnote-a4-cover .logo-sub {
    display: block;
    margin-top: 1mm;
    font-size: 5pt;
    color: #66747e;
    letter-spacing: .7px;
}
.cnote-a4-cover .panel-shadow {
    position: absolute;
    left: -1%; top: 17.2%;
    width: 61%; height: 42.5%;
    background: #052d55;
    clip-path: polygon(0 0,82% 0,100% 40%,82% 100%,0 100%);
    z-index: 3;
}
.cnote-a4-cover .panel {
    position: absolute;
    left: 0; top: 18%;
    width: 59%; height: 40.5%;
    padding: 12mm 13mm 8mm 10mm;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    background: #07568e;
    background-image: linear-gradient(135deg,#07568e 0%,#064477 55%,#052d5a 100%);
    clip-path: polygon(0 0,82% 0,100% 40%,82% 100%,0 100%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-a4-cover .panel-title {
    margin: 0;
    font-size: clamp(18px, 4.2vw, 28pt);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-a4-cover .panel-rule {
    width: 42%;
    height: 1.2px;
    background: rgba(255,255,255,.85);
    margin: 5mm 0 4mm;
}
.cnote-a4-cover .panel-sub {
    margin: 0 0 2mm;
    font-size: 8.5pt;
    line-height: 1.45;
    opacity: 1;
    max-width: 88%;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-a4-cover .slash {
    position: absolute;
    left: 8%;
    top: 52%;
    width: 38%;
    height: 14%;
    background: rgba(20,28,36,.55);
    clip-path: polygon(0 35%,100% 0,100% 65%,0 100%);
    z-index: 1;
}
.cnote-a4-cover .corner {
    position: absolute;
    right: 0; bottom: 0;
    width: 42%; height: 28%;
    background: #052d55;
    clip-path: polygon(35% 0,100% 0,100% 100%,0 100%);
    z-index: 3;
}
.cnote-a4-cover .regards {
    position: absolute;
    left: 8mm; bottom: 10mm;
    z-index: 5;
    color: #1b2d3e;
    font-size: 7.5pt;
    line-height: 1.45;
    background: rgba(255,255,255,.88);
    padding: 3mm 4mm;
    max-width: 78mm;
}
.cnote-page-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
}
.cnote-page-brand img {
    height: 28px;
    width: auto;
    display: block;
}
.cnote-page-brand span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #0f274f;
}
.cnote-chart-box {
    height: 200px;
    margin: 10px 14px 14px;
    position: relative;
}
.cnote-chart-box-sm { height: 180px; }
.cnote-a4-industry {
    width: min(210mm, 100%);
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    padding: 10mm 13mm 14mm;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 39, 79, .12);
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    color: #111;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cnote-a4-industry .cnote-page-brand {
    border: 0;
    padding: 0 0 6mm;
    margin: 0;
}
.cnote-a4-industry .topline {
    height: 4mm;
    background: #80b9dc;
    margin-bottom: 8mm;
}
.cnote-a4-industry h1 {
    font-size: clamp(22px, 5vw, 31pt);
    line-height: .96;
    margin: 0 0 10mm;
    font-weight: 900;
    letter-spacing: -.7px;
    color: #08091b;
}
.cnote-a4-industry h1 .year {
    display: block;
    color: #7db5d8;
    font-size: clamp(18px, 4vw, 29pt);
    margin-bottom: 2mm;
}
.cnote-a4-industry h1 .black { display: block; }
.cnote-a4-industry .label {
    display: inline-block;
    background: #80b9dc;
    color: #fff;
    font-size: 8pt;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 1mm 2.5mm;
    margin-bottom: 8mm;
}
.cnote-a4-industry .content {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 10mm;
}
.cnote-a4-industry .left p {
    font-size: 7.2pt;
    line-height: 1.35;
    margin: 0 0 3mm;
}
.cnote-a4-industry .left h3 {
    font-size: 8pt;
    margin: 8mm 0 2mm;
}
.cnote-a4-industry .survey {
    width: 100%;
    border-collapse: collapse;
    font-size: 7.2pt;
}
.cnote-a4-industry .survey td {
    padding: 1.6mm 0;
    border-bottom: 1px solid #222;
    vertical-align: top;
}
.cnote-a4-industry .survey td:last-child {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}
.cnote-a4-industry .note {
    font-size: 6.8pt !important;
    line-height: 1.35 !important;
    margin-top: 5mm !important;
}
.cnote-a4-industry .charttitle {
    text-align: center;
    font-size: 10pt;
    font-weight: bold;
    margin: 0 0 1mm;
}
.cnote-a4-industry .chartsub {
    text-align: center;
    font-size: 7pt;
    margin: 0 0 3mm;
}
.cnote-a4-industry .chartwrap { height: 76mm; position: relative; }
.cnote-a4-industry .about { font-size: 7pt; margin-top: 9mm; }
.cnote-a4-industry .about h3 {
    text-align: center;
    font-size: 9pt;
    margin: 0 0 2mm;
}
.cnote-a4-industry .about ul {
    padding-left: 5mm;
    line-height: 1.5;
    margin: 0;
}
.cnote-a4-industry .footerline {
    position: absolute;
    left: 13mm;
    right: 13mm;
    bottom: 13mm;
    height: 1.2mm;
    background: #80b9dc;
}
.cnote-a4-industry .footer {
    position: absolute;
    left: 13mm;
    right: 13mm;
    bottom: 5mm;
    display: flex;
    justify-content: space-between;
    font-size: 6.5pt;
    font-weight: bold;
}
.cnote-a4-analytics {
    width: min(210mm, 100%);
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    padding: 8mm 9mm 7mm;
    background: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 32px rgba(15, 39, 79, .12);
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    color: #17212b;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cnote-a4-analytics .cnote-page-brand {
    border: 0;
    padding: 0 0 3mm;
    margin: 0;
}
.cnote-a4-analytics .topmarks {
    height: 4mm;
    width: 42mm;
    border-top: 2mm solid #006da5;
    border-bottom: 1mm solid #24a8e5;
    border-radius: 3px;
    margin-bottom: 4mm;
}
.cnote-a4-analytics .brand {
    position: absolute;
    right: 9mm;
    top: 14mm;
    font-size: 8pt;
    font-weight: bold;
}
.cnote-a4-analytics .brand:after {
    content: none;
    display: none;
}
.cnote-a4-analytics > h1 {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    color: #0079bd;
    font-size: clamp(14px, 2.4vw, 18pt);
    font-weight: 700;
    margin: 0 0 1mm;
}
.cnote-a4-analytics .intro {
    font-size: 7.5pt;
    font-style: italic;
    margin: 0 0 5mm;
}
.cnote-a4-analytics .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
}
.cnote-a4-analytics .overview {
    grid-column: 1;
    grid-row: 1 / span 1;
    min-height: 53mm;
    padding: 2mm 2mm 1mm;
    border-left: 3mm solid #0784bd;
    background: #fafafa;
}
.cnote-a4-analytics .cnote-empty {
    margin: 4mm 2mm;
    color: #64748b;
    font-size: 8pt;
    font-style: italic;
}
.cnote-a4-analytics .overview h2 {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    font-size: 11pt;
    margin: 0 0 2mm;
    color: #0f274f;
}
.cnote-a4-analytics .overview p {
    font-size: 7.5pt;
    line-height: 1.4;
    margin: 0 0 2mm;
}
.cnote-a4-analytics .timeline {
    grid-column: 2;
    background: #fafafa;
    padding: 2mm 3mm 1mm;
    border-top: 1px solid #bbb;
    min-height: 53mm;
}
.cnote-a4-analytics .barhead {
    background: #0077a8;
    color: #fff;
    text-align: center;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    font-weight: bold;
    font-size: 10pt;
    padding: 2mm;
    margin: 0 0 2mm;
}
.cnote-a4-analytics .steps {
    height: 42mm;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    border-bottom: 3mm solid #0077a8;
    gap: 2mm;
}
.cnote-a4-analytics .step {
    width: 24%;
    text-align: center;
    border-top: 2px solid #13a8e8;
    border-left: 2px solid #13a8e8;
    min-height: 16mm;
    font-size: 6.5pt;
    padding: 1mm;
    background: #fff;
    overflow: hidden;
}
.cnote-a4-analytics .step:nth-child(2) { min-height: 23mm; }
.cnote-a4-analytics .step:nth-child(3) { min-height: 30mm; }
.cnote-a4-analytics .step:nth-child(4) { min-height: 37mm; }
.cnote-a4-analytics .chart {
    background: #fafafa;
    padding: 1.5mm 2mm 2mm;
    border-bottom: 1px solid #bbb;
    min-height: 58mm;
}
.cnote-a4-analytics .chart canvas {
    width: 100% !important;
    height: 43mm !important;
}
.cnote-a4-analytics .full { grid-column: 1 / -1; min-height: 57mm; }
.cnote-a4-analytics .full canvas { height: 43mm !important; }
@media (max-width: 900px) {
    .cnote-a4-analytics .grid { grid-template-columns: 1fr; }
    .cnote-a4-analytics .overview,
    .cnote-a4-analytics .timeline,
    .cnote-a4-analytics .full { grid-column: 1; }
}
.cnote-study-notes { padding-bottom: 12px; }
.cnote-study-notes h2 {
    margin: 12px 18px 8px;
    color: #0f274f;
    font-size: 22px;
}
.cnote-study-notes .cnote-study-table {
    margin: 0 18px 12px;
    width: calc(100% - 36px);
}
.cnote-a4-details {
    width: min(210mm, 100%);
    max-width: 100%;
    min-height: 297mm;
    height: 297mm;
    margin: 0 auto;
    background: #fff;
    padding: 7mm 11mm 18mm;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 32px rgba(15, 39, 79, .12);
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
    color: #111;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cnote-a4-details .cnote-page-brand {
    border: 0;
    padding: 0 0 2.5mm;
    margin: 0;
    flex: 0 0 auto;
}
.cnote-a4-details .cnote-page-brand img {
    height: 22px;
}
.cnote-a4-details .topline {
    height: 3mm;
    background: #80b9dc;
    margin: 0 0 3mm;
    flex: 0 0 auto;
}
.cnote-a4-details > h1 {
    font-size: clamp(18px, 4vw, 26pt);
    line-height: 1.1;
    margin: 0 0 2.5mm;
    font-weight: 900;
    letter-spacing: -.4px;
    color: #08091b;
    flex: 0 0 auto;
    overflow: visible;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-a4-details > h1 .year {
    display: block;
    color: #7db5d8;
    font-size: clamp(13px, 2.8vw, 16pt);
    margin-bottom: 1mm;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.2;
}
.cnote-a4-details > h1 .black {
    display: block;
    line-height: 1.08;
    white-space: nowrap;
}
.cnote-a4-details > .label {
    display: inline-block;
    background: #80b9dc;
    color: #fff;
    font-size: 7.5pt;
    font-weight: bold;
    letter-spacing: 1.6px;
    padding: 1.2mm 2.5mm;
    margin: 0 0 4mm;
    flex: 0 0 auto;
}
.cnote-a4-details .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10mm;
    flex: 0 1 auto;
    min-height: 0;
    align-items: start;
    align-content: start;
    padding-bottom: 2mm;
}
.cnote-a4-details .content > .left,
.cnote-a4-details .content > .right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
}
.cnote-a4-details .left h3,
.cnote-a4-details .right .charttitle {
    font-size: 9.5pt;
    margin: 0 0 2.5mm;
    color: #08091b;
    letter-spacing: .04em;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-a4-details .left h3 { margin-top: 6mm; }
.cnote-a4-details .left h3:first-child { margin-top: 0; }
.cnote-a4-details .right .charttitle { margin-top: 6mm; text-align: left; }
.cnote-a4-details .right .charttitle:first-child { margin-top: 0; }
.cnote-a4-details .survey {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 9pt;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
.cnote-a4-details .survey td {
    padding: 3.2mm 0;
    border-bottom: 1px solid #222;
    vertical-align: top;
    line-height: 1.45;
}
.cnote-a4-details .survey td:first-child {
    width: 36%;
    padding-right: 3mm;
    color: #334155;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
}
.cnote-a4-details .survey td:last-child {
    width: 64%;
    text-align: left;
    font-weight: 700;
    color: #08091b;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: visible;
}
.cnote-a4-details .right .survey td:first-child { width: 70%; }
.cnote-a4-details .right .survey td:last-child {
    width: 30%;
    text-align: right;
    white-space: normal;
    word-break: break-word;
}
.cnote-a4-details .survey td strong {
    font-weight: 700;
    color: #08091b;
}
.cnote-a4-details .survey .muted {
    color: #64748b;
    font-weight: 500;
    font-size: 8pt;
}
.cnote-a4-details .cnote-doc-name {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}
.cnote-a4-details .cnote-doc-name .md-file-type-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 20px;
    margin-top: 1px;
}
.cnote-a4-details .cnote-doc-name span {
    min-width: 0;
    word-break: break-word;
}
.cnote-a4-details .survey.counts {
    margin-top: 5mm;
    padding-top: 0;
}
.cnote-a4-details .note {
    font-size: 7.5pt !important;
    line-height: 1.4 !important;
    margin-top: 4mm !important;
    margin-bottom: 0 !important;
    color: #445066;
}
.cnote-a4-details .footerline {
    position: absolute;
    left: 11mm;
    right: 11mm;
    bottom: 11mm;
    height: 1.2mm;
    background: #80b9dc;
}
.cnote-a4-details .footer {
    position: absolute;
    left: 11mm;
    right: 11mm;
    bottom: 4mm;
    display: flex;
    justify-content: space-between;
    font-size: 6.5pt;
    font-weight: bold;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}
@media (max-width: 900px) {
    .cnote-a4-details {
        height: auto;
        min-height: 297mm;
    }
    .cnote-a4-details .content { grid-template-columns: 1fr; }
    .cnote-a4-details .content > .left,
    .cnote-a4-details .content > .right { height: auto; }
    .cnote-a4-details .survey.counts { margin-top: 5mm; }
}
@media (max-width: 900px) {
    .cnote-a4-industry .content { grid-template-columns: 1fr; }
}
.cnote-regards-foot {
    display: block !important;
    margin: 12px 22px 18px;
    padding: 14px 0 0;
    border-top: 2px solid #93c5fd;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
}
.cnote-share-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 31000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
}
.cnote-share-modal[hidden] { display: none !important; }
.cnote-share-card {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: min(86vh, 860px);
    overflow: auto;
    background: #fff;
    border: 1px solid #d9e1ec;
    box-shadow: 0 18px 48px rgba(15, 39, 79, .25);
    padding: 20px 22px;
    display: grid;
    gap: 14px;
    margin: auto;
}
.cnote-share-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.cnote-share-head h3 { margin: 0; color: #0f274f; }
.cnote-share-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 10px 14px;
    border: 1px solid #c9d5e6;
    background: #f7f9fc;
    box-sizing: border-box;
}
.cnote-share-search-icon {
    display: inline-flex;
    color: #64748b;
    flex: 0 0 auto;
}
.cnote-share-search-icon svg {
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.cnote-share-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f274f;
    font: inherit;
    font-size: 14px;
}
.cnote-share-search input::placeholder { color: #94a3b8; }
.cnote-share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cnote-share-grid fieldset {
    margin: 0;
    border: 1px solid #e2e8f0;
    padding: 12px;
    display: grid;
    gap: 8px;
    max-height: 340px;
    overflow: auto;
    align-content: start;
}
.cnote-share-grid legend {
    padding: 0 6px;
    color: #1b4689;
    font-weight: 700;
}
.cnote-share-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    cursor: pointer;
}
.cnote-share-row[hidden] { display: none !important; }
.cnote-share-row strong { display: block; color: #0f274f; font-size: 13px; }
.cnote-share-row em { display: block; color: #64748b; font-style: normal; font-size: 12px; }
.cnote-share-empty { font-size: 12px; }
.cnote-share-empty[hidden] { display: none !important; }
.cnote-share-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
@media (max-width: 860px) {
    .cnote-share-grid { grid-template-columns: 1fr; }
    .cnote-share-search { width: 100%; }
    .cnote-a4-cover .logo img { width: 32mm; }
    .cnote-modal-toolbar { flex-direction: column; align-items: flex-start; }
}
@media print {
    .cnote-modal-toolbar,
    .cnote-share-modal,
    .cnote-reports-board { display: none !important; }
    .cnote-modal,
    .cnote-modal-card,
    .cnote-modal-scroll {
        position: static !important;
        max-height: none !important;
        box-shadow: none !important;
        background: #fff !important;
        padding: 0 !important;
        display: block !important;
    }
}

.page:has(.crm-board) {
    padding: 0 0 32px;
}
.crm-board {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.crm-hero {
    width: 100%;
    min-height: clamp(360px, 48vh, 520px);
    padding: 72px 24px 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .48) 0%, rgba(15, 23, 42, .58) 45%, rgba(15, 23, 42, .72) 100%),
        var(--crm-hero) center 32% / cover no-repeat;
    background-color: #0f172a;
}
.crm-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.crm-hero h1 {
    margin: 0;
    max-width: 860px;
    color: #fff;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.crm-hero p:last-child {
    max-width: 640px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.55;
}
.crm-searchbar {
    position: relative;
    z-index: 2;
    width: min(860px, calc(100% - 32px));
    margin: -28px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4f5f7;
    border: 1px solid #e6e8ee;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    padding: 8px 8px 8px 16px;
    color: #64748b;
}
.crm-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 15px;
    outline: none;
}
.crm-searchbar input::placeholder { color: #94a3b8; }
.crm-searchbar button {
    flex: 0 0 auto;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: #1e293b;
    color: #fff;
    padding: 0 18px;
    font-weight: 700;
    cursor: pointer;
}
.crm-searchbar button:hover { background: #0f172a; }
.crm-searchbar button:disabled {
    opacity: .72;
    cursor: wait;
}
.crm-live-status {
    width: min(860px, calc(100% - 32px));
    margin: 10px auto 0;
    color: #3b6ea5;
    font-size: 13px;
    font-weight: 600;
}
.crm-board.is-searching .crm-table-wrap {
    opacity: .72;
    pointer-events: none;
}
.crm-sheet {
    width: min(1480px, calc(100% - 16px));
    margin: 28px auto 8px;
    display: grid;
    gap: 18px;
}
.crm-api,
.crm-results {
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-api { padding: 18px 18px 14px; }
.crm-api-head,
.crm-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.crm-api h2,
.crm-results h2 {
    margin: 0;
    color: #3b6ea5;
    font-size: 20px;
    font-weight: 650;
}
.crm-api-head p,
.crm-api-note {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}
.crm-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.crm-pill.is-on {
    background: #e8f7ee;
    color: #15803d;
}
.crm-api-form {
    display: grid;
    grid-template-columns: 1.2fr .8fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}
.crm-api-form label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
.crm-api-form input {
    width: 100%;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
}
.crm-api-form input:focus {
    outline: 2px solid rgba(59, 110, 165, .25);
    border-color: #3b6ea5;
}
.crm-api-form button {
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: #1e293b;
    color: #fff;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
}
.crm-api-form button:hover { background: #0f172a; }
.crm-results {
    padding: 0;
    overflow: hidden;
    border-radius: 0;
}
.crm-results.md-board {
    border-radius: 0;
}
.crm-results .md-board-head {
    padding: 16px 18px 12px;
    border-bottom: 0;
}
.crm-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    margin-bottom: 0;
}
.crm-results-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.crm-results-title h2 { margin: 0; }
.crm-results-title .muted {
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}
.crm-results-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}
.crm-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.crm-tool-btn svg {
    flex: 0 0 auto;
}
.crm-records-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 0;
    background: #1b4689;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.crm-panel-animate {
    animation: crmPanelIn .55s cubic-bezier(.2, .8, .2, 1) both;
}
.crm-hero {
    animation: crmHeroIn .7s cubic-bezier(.2, .8, .2, 1) both;
}
.crm-searchbar {
    animation: crmPanelIn .55s cubic-bezier(.2, .8, .2, 1) .08s both;
}
@keyframes crmHeroIn {
    from { opacity: 0; transform: translateY(-12px) scale(1.01); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes crmPanelIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.crm-records-top {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 0;
}
.crm-records-top-copy { min-width: 0; }
.crm-records-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.crm-records-title-row .crm-back-btn {
    margin-left: auto;
}
.crm-records-top h1 {
    margin: 0;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.crm-back-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
}
.crm-records-top p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}
.crm-kicker.is-dark {
    color: #1b4689;
}
.crm-board.is-records-page .crm-sheet {
    width: min(1180px, calc(100% - 32px));
    margin-top: 18px;
}
.crm-table-wrap {
    overflow-x: auto;
}
.crm-table.md-table th,
.crm-table.md-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf3;
    vertical-align: middle;
    font-size: 13px;
    color: #1f2937;
}
.crm-table.md-table thead th {
    background: #f1f3f6;
    color: #111827;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.crm-table.md-table tbody tr:hover { background: #f8fafc; }
@keyframes crmRowIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.crm-table tbody tr.crm-row-animate {
    animation: crmRowIn .45s cubic-bezier(.2, .8, .2, 1) both;
}
.crm-table tbody tr.crm-row-animate:nth-child(1) { animation-delay: .02s; }
.crm-table tbody tr.crm-row-animate:nth-child(2) { animation-delay: .06s; }
.crm-table tbody tr.crm-row-animate:nth-child(3) { animation-delay: .10s; }
.crm-table tbody tr.crm-row-animate:nth-child(4) { animation-delay: .14s; }
.crm-table tbody tr.crm-row-animate:nth-child(5) { animation-delay: .18s; }
.crm-table tbody tr.crm-row-animate:nth-child(6) { animation-delay: .22s; }
.crm-table tbody tr.crm-row-animate:nth-child(7) { animation-delay: .26s; }
.crm-table tbody tr.crm-row-animate:nth-child(8) { animation-delay: .30s; }
.crm-save-btn.is-saved {
    color: #15803d;
    border-color: #bbf7d0;
    background: #f0fdf4;
    cursor: default;
}
.crm-records {
    margin-top: 4px;
}
.crm-table th:nth-child(2),
.crm-table td:nth-child(2) {
    width: 72px;
    text-align: center;
}
.crm-photo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    display: inline-block;
    background: #e8eef6;
}
.crm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    background: #e8eef6;
}
.crm-avatar.is-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e3a5f;
    font-size: 12px;
    font-weight: 800;
}
.crm-desc,
.crm-location,
.crm-near {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #334155;
}
.crm-desc { max-width: 280px; }
.crm-location,
.crm-near { max-width: 260px; }
.crm-phone {
    display: inline-block;
    max-width: none;
    color: #334155;
    white-space: nowrap;
    overflow: visible;
}
.crm-table th:nth-child(4),
.crm-table td:nth-child(4) {
    white-space: nowrap;
}
.crm-location-block {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.crm-location-link {
    display: grid;
    gap: 4px;
    color: #206bc4;
    font-weight: 600;
}
.crm-location-link:hover .crm-location,
.crm-location-link:hover .crm-coords { text-decoration: underline; }
.crm-coords {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.crm-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.crm-actions .dir-icon,
.crm-actions .crm-map-btn {
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}
.crm-map-btn {
    color: #0f766e;
    border-color: #0f766e;
    background: #fff;
    text-decoration: none;
}
.crm-map-btn:hover {
    color: #fff;
    background: #0f766e;
    border-color: #0f766e;
}
.crm-view-dialog {
    border: 0;
    padding: 0;
    border-radius: 0;
    max-width: min(980px, calc(100vw - 16px));
    width: 100%;
    max-height: min(92vh, 920px);
    background: transparent;
    overflow: hidden;
}
.crm-view-dialog::backdrop {
    background: rgba(15, 23, 42, .52);
}
.crm-view-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 0;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
    overflow: hidden;
    max-height: min(92vh, 920px);
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.crm-view-head,
.crm-view-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    flex: 0 0 auto;
}
.crm-view-head {
    border-bottom: 1px solid #e8edf3;
}
.crm-view-title-wrap {
    min-width: 0;
}
.crm-view-kicker {
    margin: 0 0 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.crm-view-head h3 {
    margin: 0;
    font-size: 18px;
    color: #111827;
    line-height: 1.3;
}
.crm-view-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: #f1f5f9;
    color: #334155;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.crm-view-body {
    padding: 12px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    touch-action: pan-y;
}
.crm-view-top {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.1fr);
    gap: 14px;
    align-items: start;
}
.crm-view-media {
    position: relative;
    min-height: 200px;
    background:
        linear-gradient(145deg, rgba(32, 107, 196, .12), rgba(15, 23, 42, .04)),
        #e8eef6;
    border: 1px solid #e6ebf2;
    overflow: hidden;
}
.crm-view-photo {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 220px;
    object-fit: cover;
    display: block;
    background: #e8eef6;
}
.crm-view-photo-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #1e3a5f;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: .04em;
}
.crm-view-facts { min-width: 0; }
.crm-view-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.crm-view-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    background: #e8f1fb;
    color: #1e4f8c;
    border: 1px solid #c9ddf5;
    font-size: 12px;
    font-weight: 700;
}
.crm-view-badge.is-soft {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}
.crm-view-grid {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}
.crm-view-grid dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.crm-view-grid dd {
    margin: 4px 0 0;
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}
.crm-view-grid dd a {
    color: #206bc4;
    font-weight: 600;
}
.crm-view-analysis {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e8edf3;
}
.crm-view-analysis-head h4 {
    margin: 0;
    color: #111827;
    font-size: 15px;
}
.crm-view-analysis-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
.crm-view-charts {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.crm-view-chart-card {
    border: 1px solid #e6ebf2;
    background: #fbfcfe;
    padding: 8px 8px 0;
}
.crm-view-chart-card h5 {
    margin: 0 0 2px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.crm-view-chart { min-height: 270px; }
.crm-view-foot {
    border-top: 1px solid #e8edf3;
    justify-content: flex-end;
}
@media (max-width: 860px) {
    .crm-view-dialog {
        max-width: calc(100vw - 12px);
        max-height: 92vh;
        margin: auto;
    }
    .crm-view-card {
        max-height: 92vh;
    }
    .crm-view-top,
    .crm-view-charts,
    .crm-view-grid {
        grid-template-columns: 1fr;
    }
    .crm-view-media,
    .crm-view-photo {
        min-height: 160px;
        max-height: 180px;
    }
    .crm-view-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 18px;
    }
    .crm-view-chart { min-height: 220px; }
}
html.theme-dark .crm-searchbar {
    background: #241f33;
    border-color: #3a334c;
    color: #c4bdd4;
}
html.theme-dark .crm-searchbar input { color: #f8f5ff; }
html.theme-dark .crm-live-status { color: #93c5fd; }
html.theme-dark .crm-results {
    background: #1c1826;
    border-color: #322c40;
}
html.theme-dark .crm-results h2 { color: #e7e1f2; }
html.theme-dark .crm-table.md-table th,
html.theme-dark .crm-table.md-table td {
    border-bottom-color: #322c40;
    color: #e7e1f2;
}
html.theme-dark .crm-table.md-table thead th { background: #241f33; color: #c4bdd4; }
html.theme-dark .crm-table.md-table tbody tr:hover { background: #241f33; }
html.theme-dark .crm-desc,
html.theme-dark .crm-location,
html.theme-dark .crm-near,
html.theme-dark .crm-phone,
html.theme-dark .crm-coords,
html.theme-dark .crm-results-tools { color: #b7afc8; }
html.theme-dark .crm-location-link { color: #74c0fc; }
html.theme-dark .crm-avatar.is-letter { background: #2a3348; color: #dbe7f5; }
html.theme-dark .crm-view-card { background: #1c1826; border-color: #322c40; }
html.theme-dark .crm-view-head,
html.theme-dark .crm-view-foot,
html.theme-dark .crm-view-analysis,
html.theme-dark .crm-view-media,
html.theme-dark .crm-view-chart-card { border-color: #322c40; }
html.theme-dark .crm-view-head h3,
html.theme-dark .crm-view-analysis-head h4,
html.theme-dark .crm-view-chart-card h5,
html.theme-dark .crm-view-grid dd { color: #f8f5ff; }
html.theme-dark .crm-view-kicker,
html.theme-dark .crm-view-analysis-head p { color: #b7afc8; }
html.theme-dark .crm-view-close { background: #2a2438; color: #e7e1f2; }
html.theme-dark .crm-view-chart-card { background: #241f33; }
html.theme-dark .crm-view-badge { background: #243247; color: #93c5fd; border-color: #334155; }
html.theme-dark .crm-view-badge.is-soft { background: #2a2438; color: #c4bdd4; border-color: #3a334c; }
@media (max-width: 800px) {
    .crm-results-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .crm-results-tools {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        flex-wrap: wrap;
    }
    .crm-records-top {
        width: calc(100% - 24px);
    }
    .crm-records-title-row {
        gap: 10px;
    }
    .crm-board.is-records-page .crm-sheet {
        width: calc(100% - 24px);
    }
    .crm-hero {
        min-height: clamp(280px, 42vh, 400px);
        padding: 48px 16px 80px;
        background-position: center 28%;
    }
    .crm-actions { width: 100%; }
}
@media (min-width: 1100px) {
    .crm-hero {
        min-height: 480px;
        background-position: center 30%;
    }
}
@media (max-width: 767px) {
    .crm-results.md-board,
    .crm-records.md-board {
        padding: 12px;
    }
    .crm-results-tools {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .crm-results-tools .muted {
        width: 100%;
        margin: 0 0 2px;
    }
    .crm-table-wrap {
        overflow: visible;
    }
    .crm-board table.crm-table.md-table,
    .crm-board table.crm-table.md-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .crm-board table.crm-table.md-table thead {
        display: none;
    }
    .crm-board table.crm-table.md-table tbody tr {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "photo name"
            "desc desc"
            "phone phone"
            "loc loc"
            "near near"
            "actions actions";
        gap: 10px 12px;
        margin: 0 0 12px;
        padding: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 0;
        background: #fff;
        align-items: start;
    }
    .crm-board table.crm-table.md-table tbody tr[data-crm-empty],
    .crm-board table.crm-table.md-table tbody tr:has(td[colspan]) {
        display: block;
        padding: 18px 14px;
        text-align: center;
        color: #64748b;
    }
    .crm-board table.crm-table.md-table tbody tr[data-crm-empty] td,
    .crm-board table.crm-table.md-table tbody tr:has(td[colspan]) td {
        display: block;
        padding: 0;
        border: 0;
        text-align: center;
        justify-content: center;
    }
    .crm-board table.crm-table.md-table tbody tr[data-crm-empty] td::before,
    .crm-board table.crm-table.md-table tbody tr:has(td[colspan]) td::before {
        content: none;
    }
    .crm-board table.crm-table.md-table tbody td {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        border-bottom: 0;
        justify-content: stretch;
        align-items: start;
        text-align: left;
        white-space: normal;
    }
    .crm-board table.crm-table.md-table tbody td::before {
        content: attr(data-label);
        display: block;
        flex: none;
        width: auto;
        margin: 0;
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        line-height: 1.2;
    }
    .crm-board table.crm-table.md-table tbody td.lead-name-cell {
        grid-area: name;
        align-self: center;
    }
    .crm-board table.crm-table.md-table tbody td.lead-name-cell::before {
        content: none;
    }
    .crm-board table.crm-table.md-table tbody td:nth-child(2) {
        grid-area: photo;
        width: 64px;
        text-align: left;
    }
    .crm-board table.crm-table.md-table tbody td:nth-child(2)::before {
        content: none;
    }
    .crm-board table.crm-table.md-table tbody td:nth-child(3) { grid-area: desc; }
    .crm-board table.crm-table.md-table tbody td:nth-child(4) { grid-area: phone; }
    .crm-board table.crm-table.md-table tbody td:nth-child(5) { grid-area: loc; }
    .crm-board table.crm-table.md-table tbody td:nth-child(6) { grid-area: near; }
    .crm-board table.crm-table.md-table tbody td:nth-child(7) { grid-area: actions; }
    .crm-board table.crm-table.md-table tbody td:nth-child(7)::before {
        content: none;
    }
    .crm-board .crm-photo {
        width: 64px;
        height: 64px;
        border-radius: 0;
        display: block;
    }
    .crm-board .crm-avatar.is-letter {
        width: 64px;
        height: 64px;
        border-radius: 0;
        font-size: 16px;
    }
    .crm-board .table-name-link,
    .crm-board .table-name-link.is-plain {
        display: block;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;
        color: #1b4689;
        word-break: break-word;
    }
    .crm-board .crm-desc,
    .crm-board .crm-location,
    .crm-board .crm-near {
        max-width: none;
        -webkit-line-clamp: 4;
        color: #334155;
        font-size: 13px;
        line-height: 1.45;
        word-break: break-word;
    }
    .crm-board .crm-phone {
        white-space: normal;
        word-break: break-word;
        font-weight: 700;
        color: #0f172a;
        font-size: 14px;
    }
    .crm-board .crm-location-block,
    .crm-board .crm-location-link {
        width: 100%;
    }
    .crm-board .crm-coords {
        font-size: 12px;
    }
    .crm-board .crm-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 4px;
        border-top: 1px solid #eef2f7;
        margin-top: 2px;
    }
    .crm-board .crm-actions .dir-icon,
    .crm-board .crm-actions .crm-map-btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 36px;
        justify-content: center;
    }
}

/* Send feedback in shared sidebar navigation */
.side-nav .sidebar-feedback,
#app-sidebar .side-nav .sidebar-feedback {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.side-nav .sidebar-feedback:hover,
#app-sidebar .side-nav .sidebar-feedback:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.side-nav .sidebar-feedback svg,
#app-sidebar .side-nav .sidebar-feedback svg {
    flex: 0 0 auto;
    color: #e8eef8;
    stroke: currentColor;
}
html.sidebar-collapsed .side-nav .sidebar-feedback span,
html.sidebar-collapsed #app-sidebar .side-nav .sidebar-feedback span {
    display: none !important;
}
html.sidebar-collapsed .side-nav .sidebar-feedback,
html.sidebar-collapsed #app-sidebar .side-nav .sidebar-feedback {
    justify-content: center;
    padding: 10px 0;
}

/* Send feedback (topbar + Word ribbon editor) */
.feedback-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #c8d2e0;
    border-radius: 0;
    background: #eef2f7;
    color: #1b4689;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.feedback-chip svg {
    flex: 0 0 auto;
    color: #2563eb;
}
.feedback-chip span { color: #1b4689; }
.feedback-chip:hover {
    color: #0f2f63;
    background: #e4ebf4;
    border-color: #aebcd0;
}
.feedback-chip:hover svg { color: #1d4ed8; }
.feedback-docs-dialog {
    border: 0;
    padding: 0;
    margin: auto;
    width: min(1120px, calc(100vw - 32px));
    max-width: min(1120px, calc(100vw - 32px));
    min-width: min(720px, calc(100vw - 24px));
    background: transparent;
    box-sizing: border-box;
}
.feedback-docs-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.feedback-docs-card {
    width: 100%;
    background: #fff;
    border: 1px solid #d5dbe6;
    border-radius: 0;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
    box-sizing: border-box;
}
.feedback-docs-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #f3f6fb;
    border-bottom: 1px solid #dbe3ef;
}
.feedback-docs-titles { min-width: 0; flex: 1 1 auto; }
.feedback-docs-subject {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
}
.feedback-docs-meta {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feedback-docs-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.feedback-docs-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: #1b4689;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.feedback-docs-send:disabled { opacity: .7; cursor: wait; }
.feedback-docs-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: #e8eef6;
    color: #334155;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.feedback-docs-editor {
    min-height: 0;
    overflow: auto;
    background: #eef2f7;
}
.feedback-docs-editor .word-editor {
    width: 100%;
    border: 0;
    box-shadow: none;
}
.feedback-docs-editor .word-topbar-signin,
.feedback-docs-editor .word-tabs-share {
    display: none;
}
.feedback-docs-editor .word-editor-canvas {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-height: 420px;
    margin: 18px 14px 22px;
    padding: 36px 40px;
    background: #fff;
    box-sizing: border-box;
}
.feedback-docs-editor .word-editor-save {
    display: none;
}
.feedback-docs-status {
    margin: 0;
    padding: 8px 16px 12px;
    background: #fff;
    border-top: 1px solid #e8edf3;
    font-size: 13px;
    font-weight: 600;
    color: #1b4689;
}
.feedback-docs-status.is-error { color: #b91c1c; }
.feedback-docs-status.is-ok { color: #15803d; }
.audit-desk,
.audit-desk input,
.audit-desk select,
.audit-desk button,
.audit-desk textarea,
.audit-desk table,
.audit-desk th,
.audit-desk td {
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
}
.audit-desk .lead-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.audit-hours-wrap { overflow: auto; }
/* Excel-style sheets: same column colours as the Audit workbooks */
.audit-desk .dir-board {
    border-radius: 0;
    overflow: visible;
}
.audit-desk .dir-board > .table-wrap,
.audit-desk .table-wrap.audit-hours-wrap {
    border-radius: 0;
    border: 1px solid #b4b4b4;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
table.audit-xlsx {
    border-collapse: collapse;
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}
table.audit-xlsx th,
table.audit-xlsx td {
    border: 1px solid #b4b4b4 !important;
    padding: 5px 7px !important;
    vertical-align: middle;
    font-size: 12px;
    white-space: nowrap;
}
/* No / S/N — keep very narrow */
table.audit-xlsx th.xlsx-no,
table.audit-xlsx td.xlsx-no {
    width: 34px !important;
    min-width: 30px !important;
    max-width: 40px !important;
    padding: 4px 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
}
table.audit-xlsx th.xlsx-no.dir-check,
table.audit-xlsx td.xlsx-no.dir-check {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 32px !important;
    padding: 4px 2px !important;
}
/* Client / company name — readable, wraps gently */
table.audit-xlsx th.xlsx-client,
table.audit-xlsx td.xlsx-client {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    min-width: 150px !important;
    max-width: 200px !important;
    line-height: 1.25;
}
table.audit-xlsx th.xlsx-id,
table.audit-xlsx th.xlsx-team,
table.audit-xlsx td.xlsx-id,
table.audit-xlsx td.xlsx-team-cell,
table.audit-xlsx td.xlsx-team {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100px !important;
    min-width: 64px;
    line-height: 1.25;
}
table.audit-xlsx th.xlsx-tin,
table.audit-xlsx td.xlsx-tin {
    white-space: nowrap !important;
    max-width: 88px !important;
    min-width: 72px;
    padding: 5px 6px !important;
}
table.audit-xlsx th.xlsx-fee,
table.audit-xlsx th.xlsx-prior,
table.audit-xlsx th.xlsx-money,
table.audit-xlsx th.xlsx-total,
table.audit-xlsx td.xlsx-fee,
table.audit-xlsx td.xlsx-prior,
table.audit-xlsx td.xlsx-money,
table.audit-xlsx td.xlsx-total {
    white-space: normal !important;
    max-width: 86px !important;
    min-width: 64px;
    line-height: 1.2;
}
/* Staff hour columns — squeeze + wrap header */
table.audit-xlsx th.xlsx-staff,
table.audit-xlsx td.xlsx-hrs {
    white-space: normal !important;
    width: 54px !important;
    min-width: 48px !important;
    max-width: 58px !important;
    padding: 4px 3px !important;
    text-align: center !important;
    line-height: 1.15;
    font-size: 11px !important;
}
/* All header labels sit on one level */
table.audit-xlsx thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    text-transform: none !important;
    border-bottom: 1px solid #7f7f7f !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1.2 !important;
    height: auto;
}
table.audit-xlsx tbody td {
    vertical-align: middle !important;
}
table.audit-xlsx tbody tr:nth-child(even) td.xlsx-id { background: #fafafa; }
table.audit-xlsx tbody tr:hover td { filter: brightness(.97); }
/* Beat table.data.dir-table thead th { background:#e8ebef !important } */
table.data.dir-table.audit-xlsx thead th.xlsx-no,
table.data.dir-table.audit-xlsx thead th.xlsx-client,
table.data.dir-table.audit-xlsx thead th.xlsx-id,
table.data.dir-table.audit-xlsx thead th.xlsx-tin { background: #0070C0 !important; color: #fff !important; }
table.data.dir-table.audit-xlsx thead th.xlsx-fee { background: #FFC000 !important; color: #1d2433 !important; }
table.data.dir-table.audit-xlsx thead th.xlsx-prior { background: #D9E2F3 !important; color: #1d2433 !important; }
table.data.dir-table.audit-xlsx thead th.xlsx-money { background: #ED7D31 !important; color: #fff !important; }
table.data.dir-table.audit-xlsx thead th.xlsx-team,
table.data.dir-table.audit-xlsx thead th.xlsx-staff,
table.data.dir-table.audit-xlsx thead th.xlsx-step { background: #1F3864 !important; color: #fff !important; }
table.data.dir-table.audit-xlsx thead th.xlsx-total { background: #548235 !important; color: #fff !important; }
table.data.dir-table.audit-xlsx thead th.xlsx-no,
table.data.dir-table.audit-xlsx thead th.xlsx-client,
table.data.dir-table.audit-xlsx thead th.xlsx-id,
table.data.dir-table.audit-xlsx thead th.xlsx-tin,
table.data.dir-table.audit-xlsx thead th.xlsx-team,
table.data.dir-table.audit-xlsx thead th.xlsx-staff,
table.data.dir-table.audit-xlsx thead th.xlsx-fee,
table.data.dir-table.audit-xlsx thead th.xlsx-prior,
table.data.dir-table.audit-xlsx thead th.xlsx-money,
table.data.dir-table.audit-xlsx thead th.xlsx-total {
    white-space: normal !important;
    vertical-align: middle !important;
    text-align: center !important;
}
table.audit-xlsx td.xlsx-no,
table.audit-xlsx td.xlsx-client,
table.audit-xlsx td.xlsx-id { background: #fff; color: #1d2433; }
table.audit-xlsx td.xlsx-tin { background: #F3F6FB !important; color: #1d2433; font-variant-numeric: tabular-nums; }
table.audit-xlsx td.xlsx-fee { background: #FFF2CC !important; color: #1d2433; font-weight: 700; }
table.audit-xlsx td.xlsx-prior { background: #DDEBF7 !important; color: #1d2433; }
table.audit-xlsx td.xlsx-money { background: #FCE4D6 !important; color: #1d2433; }
table.audit-xlsx td.xlsx-pending { background: #F8CBAD !important; color: #9a3412; font-weight: 700; }
table.audit-xlsx td.xlsx-team,
table.audit-xlsx td.xlsx-team-cell,
table.audit-xlsx td.xlsx-hrs { background: #D6E3F0 !important; color: #1d2433; }
table.audit-xlsx td.xlsx-total { background: #C6EFCE !important; color: #006100; font-weight: 700; }
table.audit-xlsx td.xlsx-step { background: #E2EFDA !important; }
table.audit-xlsx .table-name-link { color: #C00000; font-weight: 700; }
table.audit-xlsx .table-name-link:hover { text-decoration: underline; }
.audit-desk .audit-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-start;
    margin-left: 0;
}
.audit-desk .audit-row-actions .dir-icon.dir-icon-view {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 34px;
    padding: 6px 12px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #206bc4 !important;
    border-radius: 6px;
    background: #fff !important;
    color: #206bc4 !important;
    box-shadow: none;
    font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
}
.audit-desk .audit-row-actions .dir-icon.dir-icon-view .ri,
.audit-desk .audit-row-actions .dir-icon.dir-icon-view svg {
    width: 15px;
    height: 15px;
    color: inherit;
    stroke: currentColor;
}
.audit-desk .audit-row-actions .dir-icon.dir-icon-view:hover {
    color: #fff !important;
    background: #206bc4 !important;
    border-color: #206bc4 !important;
}
.audit-hours th.audit-th-id { background: #0070C0; color: #fff; }
.audit-hours th.audit-th-fee { background: #FFC000; color: #1d2433; }
.audit-hours th.audit-th-team { background: #1F3864; color: #fff; }
.audit-hours th.audit-th-total { background: #548235; color: #fff; }
.audit-stepper { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 18px 0; }
.audit-step-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e4e7ee; background: #f8f9fb; font-size: 13px; }
.audit-step-chip b { width: 22px; height: 22px; display: grid; place-items: center; background: #e2e8f0; }
.audit-step-chip.is-on { border-color: #93c5fd; background: #eff6ff; }
.audit-step-chip.is-done { border-color: #86efac; background: #f0fdf4; }
.audit-gate { margin: 12px 18px 0; padding: 10px 12px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }
.audit-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px 18px; }
.audit-step { border: 1px solid #e4e7ee; background: #fff; padding: 14px; }
.audit-step.is-locked { opacity: .55; }
.audit-step h3 { margin-bottom: 10px; }
.audit-step ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.audit-check button { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.audit-tick { width: 18px; height: 18px; flex: none; border: 1px solid #cbd5e1; display: grid; place-items: center; }
.audit-tick.is-on { background: #16a34a; border-color: #16a34a; color: #fff; }
.audit-upload { display: flex; gap: 8px; align-items: center; margin: 6px 0 0 26px; }
.audit-doc { display: inline-block; margin-left: 26px; color: #1d4ed8; font-size: 12px; }
.audit-hours-form { padding: 0 18px 22px; }
.audit-cal-wrap { padding: 8px 18px 18px; overflow: auto; }
.audit-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.audit-cal th, .audit-cal td { border: 1px solid #e4e7ee; vertical-align: top; }
.audit-cal th { background: #f8f9fb; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #9aa1ad; padding: 8px; }
.audit-cal td { height: 88px; padding: 0; }
.audit-cal td.is-weekend, .audit-cal th.is-weekend, .audit-cal td.is-holiday { background: #e5e7eb; }
.audit-cal td.is-leave { background: #dbeafe; }
.audit-cal td.is-today { outline: 2px solid #2563eb; outline-offset: -2px; }
.audit-cal button { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; border: 0; background: transparent; padding: 8px; text-align: left; cursor: pointer; font: inherit; }
.audit-cal em { font-style: normal; font-size: 11px; color: #64748b; }
.audit-cal span { font-size: 12px; font-weight: 700; color: #1d4ed8; }

/* Work Plan compact header: title + search/tools in one row */
.wp-board > .wp-head.dir-head {
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid #e4e7ee;
    background: #fff;
}
.wp-head-title { min-width: 0; flex: 0 1 auto; }
.wp-head-title h2 { margin: 0; }
.wp-head-title .dir-crumb { margin: 2px 0 0; }
.wp-head-tools {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 420px;
    flex-wrap: wrap;
    min-width: 0;
}
.wp-head .wp-discover-search.search-wrap {
    flex: 0 1 360px;
    width: min(400px, 100%);
    max-width: 400px;
    min-width: min(220px, 100%);
    height: 42px;
    padding: 3px 3px 3px 12px;
    margin: 0;
}
.wp-head .wp-discover-search .search-close,
.wp-head .wp-discover-search .search-pill-extra,
.wp-head .wp-discover-search .discover-picks,
.wp-head .wp-discover-search .search-panel {
    display: none !important;
}
.wp-head .wp-discover-search .search-pill-go {
    height: 34px;
    min-width: 92px;
}
.wp-filter-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}
.wp-filter-field > span { padding-left: 2px; }
.wp-filter-field select {
    min-width: 170px;
    height: 44px;
    border: 1px solid #e6ebf2;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    padding: 0 14px;
    box-shadow: 0 8px 20px rgba(27, 70, 137, .06);
}
.wp-filter-field.is-size select { min-width: 88px; }
.wp-head-tools .dir-btn {
    height: 44px;
    border-radius: 999px;
    padding: 0 14px;
    align-self: flex-end;
}
@media (max-width: 900px) {
    .wp-board > .wp-head.dir-head { align-items: stretch; }
    .wp-head-tools { justify-content: stretch; }
    .wp-head .wp-discover-search.search-wrap,
    .wp-filter-field,
    .wp-filter-field select,
    .wp-head-tools .dir-btn { width: 100%; max-width: none; min-width: 0; }
}

/* Audit timesheet workspace */
.audit-timesheet { display: grid; gap: 18px; }
.audit-timesheet .ts-hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px 24px; border: 1px solid #dbe3ef; background:
        linear-gradient(135deg, rgba(27, 70, 137, .08), rgba(255,255,255,.92) 42%),
        radial-gradient(circle at top right, rgba(212, 175, 55, .18), transparent 38%),
        #f7f9fc;
}
.audit-timesheet .ts-kicker {
    margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #1b4689; font-weight: 700;
}
.audit-timesheet .ts-hero h1 { margin: 0 0 6px; font-size: 1.7rem; color: #0f172a; letter-spacing: -.02em; }
.audit-timesheet .ts-hero-copy p { margin: 0; color: #64748b; max-width: 46ch; line-height: 1.45; }
.audit-timesheet .ts-month-nav {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px; background: #fff; border: 1px solid #d7deea;
}
.audit-timesheet .ts-month-nav strong { min-width: 118px; text-align: center; color: #0f172a; font-size: .98rem; }
.audit-timesheet .ts-nav-btn {
    width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d7deea; background: #f8fafc; color: #1b4689; text-decoration: none;
}
.audit-timesheet .ts-nav-btn:hover { background: #1b4689; color: #fff; border-color: #1b4689; }
.audit-timesheet .ts-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.audit-timesheet .ts-stat {
    padding: 16px 16px 14px; background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #94a3b8;
    display: grid; gap: 4px; min-width: 0;
}
.audit-timesheet .ts-stat.is-blue { border-top-color: #2563eb; }
.audit-timesheet .ts-stat.is-amber { border-top-color: #d97706; }
.audit-timesheet .ts-stat.is-violet { border-top-color: #7c3aed; }
.audit-timesheet .ts-stat.is-slate { border-top-color: #64748b; }
.audit-timesheet .ts-stat-label { font-size: 12px; color: #64748b; font-weight: 600; letter-spacing: .02em; }
.audit-timesheet .ts-stat strong { font-size: 1.65rem; color: #0f172a; line-height: 1; }
.audit-timesheet .ts-stat strong small { font-size: .85rem; margin-left: 2px; color: #94a3b8; font-weight: 700; }
.audit-timesheet .ts-stat-note { font-size: 12px; color: #94a3b8; }
.audit-timesheet .ts-layout {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: 16px; align-items: start;
}
.audit-timesheet .ts-panel {
    background: #fff; border: 1px solid #e2e8f0; overflow: hidden;
}
.audit-timesheet .ts-panel-head {
    display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; border-bottom: 1px solid #eef2f7;
}
.audit-timesheet .ts-panel-head h2 { margin: 0 0 4px; font-size: 1.05rem; color: #0f172a; }
.audit-timesheet .ts-panel-head p { margin: 0; color: #64748b; font-size: .9rem; }
.audit-timesheet .ts-cal-wrap { padding: 12px 14px 16px; }
.audit-timesheet .audit-cal td { height: 78px; }
.audit-timesheet .audit-cal td.has-hours { background: #eff6ff; }
.audit-timesheet .audit-cal td.has-hours span {
    display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: #1b4689; color: #fff; font-size: 11px;
}
.audit-timesheet .ts-form { padding: 16px 18px 18px; display: grid; gap: 14px; }
.audit-timesheet .ts-form-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.audit-timesheet .ts-form label {
    display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #475569; letter-spacing: .02em;
}
.audit-timesheet .ts-form input,
.audit-timesheet .ts-form select {
    min-height: 42px; border: 1px solid #d7deea; background: #fbfcfe; padding: 0 12px; font: inherit; color: #0f172a;
}
.audit-timesheet .ts-form input:focus,
.audit-timesheet .ts-form select:focus {
    outline: 2px solid rgba(27, 70, 137, .22); border-color: #1b4689; background: #fff;
}
.audit-timesheet .ts-span-2 { grid-column: 1 / -1; }
.audit-timesheet .ts-form-actions { display: flex; justify-content: flex-end; }
.audit-timesheet .ts-save {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
    border: 0; background: #1b4689; color: #fff; font-weight: 700; cursor: pointer; letter-spacing: .02em;
}
.audit-timesheet .ts-save:hover { background: #163a72; }
.audit-timesheet .ts-entries-wrap { padding: 0 0 8px; }
.audit-timesheet .ts-pill {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px;
    border: 1px solid #dbe3ef; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 700; text-transform: capitalize;
}
.audit-timesheet .ts-pill.is-billable { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.audit-timesheet .ts-pill.is-overtime { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.audit-timesheet .ts-pill.is-leave { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.audit-timesheet .ts-pill.is-non-billable { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
@media (max-width: 980px) {
    .audit-timesheet .ts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-timesheet .ts-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .audit-timesheet .ts-stats,
    .audit-timesheet .ts-form-grid { grid-template-columns: 1fr; }
    .audit-timesheet .ts-hero { padding: 16px; }
    .audit-timesheet .audit-cal td { height: 64px; }
}
.audit-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.audit-inline input { min-height: 38px; padding: 0 10px; border: 1px solid #dbe0ea; min-width: 140px; }
.audit-sub td { background: #f8fafc; padding: 8px 14px 16px; }
.audit-mini { width: 100%; border-collapse: collapse; }
.audit-mini th, .audit-mini td { border-bottom: 1px solid #eef0f4; padding: 6px 8px; text-align: left; font-size: 12px; }
@media (max-width: 900px) {
    .audit-steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .feedback-chip span:last-child { display: none; }
    .feedback-docs-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        min-width: 0;
    }
    .feedback-docs-editor .word-editor-canvas {
        min-height: 280px;
        padding: 24px 18px;
        margin: 12px 8px 16px;
        width: calc(100% - 16px) !important;
    }
}