/**
 * MyAdmin Pro — Plesk-inspired admin design system
 *
 * This is the application's single visual stylesheet. It intentionally has no
 * external font or framework dependency: Open Sans is bundled locally with
 * its license, followed by the owner's fallback stack. Change colour and
 * spacing tokens in :root before changing component rules.
 *
 * Light mode is intentional and fixed by the approved product direction. The
 * dark navy here belongs only to navigation and high-contrast emphasis areas.
 */
@font-face {
font-family: "Open Sans";
    src: url("../fonts/OpenSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-display: optional;
}
@font-face {
font-family: "Open Sans";
    src: url("../fonts/OpenSans-Italic-Variable.ttf") format("truetype");
    font-style: italic;
    font-weight: 300 800;
    font-display: optional;
}
:root {
    --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --text-body: 14px;
    --text-secondary: var(--text-body);
    --space-page: 24px;
    --space-card: 20px;
    --space-section: 20px;
    --navy-950: #0a1030;
    --navy-900: #101940;
    --navy-800: #17255a;
    --navy-700: #26346f;
    --ink: #222222;
    --ink-strong: #222222;
    --muted: #666666;
    --muted-2: #737373;
    --line: #e5eaf5;
    --line-strong: #d7def0;
    --canvas: #f7f9fe;
    --canvas-blue: #f1f5ff;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --primary: #1685ed;
    --primary-strong: #2847df;
    --primary-soft: #eaf4ff;
    --purple: #8b5cf6;
    --purple-soft: #f0eaff;
    --cyan: #18a9d7;
    --cyan-soft: #e4f8ff;
    --green: #13a875;
    --green-strong: #07875c;
    --green-soft: #e3f8ef;
    --orange: #ed8a1b;
    --orange-soft: #fff3df;
    --red: #e44766;
    --red-soft: #ffebf0;
    --shadow-xs: 0 1px 2px rgba(25, 40, 70, 0.03);
    --shadow-sm: 0 2px 6px rgba(25, 40, 70, 0.04);
    --shadow: 0 4px 12px rgba(25, 40, 70, 0.05);
    --shadow-lg: 0 12px 32px rgba(25, 40, 70, 0.12);
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --sidebar-wide: 224px;
    --sidebar-narrow: 48px;
    --topbar-height: 70px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --sidebar-width: 224px;
}
* {
    box-sizing: border-box;
}
html {
    min-height: 100%;
    scroll-behavior: smooth;
}
body {
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, select, textarea {
    font: inherit;
}
button, select {
    cursor: pointer;
}
button:disabled, [aria-disabled="true"] {
    cursor: not-allowed;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
}
svg {
    display: block;
}
::selection {
    color: #fff;
    background: var(--primary);
}
.app-body {
    position: relative;
    overflow-x: clip;
    background:
    radial-gradient(circle at 75% -12%, rgba(133, 185, 255, .20), transparent 27rem),
    radial-gradient(circle at 25% 105%, rgba(169, 132, 255, .10), transparent 31rem),
    var(--canvas);
}
.app-body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image: linear-gradient(rgba(82, 109, 180, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 109, 180, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 75%);
}
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}
.sr-only {
    margin: -1px;
}
.skip-link {
    position: fixed;
    z-index: 2000;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    color: #fff;
    border-radius: var(--radius-xs);
    background: var(--navy-950);
    transform: translateY(-160%);
    transition: transform .18s var(--ease);
}
.skip-link:focus {
    transform: translateY(0);
}
:focus-visible {
    outline: 3px solid rgba(63, 94, 245, .34);
    outline-offset: 3px;
}
/* Layout shell ----------------------------------------------------------- */
.app-shell {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-height: 100dvh;
    padding: 18px;
}
.app-workspace {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.app-main {
    min-width: 0;
    flex: 1 0 auto;
}
.content-shell {
    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 26px 10px 44px;
}
.content-shell.content-fluid {
    width: 100%;
    max-width: none;
}
.without-sidebar .content-shell {
    max-width: 1240px;
}
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: var(--muted-2);
    font-size: var(--text-body);
}
.app-footer i {
    color: var(--primary);
    font-style: normal;
}
.app-footer-separator {
    color: #c5cede;
}
/* Floating sidebar ------------------------------------------------------- */
.app-sidebar {
    top: 18px;
    z-index: 80;
    width: var(--sidebar-wide);
    flex: 0 0 var(--sidebar-wide);
    overflow: visible;
    border-radius: var(--radius-xl);
    color: #dce6ff;
    background:
    radial-gradient(circle at 7% 3%, rgba(107, 150, 255, .32), transparent 14rem),
    radial-gradient(circle at 94% 97%, rgba(123, 83, 240, .28), transparent 17rem),
    linear-gradient(155deg, var(--navy-800), var(--navy-950) 62%);
    transition: width .28s var(--ease), flex-basis .28s var(--ease), transform .28s var(--ease);
}
.sidebar-inner {
    display: flex;
    height: 100%;
    flex-direction: column;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand-link, .auth-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}
.brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 13px;
    background: linear-gradient(145deg, #7099ff, #7451e6);
    box-shadow: 0 8px 18px rgba(84, 102, 228, .36), inset 0 1px rgba(255,255,255,.3);
}
.brand-mark .icon {
    width: 19px;
    height: 19px;
}
.brand-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.brand-copy strong {
    overflow: hidden;
    color: #fff;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-copy small {
    overflow: hidden;
    color: #9faed8;
    font-size: var(--text-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-collapse {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    transition: color .18s var(--ease), background .18s var(--ease), transform .28s var(--ease);
}
.sidebar-collapse:hover {
    color: #222;
}
.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(190,205,255,.23) transparent;
}
.sidebar-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.nav-section {
    font-weight: 600;
    text-transform: uppercase;
}
.nav-section:first-child {
    margin-top: 0;
}
.nav-item {
    position: relative;
    margin: 0;
}
.nav-link {
    display: flex;
    position: relative;
    align-items: center;
    border: 1px solid transparent;
    letter-spacing: -.005em;
    transition: color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.nav-link:hover {
    color: #fff;
}
.nav-link:active {
    transform: scale(.985);
}
.nav-link > .icon {
    width: 19px;
    height: 19px;
    color: #a7adb3;
    stroke-width: 2.2;
}
.nav-link.is-active, .nav-group.is-active > .nav-link {
    color: #fff;
    border-color: rgba(160,184,255,.24);
    background: linear-gradient(100deg, rgba(103,136,255,.30), rgba(134,93,245,.22));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 6px 15px rgba(9, 14, 47, .14);
}
.nav-link.is-active::before {
    position: absolute;
    left: -12px;
    width: 3px;
    height: 20px;
    border-radius: 0 4px 4px 0;
    content: "";
    background: #9db8ff;
}
.nav-link.is-active > .icon, .nav-group.is-active > .nav-link > .icon {
    color: #fff;
}
.nav-label {
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-badge {
    min-width: 19px;
    padding: 1px 5px;
    color: #fff;
    border-radius: 999px;
    background: rgba(255,255,255,.17);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}
.nav-group-toggle {
    width: 100%;
    border: 0;
    text-align: left;
}
.nav-chevron {
    width: 15px !important;
    height: 15px !important;
    margin-left: auto;
    transition: transform .22s var(--ease);
}
.nav-group.is-open .nav-chevron {
    transform: rotate(180deg);
}
.nav-submenu {
    display: grid;
    max-height: 0;
    gap: 1px;
    padding: 0 0 0 42px !important;
    overflow: hidden;
    transition: max-height .25s var(--ease), padding .25s var(--ease);
}
.nav-group.is-open .nav-submenu {
    max-height: 180px;
    padding: 4px 0 5px 42px !important;
}
.nav-sub-link {
    display: block;
    padding: 7px 10px;
    color: #a7b4dc;
    border-radius: 9px;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-sub-link:hover, .nav-sub-link.is-active {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.nav-sub-link.is-active {
    font-weight: 600;
}
.sidebar-bottom {
    display: grid;
    gap: 9px;
    padding-top: 9px;
}
.sidebar-status {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    overflow: hidden;
    color: #c1ceee;
    border: 1px solid rgba(190,207,255,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    text-align: left;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.sidebar-status:hover {
    border-color: rgba(190,207,255,.25);
    background: rgba(255,255,255,.09);
}
.sidebar-status > .icon {
    width: 15px;
    height: 15px;
    margin-left: auto;
}
.status-pulse {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #53d7a3;
    box-shadow: 0 0 0 4px rgba(83,215,163,.12);
}
.status-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.status-copy strong, .status-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-copy strong {
    color: #e7edff;
    font-size: var(--text-body);
}
.status-copy small {
    color: #8e9ec9;
    font-size: var(--text-body);
}
.sidebar-profile {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}
.profile-link {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 9px;
    padding: 4px;
    border-radius: 11px;
    transition: background .18s var(--ease);
}
.profile-link:hover {
    background: rgba(255,255,255,.08);
}
.profile-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.profile-copy strong, .profile-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-copy strong {
    color: #eef2ff;
    font-size: var(--text-body);
}
.profile-copy small {
    color: #91a1ce;
    font-size: var(--text-body);
}
.sidebar-logout {
    display: inline-grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    color: #a9b8e5;
    border-radius: 10px;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.sidebar-logout:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
}
.sidebar-logout .icon {
    width: 17px;
    height: 17px;
}
.avatar {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    overflow: hidden;
    color: #fff;
    border: 2px solid rgba(255,255,255,.77);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-xs {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-width: 1px;
    font-size: 9px;
}
.avatar-lg {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 14px;
}
.sidebar-scrim, .mobile-bottom-nav {
    display: none;
}
/* Collapsed desktop navigation. JS applies .sidebar-collapsed to body. */
@media (min-width: 901px) {
    .sidebar-collapsed .app-sidebar {
        width: var(--sidebar-narrow);
        flex-basis: var(--sidebar-narrow);
    }
    .sidebar-collapsed .sidebar-inner {
        padding-inline: 0;
    }
    .sidebar-collapsed .sidebar-brand {
        justify-content: center;
        padding-bottom: 13px;
    }
    .sidebar-collapsed .brand-link {
        gap: 0;
    }
    .sidebar-collapsed .brand-copy, .sidebar-collapsed .sidebar-collapse, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-badge, .sidebar-collapsed .nav-section, .sidebar-collapsed .status-copy, .sidebar-collapsed .sidebar-status > .icon, .sidebar-collapsed .profile-copy, .sidebar-collapsed .sidebar-logout {
        display: none;
    }
    .sidebar-collapsed .sidebar-brand {
        flex-direction: column;
        gap: 8px;
    }
    .sidebar-collapsed .sidebar-collapse {
        display: inline-grid;
        flex-shrink: 0;
        transform: none;
    }
    .sidebar-collapsed .sidebar-collapse .icon {
        transform: rotate(180deg);
    }
    .sidebar-collapsed .nav-link {
        justify-content: center;
        padding: 0;
    }
    .sidebar-collapsed .nav-link.is-active::before {
        left: -10px;
    }
    .sidebar-collapsed .nav-submenu {
        display: none;
    }
    .sidebar-collapsed .sidebar-status {
        justify-content: center;
        padding: 11px;
    }
    .sidebar-collapsed .sidebar-profile {
        justify-content: center;
    }
    .sidebar-collapsed .profile-link {
        flex: 0 0 auto;
        padding: 2px;
    }
    .sidebar-collapsed [data-tooltip] {
        position: relative;
    }
    .sidebar-collapsed [data-tooltip]::after {
        position: absolute;
        z-index: 100;
        top: 50%;
        left: calc(100% + 13px);
        padding: 6px 9px;
        opacity: 0;
        pointer-events: none;
        color: var(--ink);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--shadow-sm);
        content: attr(data-tooltip);
        font-size: var(--text-body);
        font-weight: 600;
        transform: translate(-4px, -50%);
        transition: opacity .16s var(--ease), transform .16s var(--ease);
        white-space: nowrap;
    }
    .sidebar-collapsed [data-tooltip]:hover::after, .sidebar-collapsed [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
/* Glass topbar ----------------------------------------------------------- */
.app-topbar {
    display: flex;
    z-index: 60;
    align-items: center;
    min-height: var(--topbar-height);
    gap: 16px;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: max-content;
}
.mobile-menu-toggle {
    display: none !important;
}
.topbar-context {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: var(--text-body);
    font-weight: 600;
}
.topbar-context-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.global-search {
    display: flex;
    align-items: center;
    min-width: min(35vw, 360px);
    flex: 1;
    gap: 9px;
    padding: 9px 11px;
    color: var(--muted-2);
    border: 1px solid var(--line);
    text-align: left;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.global-search:hover {
    border-color: #d6d6d6;
    background: #ededed;
    box-shadow: none;
}
.search-icon {
    display: contents;
    color: var(--primary);
}
.global-search .icon {
    width: 17px;
    height: 17px;
}
.search-placeholder {
    flex: 1;
    font-size: var(--text-body);
}
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    padding: 2px 5px;
    color: #76819c;
    border: 1px solid #dbe2f1;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 0 #dce3f1;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.icon-button {
    display: inline-grid;
    width: 37px;
    height: 37px;
    place-items: center;
    padding: 0;
    color: #5d6985;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.icon-button:hover {
    color: var(--primary);
    border-color: #dbe2f6;
    background: #f7f9ff;
}
.icon-button:active {
    transform: scale(.94);
}
.icon-button .icon {
    width: 19px;
    height: 19px;
}
.quick-action-button {
    color: #fff;
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), #6a6df4);
    box-shadow: 0 5px 13px rgba(63,94,245,.24);
}
.quick-action-button:hover {
    color: #fff;
    border-color: var(--primary-strong);
    background: linear-gradient(135deg, var(--primary-strong), #5c54dd);
}
.topbar-menu-wrap {
    position: relative;
}
.notification-button {
    position: relative;
}
.notification-count {
    position: absolute;
    top: 2px;
    right: 1px;
    display: grid;
    min-width: 15px;
    height: 15px;
    place-items: center;
    padding: 0 3px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 99px;
    background: var(--red);
    font-size: 8px;
    font-weight: 600;
}
.user-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 39px;
    padding: 3px 6px 3px 4px;
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] {
    border-color: var(--line);
    background: #f8faff;
}
.topbar-avatar {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 10px;
}
.topbar-user-name {
    max-width: 220px;
    overflow: hidden;
    font-size: var(--text-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-chevron {
    width: 14px !important;
    height: 14px !important;
    color: var(--muted-2);
}
.dropdown-panel {
    position: absolute;
    z-index: 130;
    top: calc(100% + 11px);
    right: 0;
    width: 286px;
    overflow: hidden;
    border: 1px solid #e0e7f5;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform-origin: top right;
    animation: dropdown-in .17s var(--ease);
}
@keyframes dropdown-in {
from  {
        opacity: 0;
        transform: translateY(-5px) scale(.98);
    }
    to  {
        opacity: 1;
        transform: none;
    }
}
.dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 15px 11px;
}
.dropdown-header > div {
    display: grid;
    gap: 1px;
}
.dropdown-header strong {
    color: var(--ink-strong);
    font-size: var(--text-body);
}
.dropdown-header span {
    color: var(--muted-2);
    font-size: var(--text-body);
}
.dropdown-header a {
    color: var(--primary);
    font-size: var(--text-body);
    font-weight: 600;
}
.notification-list {
    max-height: 325px;
    overflow-y: auto;
    border-top: 1px solid #eff2f8;
}
.notification-item {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #f0f3f8;
    transition: background .17s var(--ease);
}
.notification-item:hover {
    background: #f7f9ff;
}
.notification-item-icon {
    display: inline-grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 10px;
}
.notification-item-icon .icon {
    width: 15px;
    height: 15px;
}
.notification-item-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.notification-item-copy strong, .notification-item-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-item-copy strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.notification-item-copy span, .notification-item-copy time {
    color: var(--muted);
    font-size: var(--text-body);
}
.notification-item-copy time {
    color: var(--muted-2);
    margin-top: 2px;
}
.dropdown-empty {
    display: grid;
    place-items: center;
    gap: 7px;
    padding: 28px;
    color: var(--muted);
    text-align: center;
}
.dropdown-empty .icon {
    width: 22px;
    height: 22px;
    color: var(--primary);
}
.dropdown-empty p {
    margin: 0;
    font-size: var(--text-body);
}
.user-panel {
    width: 240px;
    padding: 7px;
}
.user-menu-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}
.user-menu-summary > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.user-menu-summary strong, .user-menu-summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-summary strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.user-menu-summary span {
    color: var(--muted);
    font-size: var(--text-body);
}
.dropdown-divider {
    height: 1px;
    margin: 5px 2px;
    background: #edf0f7;
}
.user-panel > a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    color: #53607e;
    border-radius: 9px;
    font-size: var(--text-body);
    font-weight: 600;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.user-panel > a:hover {
    color: var(--primary);
    background: #f4f6ff;
}
.user-panel > a .icon {
    width: 16px;
    height: 16px;
}
.user-panel > a.dropdown-danger:hover {
    color: var(--red);
    background: var(--red-soft);
}
/* Page heading ----------------------------------------------------------- */
.breadcrumbs {
    margin: 0 0 8px;
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--muted-2);
    font-size: var(--text-body);
}
.breadcrumbs a {
    transition: color .16s var(--ease);
}
.breadcrumbs a:hover {
    color: var(--primary);
}
.breadcrumbs li span[aria-current="page"] {
    color: var(--muted);
    font-weight: 600;
}
.breadcrumbs .icon {
    width: 12px;
    height: 12px;
    color: #b0b9cd;
}
.page-header-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}
.page-heading {
    min-width: 0;
}
.page-eyebrow {
    display: block;
    margin: 0 0 3px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.page-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-title-icon {
    display: inline-grid;
    width: 33px;
    height: 33px;
    place-items: center;
    color: var(--primary);
    border-radius: 11px;
    background: linear-gradient(135deg, #e9edff, #f3ecff);
}
.page-title-icon .icon {
    width: 18px;
    height: 18px;
}
.page-heading h1 {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(23px, 2.2vw, 31px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.14;
}
.page-heading p {
    max-width: 680px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
/* Buttons and useful primitives ----------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ink);
    background: #fff;
    letter-spacing: -.01em;
    transition: transform .16s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn .icon {
    width: 16px;
    height: 16px;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0) scale(.98);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .52;
    box-shadow: none;
    transform: none;
}
.btn-primary {
    color: #fff;
    border-color: var(--primary);
    background: linear-gradient(125deg, var(--primary), #6969ed);
}
.btn-primary:hover {
    color: #fff;
    border-color: var(--primary-strong);
    background: linear-gradient(125deg, var(--primary-strong), #5751d8);
}
.btn-secondary {
    border-color: var(--line-strong);
}
.btn-secondary:hover {
    color: var(--primary);
    border-color: #bdc9f1;
    box-shadow: var(--shadow-xs);
}
.btn-ghost {
    color: var(--muted);
}
.btn-ghost:hover {
    color: var(--primary);
    background: var(--primary-soft);
}
.btn-success {
    color: #fff;
    border-color: var(--green);
}
.btn-success:hover {
    color: #fff;
    background: linear-gradient(125deg, var(--green-strong), #16aa80);
}
.btn-danger {
    color: #fff;
    border-color: var(--red);
}
.btn-danger:hover {
    color: #fff;
    background: linear-gradient(125deg, #cf3554, #e85869);
}
.btn-warning {
    color: #75430a;
    border-color: #f3bd70;
    background: #fff2dc;
}
.btn-warning:hover {
    color: #623604;
    background: #ffe8c6;
}
.btn-dark {
    color: #fff;
    border-color: var(--navy-900);
    background: var(--navy-900);
}
.btn-dark:hover {
    color: #fff;
    background: var(--navy-950);
}
.btn-icon {
    width: 38px;
}
.btn-sm {
    padding-inline: 10px;
    border-radius: 9px;
}
.btn-lg {
    min-height: 46px;
    padding-inline: 18px;
    border-radius: 13px;
    font-size: var(--text-body);
}
.button-row, .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}
.form-actions {
    justify-content: flex-end;
}
/* Auth screens: fixed Modern Glass Light split experience ---------------- */
.auth-body {
    min-height: 100dvh;
    background: #f7f9ff;
}
.auth-story {
    display: grid;
    min-height: 100%;
    color: var(--ink);
}
.auth-story::before {
    position: absolute;
    top: -14%;
    right: -12%;
    width: 47%;
    aspect-ratio: 1;
    border: 1px solid rgba(81,112,243,.12);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 42px rgba(107,136,244,.045), 0 0 0 84px rgba(107,136,244,.03);
}
.auth-story::after {
    position: absolute;
    bottom: -18%;
    left: -12%;
    width: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(133,104,244,.16), transparent 64%);
    filter: blur(1px);
}
.auth-story-grid {
    position: absolute;
    inset: 0;
    opacity: .52;
    background-image: linear-gradient(rgba(104,129,225,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(104,129,225,.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.8), transparent 72%);
}
.auth-orbit {
    border: 1px solid rgba(86,115,232,.16);
    border-radius: 50%;
    pointer-events: none;
}
.orbit-one {
    top: 16%;
    right: 12%;
    width: 150px;
    height: 150px;
    animation: auth-float 10s ease-in-out infinite;
}
.orbit-two {
    right: 18%;
    bottom: 14%;
    width: 80px;
    height: 80px;
    border-color: rgba(140,101,237,.25);
    animation: auth-float 7s ease-in-out -3s infinite reverse;
}
@keyframes auth-float {
50%  {
        transform: translateY(-12px) rotate(10deg);
    }
}
.auth-story-content {
    display: flex;
    position: relative;
    z-index: 1;
    width: min(100%, 680px);
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 5vw, 62px);
}
.auth-brand {
    font-weight: 600;
    letter-spacing: -.035em;
}
.auth-story-copy {
    max-width: 520px;
    margin: auto 0;
    padding: 90px 0 50px;
}
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 13px;
    padding: 6px 9px;
    border: 1px solid rgba(121,103,230,.15);
    border-radius: 99px;
    background: rgba(255,255,255,.52);
    box-shadow: 0 3px 10px rgba(61,78,165,.04);
    text-transform: uppercase;
}
.auth-kicker .icon {
    width: 13px;
    height: 13px;
}
.auth-story-copy h1 {
    max-width: 530px;
    margin: 0;
    color: #172351;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: 1.05;
}
.auth-story-copy p {
    max-width: 440px;
    margin: 18px 0 0;
    color: #5e6a8c;
    font-size: clamp(14px, 1.35vw, 17px);
    line-height: 1.6;
}
.auth-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.auth-stat {
    display: grid;
    min-width: 128px;
    gap: 1px;
}
.auth-stat strong {
    letter-spacing: -.04em;
}
.auth-stat span {
    font-weight: 600;
}
.auth-story-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 0;
    color: #667392;
    font-size: var(--text-body);
}
.auth-story-note .icon {
    width: 14px;
    height: 14px;
    color: var(--primary);
}
.auth-panel {
    min-width: 0;
}
.auth-mobile-brand {
    display: none;
}
.auth-form-header {
    margin-bottom: 23px;
}
.auth-form-header h1, .auth-form > h1 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.05em;
}
.auth-form-header p, .auth-form > p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.auth-form .form-group + .form-group {
    margin-top: 14px;
}
.auth-form .form-actions {
    margin-top: 21px;
}
.auth-form .form-actions .btn {
    width: 100%;
    min-height: 43px;
}
.auth-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    margin-top: 12px;
}
.auth-form-options .form-group {
    margin: 0 !important;
}
.auth-link {
    color: var(--primary);
    font-size: var(--text-body);
    font-weight: 600;
}
.auth-link:hover {
    color: var(--primary-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0;
    color: var(--muted-2);
    font-size: var(--text-body);
    text-align: center;
}
.auth-divider::before, .auth-divider::after {
    height: 1px;
    flex: 1;
    content: "";
    background: var(--line);
}
.auth-footer {
    margin: 23px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
    text-align: center;
}
.auth-footer a {
    color: var(--primary);
    font-weight: 600;
}
.auth-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    color: var(--muted-2);
    font-size: var(--text-body);
}
.auth-security-note .icon {
    width: 13px;
    height: 13px;
}
/* Responsive behaviour --------------------------------------------------- */
@media (max-width: 1240px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr);
    }
    .topbar-user-name {
        display: none;
    }
}
@media (max-width: 1050px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-sidebar > .glass-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .card-grid .span-3 {
        grid-column: span 4;
    }
    .card-grid .span-4 {
        grid-column: span 6;
    }
    .card-grid .span-5, .card-grid .span-7 {
        grid-column: span 6;
    }
    .card-grid .span-8, .card-grid .span-9 {
        grid-column: span 12;
    }
    .auth-layout {
        grid-template-columns: minmax(320px, 1fr) minmax(380px, .9fr);
    }
    .auth-panel {
        padding: 34px;
    }
}
@media (max-width: 900px) {
    .app-shell {
        display: block;
        padding: 10px;
    }
    .app-sidebar {
        position: fixed;
        top: 10px;
        bottom: 10px;
        left: 10px;
        width: min(280px, calc(100vw - 36px));
        height: auto;
        flex-basis: auto;
        transform: translateX(calc(-100% - 22px));
    }
    .sidebar-mobile-open {
        overflow: hidden;
    }
    .sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
    }
    .sidebar-scrim {
        display: block;
        position: fixed;
        z-index: 70;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        background: rgba(14,22,53,.34);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity .23s var(--ease), visibility .23s var(--ease);
    }
    .sidebar-mobile-open .sidebar-scrim {
        opacity: 1;
        visibility: visible;
    }
    .sidebar-collapse {
        display: none;
    }
    .mobile-menu-toggle {
        display: inline-grid !important;
    }
    .app-topbar {
        top: 10px;
        min-height: 61px;
        padding-inline: 10px;
        border-radius: 17px;
    }
    .topbar-context {
        display: none;
    }
    .global-search {
        min-width: 0;
        max-width: none;
    }
    .global-search .search-placeholder {
        font-size: var(--text-body);
    }
    .content-shell {
        padding: 23px 3px 88px;
    }
    .mobile-bottom-nav {
        display: block;
        position: fixed;
        z-index: 65;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 10px;
        border: 1px solid rgba(224,230,244,.98);
        border-radius: 17px;
        background: rgba(255,255,255,.91);
        box-shadow: 0 11px 34px rgba(21,34,78,.16);
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
    }
    .mobile-nav-inner {
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        min-height: 57px;
    }
    .mobile-nav-link {
        display: grid;
        min-width: 0;
        flex: 1;
        place-items: center;
        align-content: center;
        gap: 2px;
        padding: 6px 3px;
        color: var(--muted-2);
        font-size: var(--text-body);
        font-weight: 600;
    }
    .mobile-nav-link .icon {
        width: 18px;
        height: 18px;
    }
    .mobile-nav-link.is-active {
        color: var(--primary);
    }
    .mobile-nav-link.is-active .icon {
        filter: drop-shadow(0 3px 4px rgba(63,94,245,.20));
    }
    .app-footer {
        padding-bottom: 0;
    }
    .auth-layout {
        grid-template-columns: minmax(300px, .9fr) minmax(360px, 1fr);
    }
    .auth-story-content {
        padding: 32px;
    }
    .auth-story-copy {
        padding-block: 50px 35px;
    }
}
@media (max-width: 700px) {
    .page-header {
        margin-bottom: 18px;
    }
    .page-header-row {
        display: grid;
        align-items: start;
        gap: 13px;
    }
    .page-actions {
        justify-content: flex-start;
    }
    .page-actions .btn {
        flex: 1 1 auto;
    }
    .stats-grid {
        gap: 10px;
        margin-bottom: 14px;
    }
    .stat-card {
        min-height: 104px;
        padding: 13px;
    }
    .stat-card-copy strong {
        font-size: 20px;
    }
    .dashboard-sidebar {
        grid-template-columns: 1fr;
    }
    .dashboard-sidebar > .glass-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
    .card-grid {
        gap: 12px;
    }
    .card-grid .span-3, .card-grid .span-4, .card-grid .span-5, .card-grid .span-6, .card-grid .span-7 {
        grid-column: span 12;
    }
    .glass-card {
        border-radius: 15px;
    }
    .card-header {
        padding: 16px 15px 0;
    }
    .card-body {
        padding: 15px;
    }
    .card-header + .card-body {
        padding-top: 13px;
    }
    .form-grid, .form-grid.form-grid-3 {
        grid-template-columns: 1fr;
        gap: 13px;
    }
    .form-grid .span-full {
        grid-column: auto;
    }
    .table-toolbar, .filter-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .table-toolbar-left, .table-toolbar-right, .filter-actions {
        width: 100%;
    }
    .table-toolbar-right > .btn, .filter-actions > .btn {
        flex: 1;
    }
    .table-search {
        width: 100%;
    }
    .filter-toolbar {
        align-items: stretch;
    }
    .filter-toolbar .form-group {
        width: 100%;
    }
    .record-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }
    .record-meta-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .auth-layout {
        display: block;
    }
    .auth-story {
        display: none;
    }
    .auth-panel {
        min-height: 100dvh;
        padding: max(26px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom));
        background: radial-gradient(circle at 100% 0, #eef2ff, transparent 22rem), #fff;
    }
    .auth-mobile-brand {
        display: block;
        margin-bottom: 44px;
    }
    .auth-mobile-brand .auth-brand {
        display: inline-flex;
    }
    .auth-form {
        width: min(100%, 430px);
    }
}
@media (max-width: 480px) {
    .app-shell {
        padding: 7px;
    }
    .app-topbar {
        top: 7px;
        gap: 7px;
        padding: 7px;
    }
    .global-search {
        justify-content: center;
        max-width: 39px;
        padding: 8px;
    }
    .global-search .search-placeholder, .global-search kbd {
        display: none;
    }
    .topbar-actions {
        gap: 1px;
    }
    .quick-action-button {
        display: none;
    }
    .user-menu-button {
        padding-right: 2px;
    }
    .topbar-user-chevron {
        display: none;
    }
    .content-shell {
        padding-top: 19px;
    }
    .page-heading h1 {
        font-size: 24px;
    }
    .page-title-icon {
        width: 30px;
        height: 30px;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .stat-card {
        gap: 8px;
        min-height: 98px;
        padding: 11px;
    }
    .stat-card-icon {
        width: 33px;
        height: 33px;
        border-radius: 10px;
    }
    .stat-card-icon .icon {
        width: 17px;
        height: 17px;
    }
    .stat-card-copy strong {
        font-size: 18px;
    }
    .stat-label, .stat-caption {
        font-size: var(--text-body);
    }
    .page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .page-actions .btn {
        width: 100%;
    }
    .card-actions {
        gap: 3px;
    }
    .card-actions .btn:not(.btn-icon) {
        padding-inline: 8px;
    }
    .pagination-control span {
        display: none;
    }
    .pagination {
        gap: 1px;
    }
    .pagination a, .pagination-gap {
        min-width: 28px;
        height: 28px;
    }
    .modal {
        padding: 10px;
    }
    .modal-dialog {
        border-radius: 17px;
    }
    .modal-header, .modal-body, .modal-footer {
        padding-inline: 14px;
    }
    .toast-stack {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }
    .command-palette {
        padding: 52px 9px 9px;
    }
    .command-footer span:first-child {
        display: none;
    }
    .command-footer {
        justify-content: flex-end;
    }
    .file-upload {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .file-upload-name {
        grid-column: 2;
        max-width: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* Dashboard page composition -------------------------------------------- */
.dashboard-welcome {
    margin-bottom: 19px;
}
.dashboard-welcome h1 {
    color: var(--ink-strong);
    line-height: 1.12;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.live-dot {
    box-shadow: 0 0 0 4px rgba(19,168,117,.12);
}
.greeting-spark {
    vertical-align: 14%;
}
.date-pill {
    min-height: 32px;
    font-weight: 600;
}
.date-pill .icon {
    color: var(--primary);
}
.page-actions .date-pill {
    min-height: 38px;
    padding-inline: 11px;
}
.demo-banner {
    margin: -2px 0 17px;
}
.demo-banner > .icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--purple);
}
.demo-banner span {
    flex: 1;
}
.demo-banner a {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: var(--text-body);
    font-weight: 600;
}
.demo-banner a .icon {
    height: 14px;
}
/* Dashboard has its own richer stat composition; generic stat_card() still
   works above, while these accent cards are deliberately block layout. */
.stat-card.accent-blue, .stat-card.accent-purple, .stat-card.accent-orange, .stat-card.accent-green {
    display: block;
    min-height: 142px;
    padding: 15px;
    overflow: hidden;
}
.stat-card.accent-blue {
    background: linear-gradient(145deg, rgba(242,246,255,.96), rgba(255,255,255,.90));
}
.stat-card.accent-blue::after, .stat-card.accent-purple::after, .stat-card.accent-orange::after, .stat-card.accent-green::after {
    display: none;
}
.stat-top {
    gap: 8px;
}
.stat-top .stat-label {
    color: var(--muted);
}
.tone-blue {
    color: var(--primary);
}
.tone-green {
    color: var(--green);
}
.tone-orange {
    color: var(--orange);
}
.stat-value {
    margin: 10px 0 8px;
}
.stat-bottom {
    position: relative;
    z-index: 1;
}
.stat-bottom .stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--green);
    font-weight: 600;
}
.stat-bottom .stat-trend.negative {
    color: var(--red);
}
.stat-bottom .stat-trend.warm {
    color: var(--orange);
}
.stat-bottom .stat-trend .icon {
    width: 12px;
    height: 12px;
}
.stat-bottom .stat-caption {
    color: var(--muted-2);
}
.stat-sparkline path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.accent-purple .stat-sparkline path {
    stroke: var(--purple);
}
.accent-orange .stat-sparkline path {
    stroke: var(--orange);
}
.accent-green .stat-sparkline path {
    stroke: var(--green);
}
.stat-decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.stat-decoration.circles {
    right: -18px;
    bottom: -23px;
    width: 92px;
    height: 92px;
    border: 13px solid rgba(139,92,246,.10);
    border-radius: 50%;
}
.stat-decoration.circles::after {
    position: absolute;
    top: -24px;
    left: -25px;
    width: 42px;
    height: 42px;
    border: 7px solid rgba(139,92,246,.08);
    border-radius: 50%;
    content: "";
}
.stat-decoration.blocks {
    right: -14px;
    bottom: -15px;
    width: 85px;
    height: 66px;
    opacity: .45;
    background: linear-gradient(135deg, rgba(237,138,27,.15) 25%, transparent 25%) 0 0 / 22px 22px, linear-gradient(135deg, transparent 75%, rgba(237,138,27,.17) 75%) 0 0 / 22px 22px;
    transform: rotate(-13deg);
}
.stat-decoration.rings {
    right: -13px;
    bottom: -19px;
    width: 94px;
    height: 94px;
    border: 11px solid rgba(19,168,117,.09);
    border-radius: 50%;
    box-shadow: inset 0 0 0 11px transparent, 0 0 0 13px rgba(19,168,117,.04);
}
.text-muted {
    color: var(--muted) !important;
}
.text-link {
    font-weight: 600;
    white-space: nowrap;
}
.text-link:hover {
    color: var(--primary-strong);
}
.text-link .icon {
    height: 14px;
}
.chart-summary > div:first-child {
    display: grid;
    gap: 1px;
}
.chart-summary strong {
    color: var(--ink-strong);
    font-weight: 600;
}
.chart-data {
    margin-top: 8px;
}
.chart-data summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}
.chart-data .data-table {
    min-width: 0;
    margin-top: 9px;
    border: 1px solid #e7ebf3;
    border-radius: 10px;
}
.chart-data .data-table th, .chart-data .data-table td {
    padding: 8px 10px;
    font-size: 11px;
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
}
.table-responsive .data-table {
    min-width: 600px;
}
.record-title {
    min-width: 150px;
    color: var(--ink);
}
.record-title:hover strong {
    color: var(--primary);
}
.record-title > span:last-child {
    min-width: 0;
}
.record-title strong, .record-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-symbol {
    width: 29px;
}
.progress-cell {
    min-width: 95px;
}
.progress-cell progress {
    overflow: hidden;
    background: #ecf0f7;
}
.progress-cell progress::-moz-progress-bar {
    border-radius: 9px;
    background: linear-gradient(90deg, var(--primary), var(--purple));
}
.progress-cell span {
    color: var(--muted);
    font-weight: 600;
}
.numeric {
    color: var(--ink) !important;
    font-weight: 600;
}
.activity-feed {
    padding-block: 13px;
}
.activity-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
}
.activity-row:last-child {
    border-bottom: 0;
}
.activity-node {
    width: 28px;
    background: var(--primary-soft);
}
.activity-node .icon {
    height: 14px;
}
.activity-row p {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-row p strong {
    color: var(--ink);
}
.activity-row small {
    display: block;
    margin-top: 1px;
    color: var(--muted-2);
}
.focus-banner {
    color: #e9efff;
}
.focus-banner::before {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 26px rgba(255,255,255,.03);
}
.focus-icon .icon {
    width: 18px;
    height: 18px;
}
.focus-banner .eyebrow {
    position: relative;
    z-index: 1;
}
.focus-banner h2 {
    position: relative;
    z-index: 1;
    font-weight: 600;
}
.focus-banner p {
    position: relative;
    z-index: 1;
    margin: 9px 0 17px;
}
.btn-light {
    position: relative;
    z-index: 1;
    box-shadow: 0 5px 12px rgba(4,18,71,.18);
}
.btn-light:hover {
    color: #1c3691;
    background: #f6f8ff;
}
.focus-orb {
    background: radial-gradient(circle at 30% 30%, rgba(154,175,255,.52), rgba(127,92,240,.04) 68%);
}
.focus-tasks {
    display: grid;
    gap: 3px;
}
.focus-task:hover strong {
    color: var(--primary);
}
.task-check {
    width: 16px;
    background: #fff;
}
.focus-task > span:last-child {
    min-width: 0;
}
.focus-task strong, .focus-task small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.focus-task strong {
    color: var(--ink);
}
.focus-task small i {
    color: var(--purple);
    font-style: normal;
}
.customer-health {
    justify-content: center;
}
.customer-health .donut-value {
    fill: var(--ink);
    font-family: var(--font-sans);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.07em;
}
.customer-health .donut-label {
    fill: var(--muted);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
}
.customer-legend {
    min-width: 80px;
}
.customer-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}
.customer-legend strong {
    color: var(--ink);
}
.workspace-note {
    align-items: flex-start;
    border: 1px solid #dce5fa;
    border-radius: 14px;
    background: linear-gradient(140deg, #f2f6ff, #faf7ff);
}
.workspace-note > .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--primary);
}
.widget-choice, .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    color: #45516e;
    border-bottom: 1px solid #edf0f6;
    font-size: var(--text-body);
    cursor: pointer;
}
.widget-choice:last-child {
    border-bottom: 0;
}
.widget-choice input, .checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}
.d-block {
    display: block !important;
}
.btn-block {
    display: inline-flex;
}
/* Root dashboard uses a native <dialog>; preserve the same visual layer as
   component div modals without forcing a closed dialog to render. */
dialog.modal {
    z-index: 1000;
    max-width: none;
    height: 100%;
}
dialog.modal[open] {
    display: grid;
    place-items: center;
}
dialog.modal::backdrop {
    -webkit-backdrop-filter: blur(4px);
}
dialog.modal > .modal-header, dialog.modal > form {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    margin: 0;
    border-right: 1px solid rgba(229,234,245,.9);
    border-left: 1px solid rgba(229,234,245,.9);
    background: rgba(255,255,255,.98);
}
dialog.modal > .modal-header {
    padding-bottom: 14px;
    border-top: 1px solid rgba(229,234,245,.9);
    border-radius: 21px 21px 0 0;
}
dialog.modal > form {
    overflow: hidden;
    border-bottom: 1px solid rgba(229,234,245,.9);
    border-radius: 0 0 21px 21px;
    box-shadow: 0 25px 80px rgba(15,26,66,.24);
}
dialog.modal > .modal-header + form {
    margin-top: -1px;
}
@media (max-width: 700px) {
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }
    .dashboard-welcome .page-actions {
        width: 100%;
    }
    .dashboard-welcome .page-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
    .demo-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        font-size: var(--text-body);
    }
    .demo-banner a {
        width: 100%;
        margin-left: 29px;
    }
    .chart-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .activity-row {
        padding-inline: 15px;
    }
}
@media (max-width: 480px) {
    .dashboard-welcome h1 {
        font-size: 26px;
    }
    .date-pill {
        font-size: var(--text-body);
    }
    .stat-card.accent-blue, .stat-card.accent-purple, .stat-card.accent-orange, .stat-card.accent-green {
        min-height: 129px;
        padding: 12px;
    }
    .stat-value {
        margin-block: 8px 6px;
        font-size: 22px;
    }
    .stat-bottom .stat-caption {
        display: none;
    }
    .activity-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }
    .activity-row time {
        grid-column: 2;
    }
    .customer-health {
        gap: 9px;
    }
    .customer-health svg {
        width: 107px;
        height: 107px;
        flex-basis: 107px;
    }
}
.divider {
    height: 1px;
    margin: 18px 0;
    background: var(--line);
}
.section-stack {
    display: grid;
    gap: 18px;
}
.split-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.muted {
    color: var(--muted);
}
.text-primary {
    color: var(--primary);
}
.text-success {
    color: var(--green);
}
.text-danger {
    color: var(--red);
}
.text-warning {
    color: var(--orange);
}
/* Glass cards ------------------------------------------------------------ */
.glass-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(224, 230, 244, .90);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.glass-card:hover {
    border-color: #dbe2f4;
    box-shadow: var(--shadow-sm);
}
.glass-card[data-accent]::before {
    position: absolute;
    top: 0;
    left: 19px;
    width: 54px;
    height: 3px;
    border-radius: 0 0 5px 5px;
    content: "";
    background: var(--primary);
}
.glass-card[data-accent="purple"]::before {
    background: var(--purple);
}
.glass-card[data-accent="success"]::before {
    background: var(--green);
}
.glass-card[data-accent="warning"]::before {
    background: var(--orange);
}
.glass-card[data-accent="danger"]::before {
    background: var(--red);
}
.glass-card[data-accent="info"]::before {
    background: var(--cyan);
}
.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}
.card-heading {
    min-width: 0;
}
.card-heading h2, .card-heading h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.card-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.card-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
}
.card-header + .card-body {
    padding-top: 16px;
}
.card-no-padding .card-body {
    padding: 0;
}
.card-compact .card-header {
    padding: 14px 15px 0;
}
.card-compact .card-body {
    padding: 14px 15px;
}
.glass-card > .empty-state {
    min-height: 240px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}
.span-3 {
    grid-column: span 3;
}
.span-4 {
    grid-column: span 4;
}
.span-5 {
    grid-column: span 5;
}
.span-6 {
    grid-column: span 6;
}
.span-7 {
    grid-column: span 7;
}
.span-8 {
    grid-column: span 8;
}
.span-9 {
    grid-column: span 9;
}
.span-12 {
    grid-column: 1 / -1;
}
/* Dashboard and visual widgets ------------------------------------------ */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr);
    gap: 18px;
    align-items: start;
}
.dashboard-primary, .dashboard-sidebar {
    display: grid;
    min-width: 0;
    gap: 18px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat-card {
    display: grid;
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    min-height: 116px;
    padding: 16px;
    overflow: hidden;
    color: var(--ink);
    border: 1px solid rgba(224,230,244,.90);
    border-radius: 16px;
    background: rgba(255,255,255,.79);
    box-shadow: var(--shadow-xs);
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.stat-card:hover {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: #d7e0f5;
    box-shadow: var(--shadow-sm);
}
.stat-card::after {
    position: absolute;
    right: -23px;
    bottom: -27px;
    width: 91px;
    height: 91px;
    border: 14px solid rgba(99,124,238,.05);
    border-radius: 50%;
    content: "";
}
.stat-card-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
}
.stat-card-icon .icon {
    width: 19px;
    height: 19px;
}
.stat-card-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.stat-label {
    color: var(--muted);
    font-size: var(--text-body);
    font-weight: 600;
}
.stat-card-copy strong {
    overflow: hidden;
    color: var(--ink-strong);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stat-caption {
    color: var(--muted-2);
    font-size: var(--text-body);
}
.stat-trend {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 3px;
    margin-top: -1px;
    font-size: var(--text-body);
    font-weight: 600;
}
.stat-trend .icon {
    width: 13px;
    height: 13px;
}
.stat-trend.is-up {
    color: var(--green);
}
.stat-trend.is-down {
    color: var(--red);
}
.chart-card .card-body {
    padding-top: 10px;
}
.widget-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 10px;
}
.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chart-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}
.chart-legend i.purple {
    background: var(--purple);
}
.chart-legend i.green {
    background: var(--green);
}
.chart-area {
    position: relative;
    min-height: 180px;
    padding: 11px 0 22px;
}
.chart-area::before {
    position: absolute;
    inset: 12px 0 29px;
    opacity: .82;
    pointer-events: none;
    content: "";
    background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #edf1f8 calc(25% - 1px), #edf1f8 25%);
}
.chart-area svg, .chart-svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.chart-axis {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: space-between;
    color: var(--muted-2);
    font-size: 9px;
}
.mini-chart {
    display: flex;
    height: 80px;
    align-items: end;
    gap: 6px;
    padding: 8px 0 2px;
}
.mini-chart span {
    display: block;
    min-width: 5px;
    flex: 1;
    border-radius: 999px 999px 3px 3px;
    background: linear-gradient(to top, var(--primary), #9dacff);
    opacity: .85;
}
.progress-bar {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #ebeff8;
}
.progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--purple));
}
.progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    margin-bottom: 14px;
}
.progress-row:last-child {
    margin-bottom: 0;
}
.progress-row > span {
    color: var(--muted);
    font-size: var(--text-body);
    font-weight: 600;
}
.progress-row > strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.progress-row .progress-bar {
    grid-column: 1 / -1;
}
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.quick-action-tile {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 95px;
    padding: 12px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fbfcff;
    transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.quick-action-tile:hover {
    color: var(--primary);
    border-color: #cbd5fa;
    background: #f5f7ff;
    transform: translateY(-2px);
}
.quick-action-tile .icon {
    width: 19px;
    height: 19px;
    color: var(--primary);
}
.quick-action-tile span {
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 600;
}
/* Status, alerts, empty and loading states ------------------------------ */
.status-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 4px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-badge .icon {
    width: 12px;
    height: 12px;
}
.badge-neutral {
    color: #61708e;
    border-color: #e4e8f0;
    background: #f4f6fa;
}
.badge-primary {
    color: #4059d6;
    border-color: #dce3ff;
    background: var(--primary-soft);
}
.badge-info {
    color: #1287aa;
    border-color: #cfeef8;
    background: var(--cyan-soft);
}
.badge-success {
    color: #087a55;
    border-color: #caeddf;
    background: var(--green-soft);
}
.badge-warning {
    color: #a45c09;
    border-color: #fee3bb;
    background: var(--orange-soft);
}
.badge-danger {
    color: #c73555;
    border-color: #fed6df;
    background: var(--red-soft);
}
.badge-purple {
    color: #7444c6;
    border-color: #e7d9ff;
    background: var(--purple-soft);
}
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid;
    border-radius: 14px;
}
.alert-icon {
    width: 19px;
    height: 19px;
    margin-top: 1px;
}
.alert-content {
    min-width: 0;
    flex: 1;
}
.alert-content strong {
    display: block;
    margin-bottom: 1px;
    font-size: var(--text-body);
}
.alert-content p {
    margin: 0;
    font-size: var(--text-body);
}
.alert-info {
    color: #176f92;
    border-color: #caedf8;
    background: #edfaff;
}
.alert-success {
    color: #087754;
    border-color: #c5eddf;
    background: #ecfbf4;
}
.alert-warning {
    color: #9c5a0e;
    border-color: #ffe0b1;
    background: #fff8e9;
}
.alert-danger {
    color: #bb3350;
    border-color: #fbcfd9;
    background: #fff1f4;
}
.alert-dismiss {
    width: 27px;
    height: 27px;
    margin: -4px -4px -4px 0;
    color: currentColor;
}
.alert-dismiss:hover {
    color: currentColor;
    background: rgba(255,255,255,.52);
}
.empty-state {
    display: grid;
    min-height: 215px;
    place-content: center;
    justify-items: center;
    padding: 26px;
    color: var(--muted);
    text-align: center;
}
.empty-state-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    margin-bottom: 11px;
    color: var(--primary);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-soft), #f1ebff);
}
.empty-state-icon .icon {
    width: 22px;
    height: 22px;
}
.empty-state h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: -.02em;
}
.empty-state p {
    max-width: 320px;
    margin: 5px 0 0;
    font-size: var(--text-body);
}
.empty-state-action {
    margin-top: 14px;
}
.error-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 19px;
    color: var(--muted);
    border: 1px dashed #f0b8c5;
    border-radius: var(--radius);
    background: #fff8fa;
}
.error-state > .icon {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    color: var(--red);
}
.error-state h3 {
    margin: 0;
    color: #a5334c;
    font-size: var(--text-body);
}
.error-state p {
    margin: 3px 0 0;
    font-size: var(--text-body);
}
.skeleton {
    display: block;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(105deg, #eef1f7 20%, #f8faff 40%, #eef1f7 60%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.25s linear infinite;
}
.skeleton-line {
    width: 100%;
    height: 12px;
    margin: 7px 0;
}
.skeleton-card {
    width: 100%;
    height: 155px;
    margin: 7px 0;
    border-radius: var(--radius);
}
.skeleton-avatar {
    width: 36px;
    height: 36px;
    margin: 5px 0;
    border-radius: 50%;
}
.skeleton-stat {
    width: 100%;
    height: 110px;
    margin: 7px 0;
    border-radius: 16px;
}
@keyframes skeleton-shimmer {
to  {
        background-position: -200% 0;
    }
}
/* Forms ------------------------------------------------------------------ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid.form-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-grid .span-full {
    grid-column: 1 / -1;
}
.form-section + .form-section {
    margin-top: 22px;
    padding-top: 21px;
    border-top: 1px solid var(--line);
}
.form-section-heading h2, .form-section-heading h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: var(--text-body);
    letter-spacing: -.02em;
}
.form-section-heading p {
    margin: 3px 0 0;
}
b, strong {
    font-weight: 600;
}
.form-group {
    margin-bottom: 16px;
}
.form-grid > .form-group {
    margin-bottom: 0;
}
.glass-card > form.record-form {
    margin: var(--space-card);
}
.glass-card > h2 {
    font-size: 17px;
    line-height: 1.4;
}
.data-table .avatar {
    margin-inline-end: 8px;
    vertical-align: middle;
}
.sidebar-nav .nav-section, .sidebar-nav .nav-badge, .sidebar-nav .nav-submenu a {
    font-weight: 400;
}
.form-group, .form-field {
    min-width: 0;
}
.form-group > label, .form-field > label, .radio-group legend {
    display: block;
    margin: 0 0 6px;
    color: #35415d;
    font-size: var(--text-body);
    font-weight: 600;
}
.form-group > label > span, .form-field > label > span, .radio-group legend > span {
    color: var(--red);
}
.form-control, .form-select {
    font-weight: 400;
    display: block;
    width: 100%;
    color: var(--ink);
    border: 1px solid #dce2ee;
    outline: none;
    background: rgba(255,255,255,.92);
    transition: border-color .17s var(--ease), box-shadow .17s var(--ease), background .17s var(--ease);
}
.form-control::placeholder {
    color: #a6afc1;
    opacity: 1;
}
.form-control:hover, .form-select:hover {
    border-color: #c8d1e7;
}
.form-control:focus, .form-select:focus {
    background: #fff;
}
.form-control:disabled, .form-select:disabled {
    color: #8993a8;
    border-color: #e7ebf2;
    background: #f5f7fa;
    cursor: not-allowed;
}
.form-control[readonly] {
    color: var(--muted);
    background: #f9faff;
}
.form-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}
.form-select {
    appearance: none;
    background-repeat: no-repeat;
}
.field-control {
    position: relative;
}
.field-control.has-icon > .icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 11px;
    width: 17px;
    height: 17px;
    color: #8390ac;
    pointer-events: none;
    transform: translateY(-50%);
}
.field-control.has-icon .form-control {
    padding-left: 37px;
}
.field-control .password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 32px;
    height: 32px;
    color: var(--muted);
    transform: translateY(-50%);
}
.field-control .password-toggle:hover {
    color: var(--primary);
}
.field-control .password-toggle + .form-control {
    padding-right: 40px;
}
.field-feedback, .field-error {
    min-height: 15px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--text-secondary);
    line-height: 1.35;
}
.field-error, .has-error .field-feedback {
    color: var(--red);
}
.form-control.is-invalid, .form-select.is-invalid, .form-field.is-invalid .form-control, .form-field.is-invalid .form-select {
    border-color: #ed95a8;
    background-color: #fffafb;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(228,71,102,.12);
}
.form-control.is-valid, .form-select.is-valid {
    border-color: #77cdb1;
    background-color: #fbfffd;
}
.form-control.is-valid:focus, .form-select.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(19,168,117,.11);
}
.form-help {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.input-prefix, .input-suffix {
    display: flex;
    align-items: stretch;
}
.input-prefix .form-control {
    border-radius: 0 10px 10px 0;
}
.input-suffix .form-control {
    border-radius: 10px 0 0 10px;
}
.input-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--muted);
    border: 1px solid #dce2ee;
    background: #f7f9fd;
    font-size: var(--text-body);
}
.input-prefix .input-addon {
    border-right: 0;
    border-radius: 10px 0 0 10px;
}
.input-suffix .input-addon {
    border-left: 0;
    border-radius: 0 10px 10px 0;
}
.form-check-group {
    padding-top: 2px;
}
.form-check, .form-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: #46536f;
    font-size: var(--text-body);
    line-height: 1.35;
    cursor: pointer;
}
.form-check-input, .form-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.form-check-box {
    display: inline-grid;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    place-items: center;
    margin-top: -1px;
    color: #fff;
    border: 1.5px solid #bbc5d9;
    border-radius: 5px;
    background: #fff;
    transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.form-check-box .icon {
    width: 12px;
    height: 12px;
    opacity: 0;
    transform: scale(.65);
    transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.form-check-input:checked + .form-check-box {
    border-color: var(--primary);
    background: var(--primary);
}
.form-check-input:checked + .form-check-box .icon {
    opacity: 1;
    transform: scale(1);
}
.form-check-input:focus-visible + .form-check-box, .form-radio input:focus-visible + .radio-mark {
    outline: 3px solid rgba(63,94,245,.25);
    outline-offset: 2px;
}
.radio-group {
    padding: 0;
    border: 0;
}
.radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
}
.radio-mark {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: -1px;
    border: 1.5px solid #bbc5d9;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 4px #fff;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
.form-radio input:checked + .radio-mark {
    border-color: var(--primary);
    background: var(--primary);
}
.form-check-group .field-feedback {
    margin-left: 25px;
}
.file-upload {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 69px;
    padding: 10px 12px;
    color: var(--muted);
    border: 1.5px dashed #cdd6ed;
    border-radius: 13px;
    background: #fbfcff;
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.file-upload:hover, .file-upload.is-dragging {
    border-color: #8fa2fa;
    background: #f4f6ff;
    box-shadow: 0 0 0 3px rgba(63,94,245,.08);
}
.file-upload-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--primary);
    border-radius: 10px;
    background: var(--primary-soft);
}
.file-upload-icon .icon {
    width: 18px;
    height: 18px;
}
.file-upload-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}
.file-upload-copy strong {
    color: #43516e;
    font-size: var(--text-body);
}
.file-upload-copy small {
    color: var(--muted-2);
    font-size: var(--text-body);
}
.file-upload-name {
    max-width: 130px;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Table, filter, and pagination system ---------------------------------- */
.table-toolbar, .filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    margin-bottom: 14px;
}
.table-toolbar-left, .table-toolbar-right, .filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.table-search {
    display: flex;
    align-items: center;
    min-width: min(100%, 235px);
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #dfe5f1;
    border-radius: 10px;
    background: #fff;
    transition: border-color .17s var(--ease), box-shadow .17s var(--ease);
}
.table-search:focus-within {
    border-color: #91a2f6;
    box-shadow: 0 0 0 3px rgba(63,94,245,.1);
}
.table-search .icon {
    width: 16px;
    height: 16px;
    color: var(--muted-2);
}
.table-search input {
    width: 100%;
    min-width: 0;
    height: 37px;
    padding: 0;
    color: var(--ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--text-body);
}
.table-search input::placeholder {
    color: #a6afc2;
}
.filter-toolbar {
    align-items: flex-end;
    padding: 11px;
    border: 1px solid #e7ebf4;
    border-radius: 13px;
    background: #fafbfe;
}
.filter-toolbar .form-group {
    min-width: 135px;
    flex: 1;
}
.filter-toolbar .form-group > label {
    margin-bottom: 4px;
    font-size: var(--text-body);
}
.filter-toolbar .form-control, .filter-toolbar .form-select {
    min-height: 35px;
    padding-block: 7px;
}
.active-filter-count {
    display: inline-grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    color: #fff;
    border-radius: 99px;
    background: var(--primary);
    font-size: var(--text-body);
    font-weight: 600;
}
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e8ecf4;
    border-radius: 13px;
    background: #fff;
    scrollbar-color: #c8d1e5 transparent;
    scrollbar-width: thin;
}
.data-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    text-align: left;
}
.data-table caption {
    padding: 10px 14px;
    color: var(--muted);
    text-align: left;
    font-size: var(--text-body);
}
.data-table thead {
    color: #78839b;
    background: #f8faff;
}
.data-table th {
    border-bottom: 1px solid #e9edf5;
    font-weight: 600;
    letter-spacing: .025em;
    white-space: nowrap;
}
.data-table td {
    color: var(--ink);
    border-bottom: 1px solid #edf0f6;
    font-size: var(--text-body);
}
.data-table tbody tr {
    transition: background .16s var(--ease);
}
.data-table tbody tr:not(.table-empty):hover {
    background: #f0faff;
}
.data-table tbody tr:last-child td {
    border-bottom: 0;
}
.data-table td strong, .table-primary {
    color: var(--ink);
    font-weight: 600;
}
.data-table td small, .table-secondary {
    display: block;
    margin-top: 1px;
    color: var(--muted-2);
    font-size: var(--text-secondary);
}
.data-table .table-actions {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
}
.data-table .table-actions .icon-button {
    width: 29px;
    height: 29px;
    border-radius: 8px;
}
.data-table .table-actions .icon {
    width: 15px;
    height: 15px;
}
.table-empty td {
    padding: 0;
    border-bottom: 0;
}
.table-empty .empty-state {
    min-height: 190px;
}
.table-select {
    width: 39px;
    padding-right: 0 !important;
}
.table-check {
    display: inline-grid;
    width: 17px;
    height: 17px;
    place-items: center;
    cursor: pointer;
}
.table-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.table-check span {
    display: block;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c3ccdc;
    border-radius: 5px;
    background: #fff;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.table-check input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 3px #fff;
}
.table-check input:focus-visible + span {
    outline: 3px solid rgba(63,94,245,.22);
    outline-offset: 2px;
}
.table-check input:indeterminate + span {
    background: linear-gradient(var(--primary), var(--primary)) center / 10px 3px no-repeat #fff;
    border-color: var(--primary);
}
.table-check input:disabled + span {
    background: #ececec;
    opacity: .55;
    cursor: not-allowed;
}
.table-row-selected {
    background: #f3f6ff !important;
}
.table-sort {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    color: inherit;
    border: 0;
    background: none;
    font: inherit;
    text-transform: inherit;
}
.table-sort:hover {
    color: var(--primary);
}
th[aria-sort="ascending"] .table-sort .icon {
    transform: rotate(180deg);
}
.table-sort .icon {
    width: 12px;
    height: 12px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 16px 0 0;
}
.pagination a, .pagination-gap {
    display: inline-grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    padding: 0 7px;
    color: var(--muted);
    border-radius: 9px;
    font-size: var(--text-body);
    font-weight: 600;
}
.pagination a:hover {
    color: var(--primary);
    background: var(--primary-soft);
}
.pagination a.is-current {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 4px 9px rgba(63,94,245,.20);
}
.pagination a.is-disabled {
    opacity: .42;
    pointer-events: none;
}
.pagination-control {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.pagination-control .icon {
    width: 14px;
    height: 14px;
}
/* Tabs, activity, and standard record details --------------------------- */
.tabs {
    min-width: 0;
}
.tab-list {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 3px;
    border: 1px solid #e4e8f2;
    border-radius: 12px;
    background: #f5f7fb;
    scrollbar-width: none;
}
.tab-list::-webkit-scrollbar {
    display: none;
}
.tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 33px;
    padding: 0 11px;
    color: var(--muted);
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: var(--text-body);
    font-weight: 600;
    white-space: nowrap;
    transition: color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.tab-button:hover {
    color: var(--ink);
}
.tab-button.is-active {
    color: var(--primary);
    background: #fff;
    box-shadow: 0 2px 6px rgba(35,52,100,.08);
}
.tab-button .icon {
    width: 15px;
    height: 15px;
}
.tab-count {
    display: inline-grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    color: currentColor;
    border-radius: 999px;
    background: currentColor;
    font-size: var(--text-body);
}
.tab-count::first-line {
    color: #fff;
}
.tab-panel {
    padding-top: 18px;
}
.timeline {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.timeline-item {
    display: grid;
    position: relative;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 10px;
    min-height: 62px;
}
.timeline-item:not(:last-child)::before {
    position: absolute;
    top: 29px;
    bottom: -3px;
    left: 14px;
    width: 1px;
    content: "";
    background: #e2e7f1;
}
.timeline-dot {
    display: inline-grid;
    z-index: 1;
    width: 29px;
    height: 29px;
    place-items: center;
    color: var(--primary);
    border: 1px solid #dce4fb;
    border-radius: 10px;
    background: #f0f3ff;
}
.timeline-dot .icon {
    width: 15px;
    height: 15px;
}
.timeline-content {
    min-width: 0;
    padding: 3px 0 15px;
}
.timeline-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.timeline-title-row strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.timeline-title-row time {
    flex: 0 0 auto;
    color: var(--muted-2);
    font-size: var(--text-body);
}
.timeline-content p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.timeline-user {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--text-body);
}
.record-hero {
    align-items: center;
    padding: 20px;
    border: 1px solid #e0e6f4;
    border-radius: var(--radius);
    background: linear-gradient(115deg, rgba(235,240,255,.92), rgba(255,255,255,.88) 56%, rgba(244,237,255,.76));
    box-shadow: var(--shadow-xs);
}
.record-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}
.record-identity-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: var(--primary);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.record-identity-icon .icon {
    width: 23px;
    height: 23px;
}
.record-identity h1, .record-identity h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 20px;
    letter-spacing: -.035em;
}
.record-identity p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.record-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #e6eaf3;
    border-radius: 12px;
    background: #e6eaf3;
}
.record-meta {
    min-width: 0;
    padding: 11px;
    background: #fff;
}
.record-meta span {
    display: block;
    color: var(--muted-2);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.record-meta strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink);
    font-size: var(--text-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Dialogs, toasts, and command palette ---------------------------------- */
.modal {
    display: grid;
    position: fixed;
    z-index: 1000;
    inset: 0;
    place-items: center;
    padding: 18px;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 61, .36);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: min(800px, calc(100dvh - 36px));
    overflow: auto;
    border: 1px solid rgba(229,234,245,.9);
    border-radius: 21px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 25px 80px rgba(15,26,66,.24);
    animation: modal-in .2s var(--ease);
}
.modal-sm {
    width: min(100%, 410px);
}
.modal-lg {
    width: min(100%, 760px);
}
.modal-xl {
    width: min(100%, 1040px);
}
@keyframes modal-in {
from  {
        opacity: 0;
        transform: translateY(10px) scale(.975);
    }
    to  {
        opacity: 1;
        transform: none;
    }
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 19px 14px;
    border-bottom: 1px solid #edf0f6;
}
.modal-header > div {
    min-width: 0;
}
.modal-header h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 16px;
    letter-spacing: -.03em;
}
.modal-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.modal-header > .icon-button {
    width: 31px;
    height: 31px;
    margin: -3px -4px 0 0;
}
.modal-header > .icon-button .icon {
    width: 17px;
    height: 17px;
}
.modal-body {
    padding: 18px 19px;
}
.modal-body > :first-child {
    margin-top: 0;
}
.modal-body > :last-child {
    margin-bottom: 0;
}
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 19px;
    border-top: 1px solid #edf0f6;
    background: #fbfcff;
}
.confirm-icon {
    display: inline-grid;
    width: 31px;
    height: 31px;
    place-items: center;
    margin-bottom: 8px;
    color: var(--red);
    border-radius: 10px;
    background: var(--red-soft);
}
.confirm-icon .icon {
    width: 17px;
    height: 17px;
}
.confirm-modal .modal-header {
    align-items: flex-start;
}
.confirm-modal .modal-header h2 {
    font-size: 15px;
}
.confirm-modal .modal-body > p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.confirm-phrase-field {
    display: grid;
    gap: 5px;
    margin-top: 15px;
    color: #394660;
    font-size: var(--text-body);
    font-weight: 600;
}
.confirm-phrase-field strong {
    color: var(--red);
    letter-spacing: .05em;
}
.modal-open {
    overflow: hidden;
}
.toast-stack {
    display: grid;
    position: fixed;
    z-index: 1100;
    top: 22px;
    right: 22px;
    width: min(360px, calc(100vw - 32px));
    gap: 9px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px;
    pointer-events: auto;
    border: 1px solid #e2e8f4;
    border-radius: 15px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: toast-in .28s var(--ease);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
@keyframes toast-in {
from  {
        opacity: 0;
        transform: translateX(18px);
    }
    to  {
        opacity: 1;
        transform: none;
    }
}
.toast.is-leaving {
    opacity: 0;
    transform: translateX(15px);
}
.toast-icon {
    display: inline-grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 10px;
}
.toast-icon .icon {
    width: 17px;
    height: 17px;
}
.toast-info .toast-icon {
    color: var(--cyan);
    background: var(--cyan-soft);
}
.toast-success .toast-icon {
    color: var(--green);
    background: var(--green-soft);
}
.toast-warning .toast-icon {
    color: var(--orange);
    background: var(--orange-soft);
}
.toast-danger .toast-icon {
    color: var(--red);
    background: var(--red-soft);
}
.toast-copy {
    min-width: 0;
    flex: 1;
    padding-top: 1px;
}
.toast-copy strong {
    display: block;
    color: var(--ink);
    font-size: var(--text-body);
}
.toast-copy p {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.toast-dismiss {
    width: 27px;
    height: 27px;
    color: var(--muted);
}
.toast-dismiss .icon {
    width: 15px;
    height: 15px;
}
.command-palette {
    display: grid;
    position: fixed;
    z-index: 1050;
    inset: 0;
    place-items: start center;
    padding: min(12vh, 100px) 16px 16px;
}
.command-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16,27,61,.39);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.command-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 610px);
    overflow: hidden;
    border: 1px solid rgba(229,234,246,.96);
    border-radius: 19px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 27px 82px rgba(11,23,61,.27);
    animation: modal-in .2s var(--ease);
}
.command-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px;
    border-bottom: 1px solid #ebeff6;
}
.command-search-row > .icon {
    width: 19px;
    height: 19px;
    color: var(--primary);
}
.command-search-row input {
    min-width: 0;
    flex: 1;
    padding: 0;
    color: var(--ink);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
}
.command-search-row input::placeholder {
    color: #9ba5b9;
}
.command-body {
    max-height: min(56vh, 440px);
    overflow-y: auto;
    padding: 9px;
}
.command-label {
    margin: 3px 6px 6px;
    color: var(--muted-2);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: .065em;
    text-transform: uppercase;
}
.command-results {
    display: grid;
    gap: 2px;
}
.command-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 11px;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.command-item:hover, .command-item.is-active {
    background: #f1f4ff;
}
.command-item.is-active {
    box-shadow: inset 0 0 0 1px #dce4ff;
}
.command-item-icon {
    display: inline-grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    color: var(--primary);
    border-radius: 9px;
    background: var(--primary-soft);
}
.command-item-icon .icon {
    width: 16px;
    height: 16px;
}
.command-item-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0;
}
.command-item-copy strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.command-item-copy small {
    color: var(--muted);
    font-size: var(--text-body);
}
.command-arrow {
    width: 15px;
    height: 15px;
    color: #aeb8ca;
}
.command-empty {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 180px;
    color: var(--muted);
    text-align: center;
}
.command-empty .icon {
    width: 23px;
    height: 23px;
    color: var(--primary);
}
.command-empty strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.command-empty span {
    font-size: var(--text-body);
}
.command-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    color: var(--muted-2);
    border-top: 1px solid #edf0f6;
    background: #fafbfe;
    font-size: var(--text-body);
}
.command-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.command-footer .icon {
    width: 13px;
    height: 13px;
}
.command-footer kbd {
    min-width: 18px;
    padding: 1px 4px;
    font-size: 9px;
}
/* Miscellaneous reusable view patterns ---------------------------------- */
.activity-list {
    display: grid;
    gap: 0;
}
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f6;
}
.activity-item:first-child {
    padding-top: 0;
}
.activity-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.activity-icon {
    display: inline-grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    color: var(--primary);
    border-radius: 10px;
    background: var(--primary-soft);
}
.activity-icon .icon {
    width: 16px;
    height: 16px;
}
.activity-copy {
    min-width: 0;
    flex: 1;
}
.activity-copy p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-body);
}
.activity-copy strong {
    color: var(--ink);
}
.activity-copy time {
    display: block;
    margin-top: 2px;
    color: var(--muted-2);
    font-size: var(--text-body);
}
.list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f6;
}
.list-row:last-child {
    border-bottom: 0;
}
.list-row-copy {
    min-width: 0;
    flex: 1;
}
.list-row-copy strong, .list-row-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-row-copy strong {
    color: var(--ink);
    font-size: var(--text-body);
}
.list-row-copy span {
    margin-top: 1px;
    color: var(--muted);
    font-size: var(--text-body);
}
.list-row-meta {
    flex: 0 0 auto;
    color: var(--muted-2);
    font-size: var(--text-body);
    text-align: right;
}
.note-box {
    padding: 13px;
    color: var(--muted);
    border: 1px solid #e3e8f5;
    border-radius: 12px;
    background: #fafbff;
    font-size: var(--text-body);
}
.callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    color: #385277;
    border: 1px solid #dbe9fb;
    border-radius: 13px;
    background: #f4f9ff;
    font-size: var(--text-body);
}
.callout .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--primary);
}
.tone-purple {
    color: var(--purple);
}
.tone-primary {
    color: var(--primary);
    background: var(--primary-soft);
}
.tone-success {
    color: var(--green);
    background: var(--green-soft);
}
.tone-warning {
    color: var(--orange);
    background: var(--orange-soft);
}
.tone-danger {
    color: var(--red);
    background: var(--red-soft);
}
.tone-info {
    color: var(--cyan);
    background: var(--cyan-soft);
}
/* Live modules, dashboard composition, auth, and responsive behavior.
   These extend the shared component tokens, preserving one signature palette. */
body {
    font-size:14px;
}
button,input,select,textarea {
    font-family:inherit;
}
button {
    cursor:pointer;
}
a {
    overflow-wrap:anywhere;
}
[hidden] {
    display:none!important;
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.text-muted,.muted {
    color:var(--muted);
}
.text-danger {
    color:var(--red);
}
.d-block {
    display:block;
}
.numeric {
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.grid,.content-grid {
    display:grid;
    gap:var(--space-section);
    margin-bottom:20px;
}
.grid-2,.two-column {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid>* {
    min-width:0;
}
.grid > .glass-card, .content-grid > .glass-card, .template-dashboard-grid > .glass-card, .health-grid > .glass-card, .media-grid > .glass-card {
    margin-bottom: 0;
}
.glass-card {
    margin-bottom:20px;
}
.dashboard-primary>.glass-card,.dashboard-sidebar>.glass-card {
    margin-bottom:0;
}
.glass-card>h2,.glass-card>p,.glass-card>.details-list,.glass-card>.compact-list,.glass-card>.timeline,.glass-card>.section-title-row {
    margin:var(--space-card);
}
.form-section,.filter-card,.record-hero {
    padding:var(--space-card);
}
.form-section-heading p {
    color:var(--muted);
}
.form-field {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:17px;
    font-size: var(--text-body);
    font-weight: 600;
    color:var(--ink);
}
/* Keep label text and its required marker on one line instead of separate flex rows. */
label.form-field>.form-control,label.form-field>.form-select,label.form-field>input,label.form-field>select,label.form-field>textarea,label.form-field>.password-field {
    display:block;
    width:100%;
    margin-top:8px;
}
label.form-field>small {
    display:block;
    margin-top:8px;
}
.form-field small,.form-field>p {
    font-size:var(--text-body);
    font-weight:400;
    color:var(--muted);
    line-height:1.6;
}
.form-control,.form-select {
    min-height:44px;
    font-size:14px;
    padding:11px 13px;
}
textarea.form-control {
    height:auto;
    min-height:100px;
}
.form-grid .form-field {
    margin-bottom:0;
}
.form-grid {
    margin-bottom:18px;
}
.form-field:has(textarea) {
    grid-column:1/-1;
}
.form-actions,.page-actions,.section-title-row,.filter-row,.table-toolbar {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.form-actions {
    margin-top:22px;
}
.section-title-row {
    justify-content:space-between;
}
.filter-row>* {
    flex:0 0 auto;
}
.filter-row>input {
    flex:0 1 360px;
    min-width:0;
    max-width:100%;
}
.filter-row>.form-control, .filter-row>.form-select {
    min-height:28px;
    padding-top:3px;
    padding-bottom:3px;
    line-height:20px;
    border-radius:2px;
}
.filter-row>select {
    width:auto;
}
@media (max-width: 900px) {
    .filter-row>.form-control, .filter-row>.form-select {
        min-height:40px;
        padding-top:9px;
        padding-bottom:9px;
    }
}
.table-toolbar {
    padding:15px 24px;
    border-bottom:1px solid var(--line);
}
.table-toolbar input {
    flex:1;
    min-width:180px;
}
.table-toolbar select {
    width:auto;
}
.checkbox-label,.widget-choice {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 0;
    font-size: var(--text-body);
}
.checkbox-label input,.widget-choice input {
    accent-color:var(--primary);
    width:17px;
    height:17px;
}
.inline-form {
    display:inline-flex;
    margin:0 3px;
}
.btn-block {
    width:100%;
}
.btn-sm {
    min-height:31px;
    font-size:11px;
}
.btn-icon {
    padding:8px;
    min-width:36px;
}
.btn-light {
    background:white;
    color:var(--primary);
    border:1px solid white;
}
.btn-ghost {
    background:transparent;
}
.required {
    color:var(--red);
}
.is-invalid {
    border-color:var(--red)!important;
}
.table-responsive,.table-wrap {
    overflow-x:auto;
    max-width:100%;
    border-radius:16px;
}
.data-table td {
    vertical-align:middle;
}
.record-list .table-wrap {
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
.record-list .data-table th {
    padding: 10px 8px;
    background: #f5f6f7;
    font-weight: 400;
    border-bottom: 1px solid #dedede;
}
.directory-toolbar {
    padding-bottom: 16px;
    border-bottom: 1px solid #dedede;
}
.directory-reset {
    padding: 4px 8px;
    color: #2b77c4;
}
.directory-utilities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}
.list-bulk[hidden] {
    display: none;
}
.record-list .data-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #dedede;
}
.record-list .data-table tr.is-selected td {
    background: #edf7ff;
}
.record-list .record-name {
    color: #2b77c4;
    font-weight: 400;
}
.record-list .person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.record-list .person-cell > .avatar {
    flex-shrink: 0;
}
.record-list .table-select {
    width: 32px;
    min-width: 32px;
}
.list-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
    font-size: 12px;
    color: #737373;
}
.list-pager nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.list-pager a {
    color: #2b77c4;
}
.list-pager [aria-current] {
    color: #222;
    font-weight: 600;
}
.list-pager [aria-disabled] {
    opacity: .6;
}
.list-bulk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.list-bulk select {
    padding: 5px 36px 5px 8px;
    border: 1px solid #ccc;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23222' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    box-shadow: none;
}
.list-bulk select:focus {
    outline: none;
}
.list-bulk select:focus-visible {
    outline: none;
    text-decoration: none;
}
.list-all-matching {
    flex-basis: 100%;
}
.list-row-actions summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--ink);
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 8px;
    list-style: none;
}
.list-bulk select:hover,
.list-bulk select:focus-visible,
.list-row-actions summary:hover,
.list-row-actions[open] summary {
    background-color: #ececec;
}
.data-table .list-row-actions .btn:hover,
.data-table .list-row-actions .btn:focus-visible {
    background: #767676;
    color: #fff;
}
.list-row-actions summary:focus-visible {
    outline: 2px solid #2b77c4;
    outline-offset: 2px;
}
.list-row-actions summary .icon {
    width: 20px;
    height: 20px;
}
.list-row-actions summary::-webkit-details-marker {
    display: none;
}
.list-row-actions > div {
    min-width: 150px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px;
    box-shadow: 0 3px 8px #0002;
    z-index: 200;
}
.list-row-actions form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.data-table .list-row-actions .btn {
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    background: transparent;
    color: #222;
    box-shadow: none;
}
@media (max-width: 640px) {
    .list-row-actions summary {
        width: 40px;
        height: 40px;
    }
    .list-row-actions .btn, .list-row-actions summary {
        min-height: 40px;
        font-size: 14px;
    }
    .list-pager nav {
        row-gap: 12px;
    }
}
body.app-body:has(.record-list) {
    background: #fff;
}
body:has(.record-list) .filter-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.data-table td:has(> .inline-form) {
    white-space: nowrap;
}
.data-table td:first-child:has(> strong) {
    min-width: 170px;
}
.data-table th {
    padding:14px 18px;
}
.data-table td small {
    font-size:var(--text-secondary);
}
.data-table .btn {
    margin:2px;
}
.status-badge {
    font-size:12px;
    padding:6px 9px;
}
.data-table td details {
    max-width:360px;
}
.details-list {
    display:grid;
    gap:14px;
    font-size:var(--text-body);
}
.details-list>div {
    display:grid;
    grid-template-columns:100px 1fr;
    gap:10px;
}
.details-list dt {
    color:var(--muted);
    font-size:inherit;
}
.details-list dd {
    margin:0;
    font-size:inherit;
    color:var(--ink);
    overflow-wrap:anywhere;
}
.record-hero {
    display:flex;
    justify-content:space-between;
    gap:24px;
}
.record-hero-meta {
    display:flex;
    gap:25px;
    align-items:center;
}
.record-hero-meta span,.record-hero-meta strong {
    display:block;
}
.record-hero-meta span {
    color:var(--muted);
    font-size:var(--text-body);
}
.record-hero-meta strong {
    font-size: var(--text-body);
}
.compact-list,.timeline {
    padding:0;
    list-style:none;
}
.compact-list li,.timeline li {
    padding:13px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.compact-list li>span:last-child,.timeline li>span {
    font-size:var(--text-body);
    color:var(--muted);
}
.pre-line {
    white-space:pre-line;
}
.tabs:not([data-tabs]) {
    display:flex;
    gap:6px;
    border-bottom:1px solid var(--line);
    margin:0 0 24px;
    padding-bottom:8px;
    flex-wrap: wrap;
}
.tabs .tab {
    padding:10px 16px;
    border-radius:10px;
    font-size: var(--text-body);
    color:var(--muted);
}
.tabs .tab.active {
    background:var(--primary-soft);
    color:var(--primary);
    font-weight: 600;
}
.list-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:17px 0;
    border-bottom:1px solid var(--line);
}
.list-item:last-child {
    border-bottom:0;
}
.list-item p {
    font-size:var(--text-secondary);
    margin:5px 0;
}
.list-item>div {
    min-width:0;
}
.list-item strong {
    font-size:14px;
}
.alert {
    margin-bottom:18px;
    font-size: var(--text-body);
    line-height:1.6;
}
.alert ul {
    margin:0;
}
.message-preview {
    white-space:normal;
    overflow-wrap:anywhere;
}
.search-form {
    display:flex;
    gap:12px;
}
.search-form input {
    flex:1;
}
.dropdown-panel form button {
    display:flex;
    gap:10px;
    align-items:center;
    border:0;
    background:transparent;
    padding:12px;
    width:100%;
    text-align:left;
    font-size: var(--text-body);
    border-radius:9px;
}
.sidebar-profile form {
    margin:0;
}
.sidebar-logout {
    border:0;
    background:none;
}
.sidebar-brand .brand-copy strong {
    font-size:17px;
}
.nav-sub-link {
    font-size: var(--text-body);
}
.dashboard-welcome {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:15px 0 26px;
}
.dashboard-welcome h1 {
    font-size:30px;
    letter-spacing:-1.1px;
    margin:9px 0;
    font-weight: 600;
}
.dashboard-welcome p {
    font-size: var(--text-body);
    color:var(--muted);
    margin:0;
}
.greeting-spark {
    color:#eca844;
    font-size:28px;
}
.eyebrow {
    color:#8b94ac;
    font-size:9px;
    font-weight: 600;
    letter-spacing:1.7px;
    text-transform:uppercase;
    margin-bottom:8px;
}
.live-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#35b98a;
    margin-right:7px;
}
.date-pill {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid #e7ebf4;
    border-radius:10px;
    font-size: var(--text-body);
    color:#7b879e;
    background:rgba(255,255,255,.8);
    white-space:nowrap;
}
.date-pill .icon {
    width:14px;
    height:14px;
}
.demo-banner {
    display:flex;
    gap:11px;
    align-items:center;
    border:1px solid #e4e8fb;
    padding:12px 16px;
    border-radius:12px;
    margin-bottom:22px;
    font-size: var(--text-body);
    color:#7581a0;
}
.demo-banner>.icon {
    color:#8272df;
}
.demo-banner strong {
    color:#607097;
}
.demo-banner a {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.demo-banner a .icon {
    width:13px;
}
.stat-card[class*="accent-"] {
    display:block;
    min-height:156px;
    padding:20px;
    border-radius:18px;
    border-top:2px solid #a4bbff;
}
.stat-card.accent-purple {
    border-top-color:#c8b4ed;
    background:linear-gradient(135deg,#fff,#fcfaff);
}
.stat-card.accent-orange {
    border-top-color:#f1cf9f;
    background:linear-gradient(135deg,#fff,#fffcf9);
}
.stat-card.accent-green {
    border-top-color:#95d8c0;
    background:linear-gradient(135deg,#fff,#f8fdfb);
}
.stat-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}
.stat-top .stat-label {
    font-size: var(--text-body);
    font-weight: 600;
}
.stat-icon {
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:12px;
}
.stat-icon .icon {
    width:18px;
    height:18px;
}
.stat-value {
    display:block;
    font-size:30px;
    letter-spacing:-1px;
    line-height:1.15;
    color:#263655;
    font-weight: 600;
}
.stat-bottom {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:15px;
    flex-wrap:wrap;
}
.stat-bottom .stat-trend {
    font-size: var(--text-body);
    margin:0;
}
.stat-bottom .stat-caption {
    font-size: var(--text-body);
}
.positive {
    color:#28a67f;
}
.negative {
    color:#dc5a75;
}
.warm {
    color:#d49b48;
}
.tone-blue {
    background:#edf2ff;
    color:#557ae7;
}
.tone-purple {
    background:#f4eeff;
    color:#9971df;
}
.tone-orange {
    background:#fff5e6;
    color:#e4a552;
}
.tone-green {
    background:#e7f7f0;
    color:#39ae84;
}
.stat-sparkline {
    position:absolute;
    right:15px;
    bottom:46px;
    width:75px;
    height:30px;
    fill:none;
    stroke:#7292f2;
    stroke-width:2;
    opacity:.35;
}
.stat-decoration {
    display:none;
}
.card-header h2 {
    font-size:16px;
    letter-spacing:-.35px;
}
.card-header .eyebrow {
    font-size:8px;
    margin-bottom:6px;
}
.chart-summary {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin:4px 0 18px;
}
.chart-summary strong {
    display:block;
    font-size:27px;
    letter-spacing:-.8px;
    color:#2f405f;
}
.chart-summary .text-muted {
    font-size:10px;
}
.chart-area {
    height:235px;
}
.chart-data {
    color:var(--muted);
    font-size:10px;
    padding-top:8px;
}
.chart-data summary {
    cursor:pointer;
}
.text-link {
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-size: var(--text-body);
}
.text-link .icon {
    width:14px;
}
.record-title {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--ink);
}
.record-title strong {
    display:block;
    font-size: var(--text-body);
}
.record-title small {
    display:block;
    font-size: var(--text-body);
    color:var(--muted);
    margin-top:4px;
}
.project-symbol {
    display:grid;
    place-items:center;
    flex:0 0 35px;
    height:35px;
    border-radius:11px;
}
.project-symbol .icon {
    width:17px;
    height:17px;
}
.progress-cell {
    display:flex;
    align-items:center;
    gap:8px;
}
.progress-cell progress {
    width:70px;
    height:5px;
    border:0;
    border-radius:10px;
    accent-color:#7c91ec;
}
.progress-cell progress::-webkit-progress-bar {
    background:#edf0fa;
    border-radius:10px;
}
.progress-cell progress::-webkit-progress-value {
    border-radius:10px;
}
.progress-cell span {
    font-size: var(--text-body);
    color:var(--muted);
}
.focus-banner {
    position:relative;
    overflow:hidden;
    padding:28px;
    border:1px solid #e0e3fc;
    border-radius:19px;
    min-height:246px;
}
.focus-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    background:rgba(255,255,255,.8);
    border-radius:12px;
    color:#9580de;
    margin-bottom:22px;
}
.focus-banner .eyebrow {
    font-size:8px;
    color:#8c83b2;
}
.focus-banner h2 {
    font-size:23px;
    letter-spacing:-.75px;
    line-height:1.2;
    color:#4a507f;
    margin:10px 0;
}
.focus-banner p {
    font-size: var(--text-body);
    color:#8b8baa;
    max-width:235px;
    line-height:1.6;
    margin-bottom:18px;
}
.focus-banner .btn {
    font-size:10px;
    min-height:34px;
    position:relative;
    z-index:1;
}
.focus-orb {
    position:absolute;
    width:135px;
    height:135px;
    border:24px solid #ddd9f5;
    border-radius:50%;
    right:-43px;
    bottom:-40px;
    opacity:.5;
}
.focus-task {
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:13px 0;
    border-bottom:1px solid #edf0f5;
    color:var(--ink);
}
.focus-task:last-child {
    border-bottom:0;
}
.task-check {
    display:block;
    flex:0 0 15px;
    height:15px;
    border:1.5px solid #d7dfee;
    border-radius:5px;
    margin-top:3px;
}
.focus-task strong {
    display:block;
    font-size: var(--text-body);
    font-weight: 600;
}
.focus-task small {
    display:block;
    font-size: var(--text-body);
    color:#9aa4b7;
    margin-top:5px;
}
.focus-task i {
    padding:0 4px;
    font-style:normal;
}
.focus-tasks {
    padding-top:3px;
    padding-bottom:8px;
}
.customer-health {
    display:flex;
    align-items:center;
    gap:25px;
}
.customer-health svg {
    width:125px;
    flex:0 0 125px;
    height:125px;
}
.donut-value {
    font-size:23px;
    fill:#4b4b71;
    font-weight: 600;
}
.donut-label {
    font-size:10px;
    fill:#9199b0;
}
.customer-legend {
    display:grid;
    gap:10px;
    flex:1;
}
.customer-legend>div {
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.customer-legend .status-badge {
    font-size:9px;
}
.customer-legend strong {
    font-size: var(--text-body);
}
.activity-row {
    display:flex;
    align-items:center;
    gap:13px;
    position:relative;
    padding:13px 0;
    border-bottom:1px solid #f0f2f7;
}
.activity-row:last-child {
    border:0;
}
.activity-node {
    display:grid;
    place-items:center;
    flex:0 0 31px;
    height:31px;
    border-radius:50%;
    color:#869de2;
    background:#f0f4ff;
}
.activity-node .icon {
    width:14px;
}
.activity-row p {
    margin:0;
    font-size: var(--text-body);
    color:#8a95ab;
}
.activity-row p strong {
    color:#566781;
}
.activity-row small {
    font-size: var(--text-body);
    color:#a0a9bb;
}
.activity-row time {
    font-size: var(--text-body);
    color:#a0a9bb;
    margin-left:auto;
    white-space:nowrap;
}
.workspace-note {
    display:flex;
    gap:11px;
    padding:12px 6px;
    color:#a0aac0;
}
.workspace-note .icon {
    width:20px;
}
.workspace-note strong {
    font-size: var(--text-body);
    color:#8290a8;
}
.workspace-note p {
    font-size: var(--text-body);
    margin:5px 0;
}
dialog.modal {
    inset:auto;
    margin:auto;
    width:min(500px,calc(100% - 28px));
    padding:0;
    border:1px solid #e5eaf5;
    border-radius:20px;
    max-height:90vh;
    overflow:auto;
    box-shadow:0 30px 90px #1a2b5444;
    background:white;
}
dialog.modal:not([open]) {
    display:none;
}
dialog.modal::backdrop {
    background:#16274b66;
    backdrop-filter:blur(4px);
}
.auth-page .app-workspace {
    margin:0!important;
}
.auth-page .app-main,.auth-page .content-shell {
    padding:0!important;
    max-width:none;
}
.auth-page .app-footer {
    display:none;
}
.auth-layout {
    display:grid;
    grid-template-columns:1.04fr 1fr;
    min-height:100vh;
    width:100%;
}
.auth-story {
    position:relative;
    overflow:hidden;
    padding:8vh 6vw;
}
.auth-brand {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:9vh;
    color:#384971;
    font-size:22px;
}
.auth-brand .brand-mark {
    width:43px;
    height:43px;
    border-radius:14px;
    font-size:20px;
    display:grid;
    place-items:center;
    color:white;
    background:linear-gradient(135deg,#5f83f7,#9c7beb);
    box-shadow:0 9px 25px #8096e63b;
}
.auth-kicker {
    font-size:9px;
    letter-spacing:1.8px;
    color:#8c8fb3;
    font-weight: 600;
}
.auth-story h1 {
    font-size:clamp(36px,4.1vw,62px);
    line-height:1.12;
    color:#39446d;
    letter-spacing:-2px;
    margin:24px 0;
}
.auth-story>p {
    font-size:14px;
    color:#8891ad;
    max-width:380px;
    line-height:1.85;
}
.auth-story>small {
    font-size: var(--text-body);
    color:#9da5bf;
    display:block;
    margin-top:35px;
}
.auth-orbit {
    position:relative;
    width:90%;
    height:215px;
    margin:45px 0 0;
}
.auth-stat {
    padding:24px;
    background:#ffffffb8;
    backdrop-filter:blur(10px);
    border:1px solid white;
    border-radius:20px;
    box-shadow:0 18px 45px #758dbd1a;
    width:90%;
    transform:rotate(-3deg);
}
.auth-stat span {
    display:block;
    font-size: var(--text-body);
    color:#9a9fba;
}
.auth-stat strong {
    display:block;
    font-size:18px;
    color:#647299;
    margin-top:8px;
}
.mini-bars {
    display:flex;
    align-items:flex-end;
    gap:13px;
    height:80px;
    padding:15px 10px 0;
}
.mini-bars i {
    width:28px;
    height:30%;
    border-radius:6px;
    background:linear-gradient(#9aa5f6,#d7deff);
}
.mini-bars i:nth-child(2) {
    height:55%;
}
.mini-bars i:nth-child(3) {
    height:45%;
}
.mini-bars i:nth-child(4) {
    height:75%;
}
.mini-bars i:nth-child(5) {
    height:65%;
}
.mini-bars i:nth-child(6) {
    height:90%;
}
.mini-bars i:nth-child(7) {
    height:100%;
    background:linear-gradient(#b098ec,#e5d9ff);
}
.auth-float {
    position:absolute;
    padding:11px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid white;
    background:#ffffffd9;
    box-shadow:0 10px 25px #788db51a;
    border-radius:12px;
    font-size: var(--text-body);
    color:#9099b4;
}
.auth-float-one {
    right:-10px;
    top:-20px;
    transform:rotate(4deg);
}
.auth-float-one .icon {
    color:#60bea0;
}
.auth-float-two {
    bottom:10px;
    left:5px;
    transform:rotate(2deg);
}
.auth-float-two .icon {
    color:#a590d9;
}
.auth-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:40px;
}
.auth-form {
    width:min(100%,380px);
}
.auth-form h2 {
    font-size:32px;
    letter-spacing:-1px;
    margin:18px 0 12px;
    color:#31415f;
}
.auth-form h2 span {
    color:#d1ad6f;
}
.auth-form>p {
    font-size: var(--text-body);
    line-height:1.8;
    margin-bottom:30px;
}
.auth-form .form-field {
    margin-bottom:22px;
}
.auth-form .form-control {
    min-height:47px;
}
.password-field {
    position:relative;
}
.password-field input {
    padding-right:44px;
}
.password-field button {
    position:absolute;
    right:3px;
    top:4px;
    border:0;
    background:transparent;
    color:#a1abc0;
}
.auth-options {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin:10px 0 27px;
    font-size: var(--text-body);
}
.auth-options a {
    color:#7989d5;
}
.auth-footnote {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:30px;
    font-size: var(--text-body);
    color:#adb6c7;
}
.auth-footnote .icon {
    width:14px;
}
.calendar-grid {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    border-left:1px solid var(--line);
    border-top:1px solid var(--line);
}
.calendar-day {
    min-height:112px;
    padding:10px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.calendar-day.today {
    background:#f1f5ff;
}
.calendar-day>strong {
    font-size:12px;
}
.calendar-label {
    text-align:center;
    color:var(--muted);
    font-size: var(--text-body);
    padding:10px;
}
.calendar-event {
    display:block;
    background:#edf1ff;
    color:#6179c7;
    font-size: var(--text-body);
    border-radius:5px;
    padding:5px;
    margin-top:5px;
    overflow-wrap:anywhere;
}
.media-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.media-card {
    padding:15px;
    margin:0;
}
.media-preview {
    display:grid;
    place-items:center;
    height:140px;
    background:#f4f6fb;
    border-radius:12px;
    margin-bottom:14px;
}
.media-preview img {
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:12px;
}
.media-preview .icon {
    width:42px;
    height:42px;
    color:#8d9bd2;
}
.media-card h3 {
    font-size: var(--text-body);
    overflow-wrap:anywhere;
}
.media-card p {
    font-size: var(--text-body);
    color:var(--muted);
}
.health-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-section);
    margin-bottom:var(--space-section);
}
.health-item {
    padding:20px;
}
.health-item h3 {
    font-size:14px;
    margin:0 0 12px;
}
.health-item p {
    font-size:var(--text-secondary);
    margin:0 0 16px;
    color:var(--muted);
}
@media(min-width:1500px) {
    .content-shell {
        max-width:1500px;
    }
    .dashboard-welcome h1 {
        font-size:34px;
    }
    .stat-value {
        font-size:34px;
    }
    .chart-area {
        height:270px;
    }
}
@media(max-width:1200px) {
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .dashboard-welcome {
        align-items:flex-start;
    }
    .dashboard-welcome .page-actions {
        justify-content:flex-end;
    }
    .dashboard-grid {
        grid-template-columns:minmax(0,1.4fr) minmax(265px,1fr);
    }
    .customer-health {
        gap:10px;
    }
    .customer-health svg {
        width:95px;
        flex-basis:95px;
    }
    .media-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:1000px) {
    .dashboard-grid {
        grid-template-columns:1fr;
    }
    .dashboard-sidebar {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .workspace-note {
        grid-column:1/-1;
    }
    .dashboard-welcome {
        flex-direction:column;
        gap:16px;
    }
    .grid-2,.two-column {
        grid-template-columns:1fr;
    }
    .auth-story {
        padding:8vh 5vw;
    }
    .auth-story h1 {
        font-size:42px;
    }
}
@media(max-width:800px) {
    .app-sidebar {
        position:fixed!important;
        left:14px!important;
        top:14px!important;
        bottom:14px!important;
        width:246px!important;
        transform:translateX(-280px);
        z-index:1000;
        transition:transform .2s;
    }
    .mobile-menu-open .app-sidebar {
        transform:none;
    }
    .sidebar-scrim {
        display:none;
        position:fixed;
        inset:0;
        background:#14244777;
        backdrop-filter:blur(3px);
        z-index:990;
    }
    .mobile-menu-open .sidebar-scrim {
        display:block;
    }
    .app-workspace,.sidebar-collapsed .app-workspace {
        margin-left:0!important;
        padding-left:0!important;
    }
    .app-shell {
        padding:0!important;
    }
    .app-main {
        padding:0 16px 90px!important;
    }
    .content-shell {
        padding:0!important;
    }
    .app-topbar {
        margin:14px 16px 24px!important;
        left:auto!important;
        min-height:57px;
    }
    .mobile-menu-toggle {
        display:inline-grid!important;
    }
    .topbar-context {
        display:none;
    }
    .topbar-user-name {
        display:none;
    }
    .global-search {
        max-width:240px;
    }
    .mobile-bottom-nav {
        display:block!important;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        background:#fffffff5;
        backdrop-filter:blur(16px);
        border-top:1px solid #e7ebf5;
        padding:9px 12px calc(10px + env(safe-area-inset-bottom));
        z-index:900;
    }
    .mobile-nav-inner {
        display:flex;
        justify-content:space-around;
    }
    .mobile-nav-link {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:5px;
        color:#9ba8bc;
        font-size: var(--text-body);
        padding:7px 16px;
        border-radius:12px;
    }
    .mobile-nav-link.is-active {
        color:#6b82d9;
        background:#f0f4ff;
    }
    .mobile-nav-link .icon {
        width:19px;
        height:19px;
    }
    .sidebar-collapse {
        display:none!important;
    }
    .sidebar-collapsed .nav-label,.sidebar-collapsed .brand-copy,.sidebar-collapsed .profile-copy,.sidebar-collapsed .status-copy,.sidebar-collapsed .nav-section span {
        display:initial!important;
        opacity:1!important;
        width:auto!important;
    }
    .sidebar-collapsed .nav-link {
        justify-content:flex-start!important;
    }
    .sidebar-collapsed .sidebar-profile {
        display:flex;
    }
    .sidebar-collapsed .nav-submenu {
        display:none;
    }
    .sidebar-collapsed .nav-group.is-open .nav-submenu {
        display:block;
    }
    .sidebar-collapsed .app-sidebar .nav-link::after {
        display:none;
    }
    .record-hero {
        flex-direction:column;
    }
    .media-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .health-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .auth-layout {
        grid-template-columns:1fr;
    }
    .auth-story {
        display:none;
    }
    .auth-panel {
        min-height:100vh;
        padding:32px 24px;
    }
    .auth-page .app-main {
        padding:0!important;
    }
    .calendar-day {
        min-height:85px;
        padding:6px;
    }
    .calendar-event {
        font-size: var(--text-body);
    }
    .data-table {
        min-width:600px;
    }
    .app-footer {
        font-size: var(--text-body);
    }
}
@media(max-width:520px) {
    .dashboard-welcome h1 {
        font-size:27px;
    }
    .dashboard-welcome .date-pill {
        display:none;
    }
    .dashboard-welcome .page-actions {
        width:100%;
        justify-content:space-between;
    }
    .page-actions .btn {
        font-size:var(--text-body);
    }
    .dashboard-sidebar {
        grid-template-columns:1fr;
    }
    .stat-card[class*="accent-"] {
        padding:15px;
        min-height:150px;
    }
    .stat-value {
        font-size:26px;
    }
    .stat-top .stat-label {
        font-size: var(--text-body);
    }
    .stat-icon {
        width:29px;
        height:29px;
    }
    .stat-bottom .stat-caption {
        font-size: var(--text-body);
    }
    .stat-sparkline {
        display:none;
    }
    .stats-grid {
        gap:10px;
    }
    .card-header {
        padding:19px;
    }
    .card-body {
        padding:19px;
    }
    .chart-summary {
        align-items:flex-start;
        flex-direction:column;
    }
    .chart-summary strong {
        font-size:26px;
    }
    .demo-banner {
        align-items:flex-start;
        font-size: var(--text-body);
    }
    .demo-banner a {
        display:none;
    }
    .form-grid,.form-grid.form-grid-3 {
        grid-template-columns:1fr;
    }
    .form-section {
        padding:20px;
    }
    .page-header {
        flex-wrap:wrap;
        gap:15px;
    }
    .page-header h1 {
        font-size:25px;
    }
    .form-actions {
        justify-content:stretch;
    }
    .form-actions .btn {
        flex:1;
    }
    .global-search {
        width:auto;
        min-width:0;
        flex:1;
    }
    .global-search .search-placeholder {
        font-size: var(--text-body);
    }
    .global-search kbd {
        display:none;
    }
    .topbar-actions {
        gap:4px;
    }
    .quick-action-button {
        display:none;
    }
    .app-topbar {
        gap:8px;
    }
    .notification-panel {
        width:calc(100vw - 36px);
        right:-65px;
    }
    .health-grid {
        grid-template-columns:1fr;
    }
    .calendar-day {
        min-height:70px;
    }
    .calendar-event {
        font-size: var(--text-body);
        padding:3px;
    }
    .record-hero-meta {
        flex-wrap:wrap;
    }
    .customer-health {
        gap:28px;
    }
    .customer-health svg {
        width:125px;
        flex-basis:125px;
    }
    .media-grid {
        gap:10px;
    }
    .media-preview {
        height:105px;
    }
    .media-card {
        padding:12px;
    }
    .alert {
        font-size: var(--text-body);
    }
    .details-list>div {
        grid-template-columns:80px 1fr;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}
/* Native buttons in the navigation inherit its contrast, never form-button defaults. */
.sidebar-nav button.nav-link {
    background:transparent;
    border:0;
    color:#c7d1ef;
    text-align:left;
    width:100%;
    font:inherit;
}
.sidebar-nav button.nav-link:hover {
    background:rgba(255,255,255,.08);
    color:white;
}
.upload-progress {
    width:100%;
    margin-top:12px;
}
/* Soft matte refinement: shared surfaces stay opaque and quiet. Glass is
   reserved for the floating topbar; color communicates actions and statistics.
   No geometry or responsive rules change here, including label/sidebar fixes. */
.app-body {
    background: #f6f8fb;
}
.app-body::before, .app-body::after {
    display: none;
}
.brand-mark, .auth-brand .brand-mark, .avatar {
    background: #625fd7;
    box-shadow: none;
}
.nav-link.is-active::before {
    box-shadow: none;
}
.glass-card, .card, .form-section, .filter-card, .table-wrap, .table-responsive {
    border: 1px solid #dfe5ee;
    box-shadow: var(--shadow-xs);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.glass-card:hover, .card:hover {
    box-shadow: var(--shadow-xs);
}
.glass-card::before, .glass-card::after {
    display: none;
}
.glass-card .table-responsive, .glass-card .table-wrap {
    border: 0;
    box-shadow: none;
}
.data-table, .data-table tbody {
    background: #fff;
}
.data-table thead, .data-table th {
    background: #f7f9fc;
    color: var(--ink);
}
.data-table tbody tr:hover {
    background: #f0faff;
}
.form-control, .form-select {
    background-color: #fff;
    border-color: #cfd8e5;
    box-shadow: none;
}
.form-control::placeholder, textarea::placeholder {
    color: #69758a;
    opacity: 1;
}
.form-control:focus, .form-select:focus {
    border-color: #526fe1;
    box-shadow: 0 0 0 3px rgba(63,94,245,.12);
}
.app-topbar {
    border-color: #e0e6ef;
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(10px);
}
.dropdown-panel, .modal, dialog.modal, .toast {
    background: #fff;
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mobile-bottom-nav {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.btn-primary, .quick-action-button {
    background: #405cdd;
    border-color: #405cdd;
    box-shadow: 0 2px 4px rgba(40,65,150,.12);
}
.btn-primary:hover, .quick-action-button:hover {
    background: #344ec7;
    border-color: #344ec7;
    box-shadow: 0 2px 5px rgba(40,65,150,.15);
}
.btn-secondary, .btn-light {
    background: #fff;
    border-color: #d7dfeb;
    box-shadow: none;
}
.btn-success {
    background: #07875c;
    box-shadow: none;
}
.btn-danger {
    background: #cf3657;
    box-shadow: none;
}
.stat-card[class*="accent-"] {
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.stat-card[class*="accent-"]:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}
.stat-card::before, .stat-card::after, .stat-sparkline {
    display: none;
}
.demo-banner {
    background: #f0f3fa;
    border-color: #dfe5f0;
    color: var(--muted);
}
.focus-banner {
    background: #f1f2fa;
    border-color: #e0e3ef;
    box-shadow: none;
}
.focus-orb {
    display: none;
}
.focus-banner p, .focus-banner .eyebrow, .eyebrow, .date-pill,
.focus-task small, .activity-row p, .activity-row small, .activity-row time,
.workspace-note, .workspace-note strong, .auth-story>p, .auth-story>small,
.auth-kicker, .auth-stat span, .auth-float, .auth-footnote, .auth-options,
.global-search, .mobile-nav-link {
    color: var(--muted);
}
.text-link {
    color: #405cbe;
}
.donut-label {
    fill: var(--muted);
}
.auth-story {
    background: #f1f4fa;
}
.auth-stat, .auth-float {
    background: #fff;
    border-color: #dfe5ee;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    transform: none;
}
.progress-cell progress::-webkit-progress-value {
    background: #7082d7;
}
/* Approved admin-template shell: Plesk-style structure, opaque white/blue surfaces. */
body.app-body {
    background: #fff;
    font-size: 14px;
}
.app-shell {
    padding: 0 !important;
}
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 224px;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    background: #384859;
    box-shadow: none;
    border: 0;
}
.sidebar-inner {
    padding: 0;
}
.sidebar-brand {
    min-height: 72px;
    padding: 16px;
    gap: 8px;
    margin: 0;
    border-bottom: 1px solid #ffffff12;
}
.brand-copy strong {
    font-size: 19px;
}
.brand-copy small, .sidebar-status {
    display: none;
}
.sidebar-brand .brand-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 5px;
    background: #1685ed;
    box-shadow: none;
}
.sidebar-collapse {
    position: absolute;
    top: 50%;
    right: -16px;
    margin: -44px 0 0;
    width: 16px;
    height: 88px;
    min-width: 16px;
    padding: 0;
    border: 0;
    border-radius: 0 4px 4px 0;
    color: #222;
    background: #e6e6e6;
    z-index: 2;
}
.sidebar-collapse:hover {
    background: #dedede;
}
.sidebar-collapse:focus-visible {
    outline: 2px solid #2b77c4;
    outline-offset: 2px;
}
.sidebar-collapse .icon {
    width: 10px;
    height: 10px;
}
.sidebar-nav {
    padding: 4px 0;
}
.nav-link {
    min-height: 36px;
    border-radius: 0;
    margin: 0;
    padding: 7px 18px;
    line-height: 20px;
    color: #e3eaf0;
    gap: 12px;
    font-size: 14px;
    font-weight: 400;
}
.nav-link .icon {
    width: 20px;
    height: 20px;
}
.nav-link.is-active {
    background: #536a7d;
    color: white;
    box-shadow: none;
}
.nav-link.is-active::before, .nav-link::after {
    display: none;
}
.nav-link:hover {
    background: #3e89d5;
}
.nav-section {
    padding: 6px 18px;
    line-height: 20px;
    margin: 0;
    background: #2d3a47;
    color: #c8d3dd;
    font-size: var(--text-body);
    letter-spacing: .04em;
}
.sidebar-bottom {
    padding: 12px 16px;
    border-top: 1px solid #ffffff14;
}
.sidebar-profile {
    background: transparent;
    border: 0;
    padding: 0;
}
.avatar {
    background: #1685ed;
    box-shadow: none;
}
.app-workspace {
    margin-left: 224px !important;
    padding: 0 !important;
}
.app-topbar {
    position: sticky;
    top: 0;
    margin: 0 0 24px !important;
    width: auto;
    min-height: 64px;
    padding: 12px 24px;
    border: 0;
    border-bottom: 1px solid #e4e8ed;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.topbar-context, .quick-action-button {
    display: none;
}
.global-search {
    max-width: 560px;
    width: 100%;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: #f3f3f3;
}
.app-main {
    padding: 0 24px 24px !important;
}
.content-shell {
    max-width: none;
    padding: 0 !important;
}
.page-header h1, .template-heading h1 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: normal;
    margin: 0 0 6px;
    color: var(--ink-strong);
}
.page-header {
    margin-bottom: var(--space-page);
}
.page-header p, .template-heading p {
    color: var(--ink);
}
.template-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}
.template-breadcrumb {
    font-size: var(--text-body);
    margin-bottom: 14px;
}
.page-heading > p, .template-heading > div > p:last-child {
    font-size: var(--text-body);
    margin: 8px 0 0;
}
.template-heading .template-breadcrumb {
    margin-top: 0;
}
#exportSelection {
    margin: 0 0 12px;
}
.glass-card, .card, .form-section, .filter-card, .table-wrap, .table-responsive {
    border-radius: 8px;
    border-color: #e4e8ed;
    box-shadow: 0 1px 3px #25324405;
    background: white;
}
.card-header {
    padding: 18px 20px;
    border-color: #edf0f3;
}
.card-header:has(+ .card-body) {
    padding-bottom: 0;
}
.card-header h2, .form-section h2 {
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
}
.card-body {
    padding: var(--space-card);
}
.card-body > :first-child {
    margin-top: 0;
}
.card-body > :last-child {
    margin-bottom: 0;
}
.card-body > form > :last-child {
    margin-bottom: 0;
}
.form-section > .form-grid:last-child {
    margin-bottom: 0;
}
.card-body > .list-item:first-child {
    padding-top: 0;
}
.card-body > .list-item:last-child {
    padding-bottom: 0;
}
.btn {
    min-height: 28px;
    border-radius: 2px;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    padding: 4px 20px;
    box-shadow: inset 0 -1px 0 #0000002e;
    transform: none;
}
.btn-primary {
    background: #2b77c4;
    border-color: #2b77c4;
    box-shadow: inset 0 -1px 0 #0000002e;
}
.btn-primary:hover {
    background: #2364a5;
    border-color: #2364a5;
    box-shadow: inset 0 -1px 0 #0000002e;
}
.btn-secondary {
    background: #ececec;
    border-color: transparent;
    color: #222;
}
.btn-secondary:hover {
    background: #dedede;
    color: #222;
}
.btn:active {
    box-shadow: inset 0 1px 1px #0000002e;
}
.btn:disabled {
    opacity: .47;
    cursor: not-allowed;
}
@media (max-width: 900px) {
    .btn {
        min-height: 40px;
        font-size: 14px;
        padding: 10px 16px;
    }
}
.form-control, .form-select {
    min-height: 40px;
    border-radius: 5px;
    font-size: 14px;
    padding: 9px 12px;
}
.form-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23222' stroke-width='1.5'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-size: 12px 8px;
}
label.form-field {
    display: block;
    color: #253244;
    font-size: 14px;
    font-weight: 600;
}
label.form-field > input, label.form-field > select, label.form-field > textarea {
    margin-top: 8px;
    width: 100%;
}
.form-section {
    padding: 20px;
}
.form-section-heading {
    margin-bottom: 18px;
}
.form-section-heading p {
    margin-top: 4px;
    font-size: var(--text-body);
}
.form-grid {
    gap: 18px 24px;
}
.form-field-wide {
    grid-column: 1 / -1;
}
.template-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.template-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    background: white;
    border: 1px solid #e4e8ed;
    border-radius: 8px;
    color: #253244;
}
.template-stat-icon {
    display: grid;
    place-items: center;
    background: #1685ed;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    flex-shrink: 0;
}
.template-stat-icon .icon {
    width: 24px;
    height: 24px;
}
.template-stat strong {
    display: block;
    font-size: 30px;
    margin: 5px 0;
}
.template-stat small {
    display: block;
    color: #627184;
}
.template-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 22px;
    align-items: start;
}
.template-list-row {
    padding: 12px 0;
    border-bottom: 1px solid #edf0f3;
}
.template-list-row:first-child {
    padding-top: 0;
}
.template-list-row p {
    color: #627184;
    margin: 4px 0;
}
.template-list-row small {
    color: #6a7788;
}
.template-quick-links a {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f3;
}
.data-table {
    font-size: 14px;
}
.data-table th {
    font-size: var(--text-body);
    text-transform: none;
    background: #f6f8fa;
}
.data-table td {
    padding: 14px 18px;
}
.customer-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: 20px;
    align-items: start;
}
.customer-form-main {
    display: grid;
    gap: 20px;
}
.customer-form-side .form-field {
    margin-bottom: 18px;
}
.customer-form-layout .form-section {
    margin: 0;
}
.record-form > .form-actions {
    padding: 18px 0;
    margin-top: 4px;
}
.sidebar-collapsed .app-sidebar {
    width: 48px;
}
.sidebar-collapsed .app-workspace {
    margin-left: 48px !important;
}
.sidebar-collapsed .sidebar-brand {
    padding: 12px 8px;
}
.sidebar-collapsed .sidebar-collapse {
    display: inline-grid;
}
.sidebar-collapsed .sidebar-bottom {
    padding: 12px 8px;
}
.sidebar-collapsed .nav-link {
    padding: 7px 14px;
}
.app-footer {
    margin: 0;
    padding: 12px 24px;
    flex-wrap: wrap;
    flex-shrink: 0;
    color: #666;
    background: #f0f0f0;
    border-top: 1px solid #d4d4d4;
}
@media (max-width: 1100px) {
    .template-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .customer-form-layout {
        grid-template-columns: minmax(0, 2fr) minmax(210px, 1fr);
    }
}
@media (max-width: 900px) {
    body .app-sidebar {
        inset: 0 auto 0 0 !important;
        width: 224px !important;
        height: 100dvh;
        transform: translateX(-100%);
        z-index: 1000;
    }
    .app-sidebar .nav-link {
        min-height: 44px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
    body.mobile-menu-open .app-sidebar {
        transform: translateX(0);
    }
    .mobile-menu-open .app-sidebar {
        transform: translateX(0);
    }
    .app-workspace, .sidebar-collapsed .app-workspace {
        margin-left: 0 !important;
    }
    .app-topbar {
        padding: 12px 16px;
        margin: 0 0 20px !important;
    }
    .app-main {
        padding: 0 16px 24px !important;
    }
    .app-footer {
        padding: 12px 16px 85px;
    }
    .template-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .mobile-menu-toggle {
        display: inline-grid !important;
    }
    .sidebar-collapse {
        display: none !important;
    }
    .sidebar-collapsed .sidebar-brand {
        flex-direction: row;
        padding: 16px;
    }
    .sidebar-collapsed .nav-link {
        padding: 10px 18px;
    }
    .sidebar-collapsed .nav-section {
        height: auto;
        padding: 10px 18px;
    }
    .sidebar-collapsed .brand-copy {
        display: block !important;
    }
    .sidebar-collapsed .brand-copy small {
        display: none !important;
    }
}
@media (max-width: 680px) {
    .customer-form-layout, .form-grid {
        grid-template-columns: 1fr;
    }
    .template-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }
    .template-stat {
        padding: 14px;
        gap: 10px;
    }
    .template-stat-icon {
        width: 34px;
        height: 34px;
    }
    .template-stat strong {
        font-size: 25px;
    }
    .template-stat small {
        font-size: var(--text-body);
    }
}

/* Work Journal uses the shared form and table typography. */
.journal-filters { margin-bottom: 24px; flex-wrap: wrap; }
.journal-filters label { display: flex; align-items: center; gap: 8px; margin: 0; }
.journal-filters input[type="date"] { height: 28px; min-height: 28px; padding: 3px 8px; border-radius: 2px; }
.journal-form { max-width: 1100px; }
.journal-form > label { display: block; margin-bottom: 8px; }
.journal-date { max-width: 240px; }
.journal-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border: 1px solid #ccc; background: #f5f6f7; }
.journal-editor-toolbar button { border: 0; background: transparent; color: #222; padding: 6px 12px; font: inherit; cursor: pointer; }
.journal-editor-toolbar button:hover { background: #767676; color: white; }
.journal-editor-toolbar button[aria-label="Bold"] { font-weight: bold; }
.journal-editor-toolbar button[aria-label="Italic"] { font-style: italic; }
.journal-editor-toolbar button[aria-label="Underline"] { text-decoration: underline; }
.journal-editor { min-height: 300px; padding: 16px; border: 1px solid #ccc; border-top: 0; background: white; overflow-wrap: anywhere; }
.journal-editor:focus { outline: 2px solid #536a7d; outline-offset: 1px; }
.journal-content { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.journal-content ul, .journal-content ol { padding-left: 28px; }
.journal-content ul { list-style: disc; }
.journal-content ol { list-style: decimal; }
.journal-reading { max-width: 1100px; }
.journal-reading hr { margin: 24px 0; }
.record-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.diary-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.diary-reading { max-width: 720px; margin: 0 auto; padding-bottom: 24px; overflow-wrap: anywhere; }
.diary-reading h1 { font-size: 32px; line-height: 1.3; font-weight: 400; margin: 12px 0 32px; }
.diary-prose { font-size: 16px; line-height: 1.8; color: #222; }
.diary-prose p { margin: 0 0 24px; }
.diary-prose ul, .diary-prose ol { padding-left: 28px; margin: 0 0 24px; }
.diary-prose ul { list-style: disc; }
.diary-prose ol { list-style: decimal; }
.diary-prose li { margin-bottom: 8px; }
.diary-neighbours { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #ddd; padding-top: 20px; margin-top: 32px; }
.diary-neighbours > div:last-child { text-align: right; }
.diary-neighbours span { display: block; margin-top: 4px; }
.diary-updated { margin-top: 24px; }
.diary-controls > a:not(.btn), .diary-neighbours a { color: #2b77c4; }

/* Global page introduction. Breadcrumbs stay outside; filters remain below. */
.page-header-row {
    background: #eef5fb;
    border: 1px solid #d5e3ef;
    border-left: 4px solid #2b77c4;
    border-radius: 4px;
    padding: 22px 24px;
    align-items: center;
    flex-wrap: wrap;
}
.page-header-row .page-heading { flex: 1 1 280px; overflow-wrap: anywhere; }
.page-header-row .page-actions { flex: 0 1 auto; margin: 0; }
.page-header-row .page-heading h1 { font-size: 28px; line-height: 1.3; margin: 0; font-weight: 400; }
.page-header-row .page-heading p { margin: 8px 0 0; font-size: var(--text-body); color: #222; }
@media (max-width: 640px) {
    .page-header-row { padding: 18px 16px; gap: 16px; }
    .page-header-row .page-heading { flex-basis: 100%; }
    .page-header-row .page-heading h1 { font-size: 24px; }
    .page-header-row .page-actions { width: 100%; justify-content: flex-start; }
}

/* Shared personal-entry reader: sage header, readable prose, unchanged app shell. */
.diary-controls { max-width: 1040px; margin: 0 auto 20px; }
.entry-reading {
    max-width: 1040px; margin: 0 auto 32px; padding: 0 0 24px;
    border: 1px solid #dde5df; border-radius: 6px; background: #fff;
    overflow-wrap: anywhere; box-shadow: 0 2px 8px #22382b08;
}
.entry-reading > header {
    padding: 32px 40px; background: #e2ebe3;
    border-radius: 5px 5px 0 0; border-bottom: 1px solid #d6e1d8;
}
.entry-reading > header .muted { color: #466052; margin: 0; }
.entry-reading > header h1 { font-size: 30px; line-height: 1.35; font-weight: bold; color: #233e32; margin: 12px 0 0; }
.entry-reading .diary-prose { margin: 32px auto; padding: 0 40px; }
.entry-reading .diary-prose li::marker { color: #64816b; }
.entry-reading .diary-neighbours, .entry-reading .diary-updated { margin-left: 40px; margin-right: 40px; }
.entry-reading .diary-updated { border-top: 1px solid #e3e9e4; padding-top: 20px; }
.entry-confirmation { max-width: 680px; margin: 24px auto; border: 1px solid #dce3df; border-radius: 6px; overflow: hidden; background: #fff; }
.entry-confirmation > header { padding: 24px 28px; background: #f0f5f1; border-bottom: 1px solid #dce3df; }
.entry-confirmation h1 { font-size: 24px; line-height: 1.35; margin: 8px 0 12px; }
.entry-confirmation p { margin: 0; }
.confirmation-eyebrow { color: #466052; }
.purge-acknowledgement { display: flex; gap: 10px; align-items: flex-start; margin: 20px 28px; }
.confirmation-records { list-style: none; padding: 0; margin: 12px 28px; max-height: 280px; overflow: auto; }
.confirmation-records li { padding: 12px 0; border-bottom: 1px solid #e6e9e7; overflow-wrap: anywhere; }
.entry-confirmation .form-actions { margin: 0; padding: 20px 28px; border-top: 1px solid #e6e9e7; }
/* Support both plain semantic controls and legacy .btn menu items. */
.data-table .list-row-actions > div a,
.data-table .list-row-actions > div button {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    margin: 0; padding: 8px 12px; border: 0; border-radius: 2px;
    background: transparent; color: #222; box-shadow: none;
    font: inherit; cursor: pointer; text-decoration: none;
}
.data-table .list-row-actions > div a:hover,
.data-table .list-row-actions > div button:hover,
.data-table .list-row-actions > div a:focus-visible,
.data-table .list-row-actions > div button:focus-visible {
    background: #767676; color: #fff; text-decoration: none;
}
@media (max-width: 640px) {
    .entry-reading > header { padding: 24px 20px; }
    .entry-reading > header h1 { font-size: 24px; }
    .entry-reading .diary-prose { padding: 0 20px; margin: 24px auto; }
    .entry-reading .diary-neighbours, .entry-reading .diary-updated { margin-left: 20px; margin-right: 20px; }
    .entry-confirmation > header, .entry-confirmation .form-actions { padding: 20px; }
    .confirmation-records { margin-left: 20px; margin-right: 20px; }
}
@media (max-width: 767px) {
    .journal-filters input[type="date"] { height: 42px; }
}

/* Decorative icons inherit each button's normal, hover and disabled colors. */
.btn > .button-action-icon { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: middle; }
summary.btn > .button-action-icon { margin-right: 6px; }

/* Only content below the topbar scrolls. Reserve its gutter on short pages too. */
body.app-body { height: 100dvh; overflow: hidden; }
body.app-body .app-shell { height: 100dvh; min-height: 0; }
body.app-body .app-workspace { height: 100%; min-height: 0; }
body.app-body .app-topbar { flex-shrink: 0; position: relative; margin-bottom: 0 !important; }
.app-scroll-region { flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; overscroll-behavior-y: contain; padding-top: 24px; display: flex; flex-direction: column; }
.app-scroll-region > .app-main { flex: 1 0 auto; }
body.mobile-menu-open .app-scroll-region { overflow-y: hidden; }
@supports not (scrollbar-gutter: stable) {
    .app-scroll-region { overflow-y: scroll; }
}

/* Shared contextual help works with keyboard, touch, and without JavaScript. */
.page-help { position: relative; flex: 0 0 auto; text-align: left; }
.page-help > summary { list-style: none; cursor: pointer; }
.page-help > summary::-webkit-details-marker { display: none; }
.page-help-panel { position: absolute; z-index: 80; right: 0; top: calc(100% + 8px); width: min(420px, calc(100vw - 64px)); max-height: 65vh; overflow-y: auto; padding: 22px; background: #fff; border: 1px solid #ccd5dd; border-radius: 4px; box-shadow: 0 6px 22px #0002; font-size: 14px; line-height: 1.7; color: #222; overflow-wrap: anywhere; }
.page-help-panel h2 { font-size: 20px; margin: 0 0 12px; }
.page-help-panel h3 { font-size: 14px; margin: 18px 0 8px; }
.page-help-panel p { margin: 0 0 12px; }
.page-help-panel ol { padding-left: 22px; margin: 0 0 16px; }
.page-help-panel li { margin-bottom: 10px; }
.page-help-note { padding: 12px; background: #eef5fb; border-left: 3px solid #2b77c4; }
.page-help-standalone { display: flex; justify-content: flex-end; margin: 12px 0; }
.auth-body > .page-help-standalone { position: absolute; right: 24px; top: 12px; z-index: 100; }
@media (max-width: 520px) {
    .page-actions > .page-help { margin-left: auto; }
    .page-help-panel { width: min(360px, calc(100vw - 64px)); }
}

/* Private documentation reader; use the shared shell and keep long code contained. */
.handover-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 24px; color: #666; }
.handover-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.handover-contents { background: #f5f7f9; border: 1px solid #dde3e8; padding: 20px; border-radius: 4px; }
.handover-contents h2 { font-size: 16px; margin: 0 0 12px; }
.handover-contents a { display: block; padding: 7px 0; line-height: 1.5; }
.handover-document { min-width: 0; max-width: 1040px; border: 1px solid #dde3e8; border-radius: 4px; padding: 28px; background: #fff; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.handover-document h2 { font-size: 24px; margin: 0 0 20px; }
.handover-document h3 { font-size: 20px; margin: 32px 0 12px; border-top: 1px solid #e4e8ec; padding-top: 24px; }
.handover-document h4 { font-size: 16px; margin: 24px 0 10px; }
.handover-document [id] { scroll-margin-top: 100px; }
.handover-document p, .handover-document ul, .handover-document ol { margin: 0 0 16px; }
.handover-document ul, .handover-document ol { padding-left: 24px; }
.handover-document li { margin: 7px 0; }
.handover-document code { white-space: normal; overflow-wrap: anywhere; background: #f3f5f7; padding: 2px 4px; font-size: var(--text-body); }
.handover-document pre { overflow-x: auto; padding: 16px; background: #f3f5f7; }
.handover-document pre code { white-space: pre; }
.handover-table { overflow-x: auto; margin-bottom: 20px; }
.handover-table table { width: 100%; border-collapse: collapse; }
.handover-table th, .handover-table td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid #dde3e8; }
.handover-table th { background: #f5f7f9; }
@media (max-width: 900px) {
    .handover-layout { grid-template-columns: minmax(0, 1fr); }
    .handover-document { padding: 20px; }
}

/* Mobile acceptance: readable navigation, empty states and predictable controls. */
@media (max-width: 900px) {
    .mobile-nav-link { flex: 1 1 0; min-width: 0; padding: 7px 4px; white-space: nowrap; }
    .mobile-nav-inner { gap: 4px; }
    .sidebar-scrim { position: fixed; inset: 0; background: #14244777; z-index: 990; }
    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open .sidebar-scrim { display: block; visibility: visible; opacity: 1; }
    .data-table:has(.table-empty) { min-width: 0; width: 100%; table-layout: fixed; }
    .data-table:has(.table-empty) thead { display: none; }
    .table-empty .empty-state { max-width: 100%; padding: 28px 16px; }
    .table-empty td { white-space: normal; }
}
@media (max-width: 520px) {
    .form-actions > .text-muted, .form-actions > .muted { flex-basis: 100%; }
    .form-actions > .btn { min-width: 100px; flex-shrink: 0; word-break: normal; overflow-wrap: normal; }
    .journal-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .journal-filters > input, .journal-filters label, .journal-filters input[type="date"] { width: 100%; max-width: 100%; }
    .journal-filters label { display: grid; grid-template-columns: 42px minmax(0, 1fr); }
    .journal-filters > button { justify-self: start; }
    .page-header-row { display: flex; }
    .page-header-row .page-actions { flex-basis: 100%; }
    .page-header-row .page-actions .btn { flex: 1 1 100%; }
    .entry-confirmation .form-actions .btn { flex: 1 1 100%; white-space: normal; }
}
@media (max-width: 380px) {
    .template-stats { grid-template-columns: minmax(0, 1fr); }
}