:root {
    --bg: #fbfaff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: #ffffff;
    --ink: #111827;
    --muted: #6b7280;
    --subtle: #9ca3af;
    --line: rgba(17, 24, 39, 0.08);
    --line-strong: rgba(17, 24, 39, 0.13);
    --brand: #6d3df2;
    --brand-2: #8b5cf6;
    --brand-3: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.14);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 45% 0%, rgba(109, 61, 242, 0.08), transparent 36rem),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 52%, #f7f5ff 100%);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.35rem;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 800;
}

h2 {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    letter-spacing: 0;
    font-weight: 760;
}

label {
    display: block;
    margin-bottom: 0.4rem;
    color: #374151;
    font-size: 0.83rem;
    font-weight: 720;
}

.app-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 17.25rem minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.55rem 1.15rem 1rem;
    border-right: 1px solid rgba(109, 61, 242, 0.12);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.45rem 0.35rem 0.9rem;
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 14px 30px rgba(109, 61, 242, 0.32);
}

.brand-copy strong {
    display: block;
    font-size: 1.08rem;
    font-weight: 820;
}

.brand-copy span {
    display: block;
    margin-top: 0.1rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 0.2rem;
    display: grid;
    gap: 1.05rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(109, 61, 242, 0.28) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 0.35rem;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(109, 61, 242, 0.25);
}

.sidebar-section {
    display: grid;
    gap: 0.25rem;
}

.sidebar-label {
    padding: 0.35rem 0.7rem;
    color: var(--subtle);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sidebar-link {
    min-height: 2.8rem;
    padding: 0 0.85rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #56617a;
    font-size: 0.94rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-link:hover {
    background: #ffffff;
    color: #111827;
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.sidebar-link.is-active {
    background: linear-gradient(135deg, rgba(109, 61, 242, 0.14), rgba(139, 92, 246, 0.08));
    color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
}

.sidebar-link svg,
.icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.user-card-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--avatar-color, var(--brand)), color-mix(in srgb, var(--avatar-color, #5b21b6) 76%, #111827));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 850;
    text-transform: uppercase;
}

.content-shell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 5.95rem;
    padding: 1.1rem 2.35rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.13);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.global-search {
    min-width: min(36rem, 100%);
    height: 3.15rem;
    padding: 0 1.1rem;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--muted);
    box-shadow: var(--shadow-sm);
}

.global-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
}

.global-search kbd {
    padding: 0.12rem 0.42rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: #f8fafc;
    color: var(--subtle);
    font-size: 0.72rem;
    font-weight: 750;
}

.topbar-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #111827;
    cursor: pointer;
    list-style: none;
}

.topbar-profile::-webkit-details-marker {
    display: none;
}

.topbar-profile strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 850;
}

.topbar-profile span span {
    display: block;
    color: #8a93a8;
    font-size: 0.78rem;
    font-weight: 650;
}

.topbar-profile .chevron {
    width: 1.05rem;
    height: 1.05rem;
    transition: transform 0.18s ease;
}

.topbar-profile-menu {
    position: relative;
}

.topbar-profile-menu[open] .chevron {
    transform: rotate(180deg);
}

.profile-popover {
    position: absolute;
    top: calc(100% + 0.9rem);
    right: 0;
    z-index: 30;
    width: min(18.5rem, calc(100vw - 2rem));
    padding: 0.65rem;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.16);
}

.profile-popover-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(217, 225, 236, 0.9);
    margin-bottom: 0.35rem;
}

.profile-popover-head strong,
.profile-popover-head small {
    display: block;
}

.profile-popover-head strong {
    font-weight: 850;
    color: var(--ink);
}

.profile-popover-head small {
    margin-top: 0.18rem;
    color: var(--subtle);
    font-size: 0.78rem;
}

.profile-menu-item {
    width: 100%;
    border: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.75rem;
    border-radius: 0.75rem;
    background: transparent;
    color: #111827;
    font: inherit;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.profile-menu-item:hover {
    background: #f3f0ff;
    color: var(--brand);
}

.profile-menu-item.danger:hover {
    background: #fff1f2;
    color: #e11d48;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.icon-button {
    position: relative;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.notification-dot {
    position: absolute;
    top: 0.45rem;
    right: 0.52rem;
    width: 0.48rem;
    height: 0.48rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--brand);
}

.notification-menu {
    position: relative;
}

.notification-menu summary {
    list-style: none;
}

.notification-menu summary::-webkit-details-marker {
    display: none;
}

.icon-button.has-notifications {
    border-color: rgba(109, 61, 242, 0.55);
    color: var(--brand);
    background: #f4efff;
}

.icon-button.notification-pulse {
    animation: notificationPulse 0.7s ease;
}

@keyframes notificationPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(109, 61, 242, 0.35), var(--shadow-sm);
        transform: scale(1);
    }

    45% {
        box-shadow: 0 0 0 10px rgba(109, 61, 242, 0), var(--shadow-md);
        transform: scale(1.05);
    }

    100% {
        box-shadow: var(--shadow-sm);
        transform: scale(1);
    }
}

.notification-count {
    position: absolute;
    top: -0.4rem;
    right: -0.35rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.28rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
}

.notification-count.is-hidden {
    display: none;
}

.notification-popover {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: 40;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(42rem, calc(100vh - 7rem));
    overflow: hidden;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.18);
    display: flex;
    flex-direction: column;
}

.notification-head {
    padding: 1rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-head strong {
    font-size: 1rem;
    font-weight: 850;
}

.notification-head span {
    color: #8a93a8;
    font-size: 0.82rem;
    font-weight: 700;
}

/* CRM */
.crm-page { display: grid; gap: 1.35rem; }
.crm-hero, .crm-detail-hero, .crm-form-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.crm-hero h1, .crm-detail-hero h1, .crm-form-head h1 { margin: .25rem 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: #111827; }
.crm-hero p, .crm-detail-hero p, .crm-form-head p { margin: .45rem 0 0; color: #64748b; }
.crm-hero-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.crm-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.crm-stat-grid article { min-height: 7.2rem; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid #e4e0f4; border-radius: 1.25rem; background: #fff; box-shadow: 0 14px 34px rgba(57, 42, 105, .07); }
.crm-stat-grid article > span:last-child { display: grid; gap: .2rem; }
.crm-stat-grid strong { font-size: 1.65rem; color: #111827; }
.crm-stat-grid article:last-child strong { font-size: 1.4rem; }
.crm-stat-grid small { color: #64748b; font-weight: 600; }
.crm-stat-icon { display: grid; width: 3.3rem; height: 3.3rem; place-items: center; border-radius: 1rem; }
.crm-stat-icon .icon { width: 1.55rem; height: 1.55rem; }
.crm-stat-icon.purple { color: #6d3df2; background: #eee8ff; }
.crm-stat-icon.blue { color: #1672e8; background: #e7f2ff; }
.crm-stat-icon.amber { color: #dc8500; background: #fff1cf; }
.crm-stat-icon.green { color: #009b68; background: #dff8ee; }
.crm-pipeline-shell { overflow: hidden; border: 1px solid #e4e0f4; border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 30px rgba(57, 42, 105, .05); }
.crm-pipeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid #ece9f5; }
.crm-pipeline-heading h2 { margin: .15rem 0 .2rem; color: #172033; font-size: 1.2rem; }
.crm-pipeline-heading p { margin: 0; color: #7a8598; font-size: .86rem; }
.crm-pipeline-heading .eyebrow { color: #6d3df2; font-size: .69rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.crm-pipeline-board { display: grid; grid-template-columns: repeat(7, minmax(15rem, 1fr)); gap: .75rem; padding: 1rem; overflow-x: auto; background: #f8f7fd; scrollbar-color: #c7b9fa transparent; }
.crm-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid #e8e4f3; background: #fff; }
.crm-pagination-summary { color: #717c91; font-size: .82rem; }.crm-pagination-summary strong { color: #263247; }
.crm-pagination-controls { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.crm-pagination-controls a,.crm-pagination-controls strong,.crm-pagination-controls .is-disabled,.crm-pagination-ellipsis { display: inline-flex; min-width: 2.25rem; min-height: 2.25rem; align-items: center; justify-content: center; padding: .42rem .65rem; border: 1px solid #ddd8ed; border-radius: .65rem; font-size: .78rem; font-weight: 800; }
.crm-pagination-controls a { color: #4f5d73; background: #fff; }.crm-pagination-controls a:hover { color: #6132df; border-color: #a88df7; background: #f5f1ff; }
.crm-pagination-controls strong { color: #fff; border-color: #6d3df2; background: #6d3df2; }
.crm-pagination-controls .is-disabled,.crm-pagination-ellipsis { color: #a7afbd; background: #f7f8fa; }
.crm-column-pagination { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .7rem; border-top: 1px solid #ece9f5; background: #fff; }
.crm-column-pagination a,.crm-column-pagination strong,.crm-column-pagination .is-disabled,.crm-column-pagination .crm-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 1.85rem; min-height: 1.85rem; padding: .25rem; border: 1px solid #e0dbee; border-radius: .55rem; color: #536078; background: #fff; font-size: .72rem; font-weight: 850; }
.crm-column-pagination a:hover { color: #6132df; border-color: #a88df7; background: #f5f1ff; }
.crm-column-pagination strong { color: #fff; border-color: #6d3df2; background: #6d3df2; }
.crm-column-pagination .is-disabled,.crm-column-pagination .crm-pagination-ellipsis { color: #adb4c0; background: #f8f8fa; }
.crm-pipeline-column { align-self: start; overflow: hidden; min-height: 10rem; border: 1px solid #e8e4f3; border-radius: 1rem; background: #fdfdff; }
.crm-pipeline-column > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem .85rem; border-bottom: 1px solid #ece9f5; background: #fff; }
.crm-pipeline-column > header span { display: flex; align-items: center; gap: .5rem; min-width: 0; color: #344054; font-size: .78rem; }
.crm-pipeline-column > header strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-pipeline-column > header i { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 999px; background: #1683d8; }
.crm-pipeline-column > header b { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; flex: 0 0 auto; border-radius: 999px; color: #5d35d5; background: #eee8ff; font-size: .7rem; }
.crm-pipeline-column.is-contacted > header i { background: #6d3df2; }
.crm-pipeline-column.is-meeting_scheduled > header i { background: #f59e0b; }
.crm-pipeline-column.is-proposal > header i { background: #e98600; }
.crm-pipeline-column.is-negotiation > header i { background: #e23b68; }
.crm-pipeline-column.is-active > header i { background: #00a36c; }
.crm-pipeline-column.is-lost > header i { background: #7b8493; }
.crm-pipeline-card-project { display:inline-flex;align-self:flex-start;max-width:100%;padding:.28rem .55rem;border:1px solid color-mix(in srgb,var(--crm-project-color) 35%,white);border-radius:999px;overflow:hidden;color:var(--crm-project-color);background:color-mix(in srgb,var(--crm-project-color) 12%,white);font-size:.68rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap; }
.crm-pipeline-card-project.is-empty { --crm-project-color:#8791a3; }
.crm-pipeline-company-name { color:#172033;font-size:1rem;line-height:1.25; }
.crm-pipeline-opportunity-name { color:#69758a;font-size:.75rem;font-weight:700;line-height:1.35; }
.crm-pipeline-cards { display: grid; align-content: start; gap: .65rem; min-height: 7rem; padding: .65rem; }
.crm-pipeline-card { display: grid; gap: .42rem; padding: .8rem; border: 1px solid #e6e1f2; border-radius: .8rem; color: #172033; background: #fff; box-shadow: 0 5px 14px rgba(37, 28, 77, .06); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.crm-pipeline-card:hover { transform: translateY(-2px); border-color: #bca9ff; box-shadow: 0 8px 20px rgba(74, 45, 170, .12); }
.crm-pipeline-card > small { color: #7b879b; font-size: .68rem; font-weight: 700; }
.crm-pipeline-card > strong { font-size: .84rem; line-height: 1.3; }
.crm-pipeline-card-value { color: #5d35d5; font-size: .78rem; font-weight: 900; }
.crm-pipeline-card-contact { overflow: hidden; color: #657187; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.crm-pipeline-card-edit { width: max-content; color: #6d3df2; font-size: .7rem; font-weight: 800; }
.crm-pipeline-card-actions { display: flex; align-items: center; gap: .45rem; padding-top: .2rem; }
.crm-pipeline-card-view, .crm-pipeline-card-edit { min-height: 1.9rem; padding: .38rem .55rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; }
.crm-pipeline-card-view { color: #fff; background: #6d3df2; }
.crm-pipeline-card-view:hover { color: #fff; background: #5a2dd5; }
.crm-pipeline-card-edit { color: #5d35d5; background: #f0ebff; }
.crm-opportunity-contact { display: grid; gap: .18rem; min-width: 0; overflow-wrap: anywhere; color: #526078; font-size: .75rem; }
.crm-pipeline-card footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .2rem; color: #657187; font-size: .68rem; }
.crm-pipeline-card footer > span { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.crm-pipeline-card footer .mini-avatar { width: 1.35rem; height: 1.35rem; font-size: .55rem; }
.crm-pipeline-card footer em { padding: .22rem .4rem; border-radius: 999px; color: #5d35d5; background: #eee8ff; font-style: normal; font-weight: 900; }
.crm-pipeline-empty { display: grid; min-height: 5.5rem; place-items: center; border: 1px dashed #dcd5ed; border-radius: .75rem; color: #98a1b2; font-size: .75rem; }
.crm-filter-bar { display: grid; grid-template-columns: minmax(16rem, 1.7fr) repeat(3, minmax(10rem, .7fr)) auto; align-items: stretch; gap: .75rem; padding: .9rem; border: 1px solid #e4e0f4; border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 30px rgba(57, 42, 105, .05); }
.crm-search { display: flex; align-items: center; gap: .65rem; padding: 0 1rem; border: 1px solid #ded9ef; border-radius: .85rem; }
.crm-search .icon { color: #8290a7; }
.crm-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #172033; }
.crm-filter-bar > label:not(.crm-search) { display: grid; gap: .1rem; padding: .45rem .75rem; border: 1px solid #ded9ef; border-radius: .85rem; }
.crm-filter-bar label > span { font-size: .68rem; font-weight: 800; color: #7d879b; }
.crm-filter-bar select { min-width: 0; border: 0; outline: 0; background: transparent; color: #172033; font-weight: 700; }
.crm-filter-bar > a { align-self: center; padding: .5rem; color: #6d3df2; font-weight: 800; }
.crm-content-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1rem; align-items: start; }
.crm-content-grid .panel, .crm-detail-grid .panel, .crm-detail-opportunities { padding: 0; overflow: hidden; }
.crm-content-grid .panel-head, .crm-detail-grid .panel-head, .crm-detail-opportunities .panel-head { padding: 1.2rem 1.35rem; border-bottom: 1px solid #edf0f5; }
.crm-content-grid .panel-head p, .crm-detail-grid .panel-head p, .crm-detail-opportunities .panel-head p { margin: .25rem 0 0; color: #7a8598; }
.crm-company-list, .crm-opportunity-list { display: grid; }
.crm-company-row { display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto minmax(8rem, .8fr) auto; align-items: center; gap: .85rem; padding: 1rem 1.25rem; color: #172033; border-bottom: 1px solid #edf0f5; transition: background .18s ease; }
.crm-company-row:hover, .crm-opportunity-row:hover { background: #faf9ff; }
.crm-company-avatar, .crm-detail-avatar { display: grid; place-items: center; color: white; font-weight: 900; background: linear-gradient(145deg, #7043f4, #4d24bf); }
.crm-company-avatar { width: 2.65rem; height: 2.65rem; border-radius: .85rem; }
.crm-company-name, .crm-opportunity-row > span:first-child, .crm-amount { display: grid; gap: .2rem; }
.crm-company-name small, .crm-opportunity-row small, .crm-amount small { color: #7b879b; }
.crm-company-owner { display: flex; align-items: center; gap: .45rem; color: #526078; font-size: .83rem; }
.crm-row-chevron { font-size: 1.6rem; color: #9ba5b5; }
.crm-status, .crm-stage { display: inline-flex; width: max-content; align-items: center; padding: .32rem .65rem; border-radius: 999px; font-size: .73rem; font-style: normal; font-weight: 800; }
.crm-status.is-prospect, .crm-stage.is-new { color: #126fbc; background: #dcf0ff; }
.crm-status.is-customer, .crm-stage.is-active { color: #00885d; background: #d9f8e9; }
.crm-status.is-inactive, .crm-stage.is-lost { color: #6d7481; background: #eceff3; }
.crm-stage.is-contacted { color: #6d3df2; background: #eee8ff; }
.crm-stage.is-meeting_scheduled { color: #a96100; background: #fff0c9; }
.crm-stage.is-proposal { color: #a96100; background: #fff0c9; }
.crm-stage.is-negotiation { color: #c93251; background: #ffe2e9; }
.crm-opportunity-row { display: grid; grid-template-columns: minmax(9rem, 1fr) auto auto auto; align-items: center; gap: .75rem; padding: 1rem 1.2rem; color: #172033; border-bottom: 1px solid #edf0f5; }
.crm-amount { text-align: right; font-weight: 800; }
.crm-close-date { color: #64748b; font-size: .78rem; white-space: nowrap; }
.crm-won-count { color: #009b68; font-size: .78rem; font-weight: 800; }
.crm-detail-identity { display: flex; align-items: center; gap: 1rem; }
.crm-detail-avatar { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; font-size: 1.7rem; }
.crm-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.crm-detail-summary article { display: grid; gap: .55rem; padding: 1.1rem 1.2rem; border: 1px solid #e4e0f4; border-radius: 1rem; background: #fff; }
.crm-detail-summary small { color: #7d8799; font-weight: 700; }
.crm-detail-summary strong { overflow-wrap: anywhere; color: #172033; }
.crm-detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .7fr); gap: 1rem; align-items: start; }
.crm-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
.crm-contact-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .9rem; border: 1px solid #e7e8f0; border-radius: .95rem; }
.crm-contact-card > div { display: grid; gap: .18rem; min-width: 0; }
.crm-contact-card small { color: #7b8798; }
.crm-contact-card a:not(.icon-button) { overflow: hidden; color: #6d3df2; font-size: .78rem; text-overflow: ellipsis; }
.crm-company-info dl { display: grid; margin: 0; padding: .7rem 1.25rem; }
.crm-company-info dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #edf0f5; }
.crm-company-info dt { color: #7a8598; }
.crm-company-info dd { margin: 0; text-align: right; font-weight: 700; }
.crm-notes { padding: 1rem 1.25rem 1.25rem; }
.crm-notes p { color: #5f6c80; line-height: 1.55; }
.crm-client-detail-actions { display: flex; align-items: center; gap: .65rem; }
.crm-client-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .85fr); gap: 1rem; align-items: start; }
.crm-client-detail-grid > .panel { padding: 0; overflow: hidden; }
.crm-client-detail-grid .panel-head { padding: 1.15rem 1.25rem; border-bottom: 1px solid #edf0f5; }
.crm-client-detail-grid .panel-head p { margin: .25rem 0 0; color: #7a8598; }
.crm-client-information dl { display: grid; margin: 0; padding: .65rem 1.25rem; }
.crm-client-information dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .78rem 0; border-bottom: 1px solid #edf0f5; }
.crm-client-information dt { color: #7a8598; }
.crm-client-information dd { margin: 0; max-width: 65%; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.crm-client-description { padding: 1rem 1.25rem 1.3rem; }
.crm-client-description p { margin: .55rem 0 0; color: #5f6c80; line-height: 1.6; }
.crm-note-form { display: grid; gap: .65rem; padding: 1rem 1.25rem; border-bottom: 1px solid #edf0f5; }
.crm-note-form label { color: #344054; font-size: .82rem; font-weight: 800; }
.crm-note-form textarea { min-height: 6.5rem; resize: vertical; }
.crm-note-form .btn { justify-self: end; }
.crm-note-list { display: grid; gap: .75rem; max-height: 32rem; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; }
.crm-note-item { padding: .9rem; border: 1px solid #e7e2f3; border-radius: .85rem; background: #fcfbff; }
.crm-note-item header { display: flex; align-items: center; gap: .6rem; }
.crm-note-item header > span:last-child { display: grid; gap: .15rem; }
.crm-note-item time { color: #8a94a5; font-size: .7rem; }
.crm-note-item p { margin: .7rem 0 0; color: #4f5d73; line-height: 1.55; overflow-wrap: anywhere; }
.crm-note-empty { padding: 1.5rem; border: 1px dashed #dcd5ed; border-radius: .8rem; color: #8a94a5; text-align: center; }
.crm-opportunity-table { overflow-x: auto; }
.crm-opportunity-head, .crm-opportunity-line { display: grid; grid-template-columns: minmax(12rem, 1.5fr) minmax(8rem, .8fr) minmax(8rem, .8fr) minmax(6rem, .55fr) minmax(6rem, .55fr) 2.5rem; align-items: center; gap: .75rem; min-width: 58rem; padding: .85rem 1.25rem; }
.crm-opportunity-head { color: #8893a5; background: #fafaff; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.crm-opportunity-line { border-top: 1px solid #edf0f5; color: #334155; }
.crm-opportunity-line > span:first-child { display: grid; gap: .15rem; }
.crm-opportunity-line small { color: #8792a4; }
.crm-form-head { margin-bottom: .25rem; }
.crm-form-card { max-width: 74rem; border: 1px solid #e3dff2; border-radius: 1.25rem; background: #fff; box-shadow: 0 18px 45px rgba(57, 42, 105, .08); }
.crm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; padding: 1.4rem; }
.crm-form-field { display: grid; align-content: start; gap: .45rem; }
.crm-form-field.is-wide { grid-column: 1 / -1; }
.crm-form-field label { color: #263247; font-weight: 800; }
.crm-form-field label span, .crm-form-field em { color: #e43755; }
.crm-form-field em { font-size: .78rem; font-style: normal; }
.crm-form-field textarea { resize: vertical; }
.crm-searchable-select { position: relative; }
.crm-searchable-input { width: 100%; padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, #526078 50%), linear-gradient(135deg, #526078 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%; background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; }
.crm-searchable-input:focus { border-color: #8c66ff; box-shadow: 0 0 0 3px rgba(109, 61, 242, .12); }
.crm-searchable-menu { position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; right: 0; max-height: 15rem; overflow-y: auto; padding: .35rem; border: 1px solid #ded8ef; border-radius: .85rem; background: #fff; box-shadow: 0 16px 34px rgba(38, 28, 76, .16); }
.crm-searchable-menu button { display: block; width: 100%; padding: .7rem .8rem; border: 0; border-radius: .6rem; color: #263247; background: transparent; text-align: left; cursor: pointer; }
.crm-searchable-menu button:hover, .crm-searchable-menu button:focus { color: #5d35d5; background: #f2edff; outline: 0; }
.crm-searchable-empty { display: block; padding: .8rem; color: #8b95a6; text-align: center; }
.crm-searchable-select select[hidden] { display: none; }
.crm-member-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.crm-member-list label { display: flex; align-items: center; gap: .5rem; padding: .7rem; border: 1px solid #e1ddec; border-radius: .75rem; }
.crm-form-card footer { display: flex; justify-content: flex-end; gap: .7rem; padding: 1rem 1.4rem; border-top: 1px solid #edf0f5; }

@media (max-width: 1100px) {
    .crm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-search { grid-column: 1 / -1; min-height: 3.5rem; }
    .crm-content-grid, .crm-detail-grid, .crm-client-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .crm-hero, .crm-detail-hero, .crm-form-head { align-items: stretch; flex-direction: column; }
    .crm-client-detail-actions { flex-wrap: wrap; }
    .crm-hero-actions { display: grid; }
    .crm-stat-grid, .crm-detail-summary, .crm-form-grid, .crm-contact-grid, .crm-filter-bar { grid-template-columns: 1fr; }
    .crm-search, .crm-form-field.is-wide { grid-column: auto; }
    .crm-pipeline-heading { align-items: flex-start; flex-direction: column; }
    .crm-pipeline-heading .btn { width: 100%; justify-content: center; }
    .crm-pipeline-board { grid-template-columns: repeat(7, minmax(13.5rem, 1fr)); }
    .crm-pagination { align-items: flex-start; flex-direction: column; }
    .crm-company-row { grid-template-columns: auto 1fr auto; }
    .crm-company-row .crm-company-owner, .crm-company-row .crm-status { grid-column: 2; }
    .crm-opportunity-row { grid-template-columns: 1fr auto; }
    .crm-close-date { display: none; }
    .crm-member-list { grid-template-columns: 1fr; }
}

.notification-head-actions {
    display: grid;
    justify-items: end;
    gap: 0.28rem;
}

.notification-head-actions form {
    margin: 0;
}

.notification-head-actions button {
    padding: 0;
    border: 0;
    color: var(--brand);
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.notification-head-actions button:hover:not(:disabled) {
    text-decoration: underline;
}

.notification-head-actions button:disabled {
    color: #aab1bf;
    cursor: default;
}

.notification-list {
    min-height: 0;
    overflow-y: auto;
    padding: 0.45rem;
    flex: 1 1 auto;
}

.notification-item {
    padding: 0.8rem;
    border-radius: 0.85rem;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
    color: #111827;
    transition: background 0.16s ease;
}

.notification-item:hover {
    background: #f7f4ff;
}

.notification-item.is-unread {
    background: linear-gradient(135deg, rgba(109, 61, 242, 0.08), rgba(255, 255, 255, 0.95));
}

.notification-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.72rem;
    background: #eee7ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-item strong,
.notification-item small,
.notification-item em {
    display: block;
}

.notification-item strong {
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    font-weight: 820;
}

.notification-item small {
    color: #68728a;
    line-height: 1.35;
    font-size: 0.8rem;
}

.notification-item em {
    margin-top: 0.35rem;
    color: #9ca3af;
    font-size: 0.73rem;
    font-style: normal;
    font-weight: 700;
}

.notification-empty {
    padding: 1.4rem;
    color: #8a93a8;
    text-align: center;
    font-size: 0.88rem;
}

.notification-more {
    padding: 0.75rem;
    border-top: 1px solid rgba(109, 61, 242, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff);
    flex: 0 0 auto;
}

.notification-more.is-hidden {
    display: none;
}

.notification-more-button {
    width: 100%;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
    padding: 0.78rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 12px 26px rgba(109, 61, 242, 0.22);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-more-button:hover {
    border-color: rgba(109, 61, 242, 0.34);
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.notification-more-button:disabled {
    cursor: progress;
    opacity: 0.68;
    transform: none;
}

.icon-button:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: var(--shadow-md);
}

.app-main {
    width: min(100%, 96rem);
    margin: 0 auto;
    padding: 2rem 2.4rem;
}

.container {
    width: min(100% - 2rem, 34rem);
    margin: 4rem auto 0;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    box-shadow: var(--shadow-md);
}

.app-main.container,
.container.wide,
.container.app-shell {
    width: min(100%, 92rem);
    max-width: none;
    margin: 0 auto;
    padding: 2rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.container.login-shell {
    width: min(100% - 2rem, 76rem);
    margin: 3.5rem auto;
    padding: 0;
    border: 0;
    border-radius: 1.35rem;
    background: transparent;
    box-shadow: none;
}

.login-page {
    min-height: min(42rem, calc(100vh - 7rem));
    overflow: hidden;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 1.35rem;
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(20rem, 0.9fr) minmax(22rem, 1fr);
    box-shadow: 0 28px 90px rgba(17, 24, 39, 0.12);
}

.login-brand-panel {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background:
        linear-gradient(145deg, rgba(109, 61, 242, 0.96), rgba(91, 33, 182, 0.94)),
        linear-gradient(180deg, #7c3aed, #5b21b6);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.login-brand-panel::after {
    content: "";
    position: absolute;
    inset: auto -7rem -7rem auto;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.login-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.login-brand .brand-mark {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.login-brand strong,
.login-brand small {
    display: block;
}

.login-brand strong {
    font-size: 1.05rem;
    font-weight: 900;
}

.login-brand small {
    margin-top: 0.1rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.8rem;
    font-weight: 650;
}

.login-hero-copy {
    position: relative;
    z-index: 1;
}

.login-eyebrow {
    display: inline-flex;
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-hero-copy h1 {
    max-width: 28rem;
    margin-bottom: 1rem;
    color: #ffffff;
    font-size: 2.45rem;
    line-height: 1.04;
}

.login-hero-copy p {
    max-width: 28rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
    font-size: 1rem;
}

.login-feature-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.login-feature-grid span {
    min-height: 5.1rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
}

.login-feature-grid strong,
.login-feature-grid small {
    display: block;
}

.login-feature-grid strong {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 900;
}

.login-feature-grid small {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.35;
    font-size: 0.75rem;
}

.login-card {
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-card-head {
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.login-lock-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: #f1edff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-card h2 {
    margin: 0 0 0.25rem;
    color: #111827;
    font-size: 1.65rem;
    font-weight: 900;
}

.login-card p {
    margin: 0;
    color: #667085;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-field label {
    margin-bottom: 0.45rem;
    color: #172033;
    font-size: 0.82rem;
    font-weight: 820;
}

.login-input-wrap {
    min-height: 3.25rem;
    padding: 0 1rem;
    border: 1px solid rgba(109, 61, 242, 0.16);
    border-radius: 0.9rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #8a93a8;
    box-shadow: var(--shadow-sm);
}

.login-input-wrap:focus-within {
    border-color: rgba(109, 61, 242, 0.45);
    box-shadow: 0 0 0 4px rgba(109, 61, 242, 0.1);
}

.login-input-wrap input {
    width: 100%;
    min-height: 3rem;
    border: 0;
    background: transparent;
    color: #111827;
    outline: none;
}

.login-input-wrap input::placeholder {
    color: #a0a8ba;
}

.login-password-toggle {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    margin-right: -0.35rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: #7d879b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    background: #f1edff;
    color: var(--brand);
    outline: none;
}

.login-password-toggle .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.login-password-toggle .password-eye-closed,
.login-password-toggle[aria-pressed="true"] .password-eye-open {
    display: none;
}

.login-password-toggle[aria-pressed="true"] .password-eye-closed {
    display: block;
}

.login-submit {
    width: 100%;
    min-height: 3.15rem;
    margin-top: 0.25rem;
    justify-content: center;
}

.login-error {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(225, 29, 72, 0.16);
    border-radius: 0.85rem;
    background: #fff1f2;
    color: #be123c;
    font-size: 0.88rem;
    font-weight: 760;
}

.login-links {
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.login-links a {
    color: var(--brand);
    font-size: 0.88rem;
    font-weight: 780;
}

.login-links a:hover {
    text-decoration: underline;
}

.container.auth-reset-shell {
    width: min(100% - 2rem, 30rem);
    margin: 4.5rem auto;
}

.auth-reset-page {
    display: grid;
    gap: 1.1rem;
}

.auth-reset-brand {
    justify-self: center;
    color: #172033;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 900;
}

.auth-reset-brand .brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    font-size: 0.95rem;
}

.auth-reset-card {
    padding: clamp(1.5rem, 5vw, 2.25rem);
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.11);
    display: grid;
    gap: 1rem;
}

.auth-reset-card .login-lock-icon {
    width: 3.25rem;
    height: 3.25rem;
}

.auth-reset-card .login-lock-icon.success {
    background: #dcfce7;
    color: #059669;
}

.auth-reset-card h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.75rem, 5vw, 2.15rem);
    line-height: 1.05;
    font-weight: 900;
}

.auth-reset-card p {
    margin: -0.35rem 0 0.35rem;
    color: #667085;
    line-height: 1.5;
}

.auth-reset-form {
    margin-top: 0.15rem;
}

.auth-reset-back {
    justify-self: center;
    color: #667085;
    font-size: 0.9rem;
    font-weight: 760;
}

.auth-reset-back:hover {
    color: var(--brand);
}

.workspace-chat {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 80;
}

.workspace-chat-toggle {
    position: relative;
    min-width: 7.1rem;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid rgba(109, 61, 242, 0.24);
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-weight: 850;
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.workspace-chat-toggle.has-unread {
    border-color: rgba(109, 61, 242, 0.55);
    background: #f5f0ff;
}

.workspace-chat-toggle.workspace-chat-pulse {
    animation: chatPulse 0.8s ease;
}

@keyframes chatPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(109, 61, 242, 0.38), 0 18px 48px rgba(17, 24, 39, 0.18);
        transform: scale(1);
    }

    48% {
        box-shadow: 0 0 0 12px rgba(109, 61, 242, 0), 0 22px 58px rgba(17, 24, 39, 0.22);
        transform: scale(1.04);
    }

    100% {
        box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
        transform: scale(1);
    }
}

.workspace-chat-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.35rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #e11d48;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
}

.workspace-chat-badge.is-hidden,
.workspace-chat-alert.is-hidden {
    display: none;
}

.workspace-chat-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 58px rgba(17, 24, 39, 0.22);
}

.workspace-chat-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.85rem);
    width: min(28rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid rgba(109, 61, 242, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 74px rgba(17, 24, 39, 0.2);
    display: none;
}

.workspace-chat.is-open .workspace-chat-panel {
    display: block;
}

.workspace-chat-alert {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.85rem);
    width: min(22rem, calc(100vw - 2rem));
}

.workspace-chat-alert button {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(109, 61, 242, 0.22);
    border-radius: 0.9rem;
    background: #ffffff;
    color: #111827;
    text-align: left;
    font-weight: 820;
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.18);
    cursor: pointer;
}

.workspace-chat-head {
    padding: 1rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.workspace-chat-head strong,
.workspace-chat-head span {
    display: block;
}

.workspace-chat-head strong {
    font-size: 1rem;
    font-weight: 860;
}

.workspace-chat-head span {
    margin-top: 0.15rem;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 700;
}

.workspace-chat-close {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.workspace-chat-directory {
    padding: 0.75rem 0.8rem 0.65rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.08);
    background: #ffffff;
}

.workspace-chat-directory-head {
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.workspace-chat-directory-head strong {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 860;
}

.workspace-chat-directory-head span {
    color: #7b8498;
    font-size: 0.75rem;
    font-weight: 760;
    white-space: nowrap;
}

.workspace-chat-directory input {
    width: 100%;
    height: 2.35rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(109, 61, 242, 0.16);
    border-radius: 0.65rem;
    background: #f9fafb;
    color: #111827;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    outline: none;
}

.workspace-chat-directory input:focus {
    border-color: rgba(109, 61, 242, 0.42);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.1);
}

.workspace-chat-directory-empty {
    padding: 0.85rem 0.7rem;
    color: #8a93a8;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

.workspace-chat-conversations {
    max-height: 14.5rem;
    overflow-y: auto;
    padding: 0.55rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.08);
    display: grid;
    gap: 0.35rem;
}

.workspace-chat-conversation {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    color: #111827;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    cursor: pointer;
}

.workspace-chat-conversation:hover,
.workspace-chat-conversation.is-active {
    border-color: rgba(109, 61, 242, 0.14);
    background: #f7f4ff;
}

.workspace-chat-conversation.has-unread {
    background: linear-gradient(135deg, rgba(109, 61, 242, 0.1), rgba(255, 255, 255, 0.96));
}

.workspace-chat-conversation strong,
.workspace-chat-conversation small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-chat-conversation strong {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 830;
}

.workspace-chat-conversation small {
    margin-top: 0.18rem;
    color: #7b8498;
    font-size: 0.75rem;
    font-weight: 650;
}

.workspace-chat-conversation-badge {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
}

.workspace-chat-messages {
    height: 18rem;
    overflow-y: auto;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.workspace-chat-empty {
    align-self: center;
    padding: 2rem 0.75rem;
    color: #8a93a8;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 650;
}

.workspace-chat-message {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: end;
}

.workspace-chat-message.is-mine {
    grid-template-columns: minmax(0, 1fr) 2rem;
}

.workspace-chat-message.is-mine .workspace-chat-avatar {
    grid-column: 2;
}

.workspace-chat-message.is-mine > div {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    background: #efe9ff;
}

.workspace-chat-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--chat-author-color, var(--brand));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.workspace-chat-message > div {
    max-width: 18rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.workspace-chat-meta {
    display: block;
    margin-bottom: 0.25rem;
    color: #8a93a8;
    font-size: 0.68rem;
    font-weight: 800;
}

.workspace-chat-message p {
    margin: 0;
    color: #111827;
    line-height: 1.4;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
}

.workspace-chat-compose {
    padding: 0.85rem;
    border-top: 1px solid rgba(109, 61, 242, 0.1);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.55rem;
    gap: 0.6rem;
}

.workspace-chat-compose textarea {
    width: 100%;
    min-height: 2.55rem;
    max-height: 7rem;
    resize: vertical;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 0.8rem;
    background: #ffffff;
    color: #111827;
}

.workspace-chat-compose button {
    width: 2.55rem;
    height: 2.55rem;
    border: 0;
    border-radius: 0.8rem;
    background: var(--brand);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.workspace-chat-error {
    min-height: 1.45rem;
    margin: 0;
    padding: 0 1rem 0.75rem;
    color: var(--danger);
    font-size: 0.8rem;
    font-weight: 720;
}

.workspace-chat .workspace-chat-toggle {
    min-width: 6.6rem;
    height: 3.2rem;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #ffffff;
    border: 0;
    box-shadow: 0 18px 42px rgba(109, 61, 242, 0.3);
}

.workspace-chat .workspace-chat-toggle.has-unread {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.workspace-chat .workspace-chat-panel {
    width: min(31rem, calc(100vw - 2rem));
    height: min(47rem, calc(100vh - 6.5rem));
    border-color: rgba(17, 24, 39, 0.08);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 70px rgba(17, 24, 39, 0.18);
    flex-direction: column;
}

.workspace-chat.is-open .workspace-chat-panel {
    display: flex;
}

.workspace-chat .workspace-chat-head {
    padding: 1.35rem 1.45rem 1rem;
    border-bottom: 0;
}

.workspace-chat .workspace-chat-head strong {
    color: #111827;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 900;
}

.workspace-chat .workspace-chat-head span {
    position: relative;
    margin-top: 0.65rem;
    padding-left: 1.05rem;
    color: #667085;
    font-size: 0.88rem;
    font-weight: 760;
}

.workspace-chat .workspace-chat-head span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #35c773;
    transform: translateY(-50%);
}

.workspace-chat .workspace-chat-close {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    color: #667085;
    background: transparent;
}

.workspace-chat .workspace-chat-directory {
    padding: 0.35rem 1.45rem 0.95rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.workspace-chat .workspace-chat-directory-head {
    margin-bottom: 0.8rem;
}

.workspace-chat .workspace-chat-directory-head strong {
    color: #172033;
    font-size: 0.88rem;
    font-weight: 860;
}

.workspace-chat .workspace-chat-directory-head span {
    color: inherit;
    font-size: inherit;
}

.workspace-chat .workspace-chat-directory input {
    display: none;
}

.workspace-chat-select {
    width: 100%;
    min-height: 2.8rem;
    padding: 0 2.3rem 0 0.9rem;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 0.75rem;
    background: #f7f8fb;
    color: #172033;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 780;
    outline: none;
}

.workspace-chat-select:focus {
    border-color: rgba(109, 61, 242, 0.35);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.08);
}

.workspace-chat .workspace-chat-conversations {
    display: none;
}

.workspace-chat .workspace-chat-conversation {
    width: auto;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    border-radius: 0.8rem;
    background: #f4f5f7;
    display: inline-flex;
    grid-template-columns: none;
    gap: 0.5rem;
    white-space: nowrap;
}

.workspace-chat .workspace-chat-conversation:hover,
.workspace-chat .workspace-chat-conversation.is-active {
    border-color: transparent;
    background: #eee9ff;
}

.workspace-chat-conversation-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--chat-author-color, var(--brand));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.workspace-chat .workspace-chat-conversation strong {
    color: #344054;
    font-size: 0.78rem;
    font-weight: 850;
}

.workspace-chat .workspace-chat-conversation-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.35rem;
}

.workspace-chat .workspace-chat-messages {
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    padding: 1rem 1.45rem 1.4rem;
    background: #ffffff;
    gap: 1.05rem;
}

.workspace-chat-date-divider {
    margin: 0.55rem 0 0.2rem;
    color: #98a2b3;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.workspace-chat-date-divider::before,
.workspace-chat-date-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(17, 24, 39, 0.08);
}

.workspace-chat .workspace-chat-message {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
}

.workspace-chat .workspace-chat-message.is-mine {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-chat .workspace-chat-message.is-mine .workspace-chat-avatar {
    display: none;
}

.workspace-chat .workspace-chat-avatar {
    width: 2.15rem;
    height: 2.15rem;
    align-self: center;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.12);
}

.workspace-chat .workspace-chat-message > div {
    position: relative;
    max-width: 18.5rem;
    min-width: 11.5rem;
    padding: 0.82rem 0.95rem 0.95rem;
    border-color: rgba(17, 24, 39, 0.07);
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(17, 24, 39, 0.08);
}

.workspace-chat .workspace-chat-message.is-mine > div {
    justify-self: end;
    background: #eadfff;
    border-color: #dfd0ff;
    box-shadow: 0 13px 30px rgba(109, 61, 242, 0.16);
}

.workspace-chat .workspace-chat-meta {
    margin-bottom: 0.52rem;
    color: #667085;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
}

.workspace-chat .workspace-chat-meta strong {
    color: #344054;
    font-weight: 900;
}

.workspace-chat .workspace-chat-meta span {
    color: #98a2b3;
    font-weight: 820;
}

.workspace-chat .workspace-chat-message p {
    color: #172033;
    font-size: 0.94rem;
    line-height: 1.45;
}

.workspace-chat-read {
    position: absolute;
    right: 0.85rem;
    bottom: 0.58rem;
    color: #0ea5e9;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: -0.18rem;
}

.workspace-chat .workspace-chat-compose {
    flex: 0 0 auto;
    margin: 0 1.45rem 1.15rem;
    padding: 0.8rem 0.8rem 0.75rem;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.07);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    grid-template-rows: auto 4.4rem;
    gap: 0.45rem 0.65rem;
}

.workspace-chat-tools {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.workspace-chat-tools button {
    min-width: 1.55rem;
    width: auto;
    height: 1.55rem;
    padding: 0 0.25rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: none;
    cursor: pointer;
}

.workspace-chat-tools button:hover {
    background: #f2f4f8;
    color: var(--brand);
}

.workspace-chat-tools .chat-emoji-button {
    min-width: 1.75rem;
    padding: 0 0.15rem;
    border-radius: 999px;
    font-size: 0.95rem;
    filter: saturate(1.08);
}

.workspace-chat-tools .chat-emoji-button:hover {
    background: #f5f0ff;
    transform: translateY(-1px);
}

.workspace-chat .workspace-chat-compose textarea {
    height: 4.4rem;
    min-height: 4.4rem;
    max-height: 4.4rem;
    padding: 0.85rem 0.25rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.95rem;
    resize: none;
    outline: none;
    overflow-y: auto;
}

.workspace-chat .workspace-chat-compose button[type="submit"] {
    align-self: end;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 13px 28px rgba(109, 61, 242, 0.28);
}

.page-head {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.page-head p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.eyebrow {
    margin-bottom: 0.7rem;
    color: var(--brand);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 2rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)),
        radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.2), transparent 18rem),
        radial-gradient(circle at 85% 10%, rgba(6, 182, 212, 0.18), transparent 17rem);
    box-shadow: var(--shadow-md);
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto 2rem -5rem auto;
    width: 14rem;
    height: 14rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.2));
    filter: blur(22px);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.75fr);
    gap: 1.5rem;
    align-items: center;
}

.hero-copy p {
    max-width: 42rem;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1.02rem;
}

.user-insight-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-sm);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 9.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.2);
    box-shadow: var(--shadow-md);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), transparent 55%);
    pointer-events: none;
}

.stat-card.cyan::before {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.11), transparent 55%);
}

.stat-card.green::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), transparent 55%);
}

.stat-card.red::before {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.11), transparent 55%);
}

.stat-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1rem;
    background: rgba(124, 58, 237, 0.12);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat-value {
    position: relative;
    margin: 1.1rem 0 0.2rem;
    font-size: 2.15rem;
    line-height: 1;
    font-weight: 850;
}

.stat-label {
    position: relative;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 680;
}

.stat-trend {
    position: relative;
    margin-top: 1rem;
    display: inline-flex;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: #475569;
    font-size: 0.74rem;
    font-weight: 760;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.8fr);
    gap: 1.25rem;
}

.panel {
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-sm);
}

.panel-head {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.panel-head h2 {
    margin-bottom: 0;
}

.chart-card {
    min-height: 21rem;
}

.activity-list,
.project-list {
    display: grid;
    gap: 0.75rem;
}

.activity-item,
.project-item {
    padding: 0.8rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.activity-item:hover,
.project-item:hover {
    transform: translateY(-1px);
    border-color: var(--line);
    background: #ffffff;
}

.activity-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.project-logo {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #111827, #475569);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 850;
}

.progress-track {
    width: 100%;
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.form-row {
    margin-bottom: 1rem;
}

.form-control {
    width: 100%;
    padding: 0.72rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.9rem;
    outline: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-control:focus {
    border-color: rgba(124, 58, 237, 0.55);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.55rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, var(--brand), #4f46e5);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 780;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(124, 58, 237, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 18px 34px rgba(124, 58, 237, 0.28);
}

.btn-secondary {
    background: linear-gradient(135deg, #334155, #111827);
    box-shadow: 0 14px 24px rgba(17, 24, 39, 0.16);
}

.btn-light {
    background: #ffffff;
    color: #111827;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.btn-light:hover {
    color: #111827;
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.links {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.task-pagination {
    margin-top: 1.15rem;
    padding: 0.8rem 0.9rem 0.8rem 1.1rem;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, rgba(109, 61, 242, 0.045), transparent 42%),
        rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Simplified Gantt chart */
.gantt-page-shell {
    max-width: none;
}

.gantt-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.35rem;
}

.gantt-page-head h1 {
    margin: 0.25rem 0 0.3rem;
    color: #111827;
    font-size: clamp(1.8rem, 2vw, 2.35rem);
    letter-spacing: -0.045em;
}

.gantt-page-head p {
    margin: 0;
    color: #69748b;
}

.gantt-eyebrow {
    color: #6d3df2;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gantt-create-button {
    flex: 0 0 auto;
    box-shadow: 0 12px 24px rgb(109 61 242 / 22%);
}

.gantt-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.gantt-summary article {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 5rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e7e4f1;
    border-radius: 1rem;
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 10px 25px rgb(35 28 80 / 5%);
}

.gantt-summary article > span:last-child {
    display: grid;
}

.gantt-summary strong {
    color: #121827;
    font-size: 1.4rem;
}

.gantt-summary small {
    color: #7b8498;
    font-weight: 650;
}

.gantt-summary-icon {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.8rem;
}

.gantt-summary-icon .icon {
    width: 1.25rem;
}

.gantt-summary-icon.purple { color: #6d3df2; background: #eee8ff; }
.gantt-summary-icon.red { color: #ef3f61; background: #ffe8ed; }
.gantt-summary-icon.amber { color: #d98200; background: #fff2cd; }
.gantt-summary-icon.green { color: #079669; background: #e3f8ef; }

.gantt-filters {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #e7e4f1;
    border-radius: 1rem;
    background: #fff;
}

.gantt-search {
    display: flex;
    align-items: center;
    min-width: 17rem;
    flex: 1 1 25rem;
    gap: 0.6rem;
    padding: 0 0.9rem;
    border: 1px solid #e4e0ee;
    border-radius: 0.75rem;
}

.gantt-search .icon {
    width: 1.1rem;
    color: #8a94a8;
}

.gantt-search input,
.gantt-filters select {
    min-height: 2.75rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: #30384d;
}

.gantt-search input {
    width: 100%;
}

.gantt-filters > label:not(.gantt-search) {
    border: 1px solid #e4e0ee;
    border-radius: 0.75rem;
}

.gantt-filters select {
    min-width: 12rem;
    padding: 0 0.8rem;
}

.gantt-phase-filter {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: #f4f1fa;
}

.gantt-phase-filter button {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0.58rem;
    background: transparent;
    color: #626c83;
    cursor: pointer;
    font-weight: 750;
}

.gantt-phase-filter button:hover,
.gantt-phase-filter button.is-active {
    color: #6032e7;
    background: #fff;
    box-shadow: 0 2px 10px rgb(74 47 139 / 10%);
}

.gantt-clear {
    color: #6d3df2;
    font-size: 0.86rem;
    font-weight: 750;
}

.gantt-card {
    overflow: hidden;
    border: 1px solid #e5e2ed;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 18px 45px rgb(40 31 79 / 7%);
}

.gantt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #ebe8f1;
}

.gantt-toolbar > div {
    display: grid;
    gap: 0.15rem;
}

.gantt-toolbar strong {
    color: #1d2433;
    text-transform: capitalize;
}

.gantt-toolbar span {
    color: #8992a6;
    font-size: 0.78rem;
}

.gantt-toolbar nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gantt-nav-button,
.gantt-today-button {
    display: grid;
    min-width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid #e3dfec;
    border-radius: 0.65rem;
    color: #515b70;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 750;
}

.gantt-nav-button .icon {
    width: 1rem;
}

.gantt-today-button {
    padding: 0 0.8rem;
}

.gantt-scroll {
    overflow-x: auto;
    scrollbar-color: #c9c2db transparent;
    scrollbar-width: thin;
}

.gantt-board {
    display: grid;
    grid-template-columns: 360px repeat(42, 44px);
    min-width: 2208px;
}

.gantt-left-head {
    position: sticky;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    align-items: center;
    gap: 0.6rem;
    min-height: 4.1rem;
    padding: 0 1rem;
    border-right: 1px solid #e9e6f0;
    border-bottom: 1px solid #e9e6f0;
    color: #8c94a7;
    background: #f8f7fb;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gantt-days-head {
    display: contents;
}

.gantt-day-head {
    display: grid;
    min-height: 4.1rem;
    place-content: center;
    border-right: 1px solid #ece9f2;
    border-bottom: 1px solid #e9e6f0;
    color: #757f94;
    background: #fbfafd;
    text-align: center;
}

.gantt-day-head small {
    min-height: 0.85rem;
    color: #a0a7b7;
    font-size: 0.59rem;
    font-weight: 800;
    text-transform: uppercase;
}

.gantt-day-head strong {
    font-size: 0.9rem;
}

.gantt-day-head span {
    font-size: 0.64rem;
}

.gantt-day-head.is-weekend,
.gantt-grid-cell.is-weekend {
    background: #f6f5f9;
}

.gantt-day-head.is-today {
    color: #fff;
    background: #6d3df2;
}

.gantt-task-info {
    position: sticky;
    left: 0;
    z-index: 4;
    min-height: var(--gantt-row-height, 5rem);
    border-right: 1px solid #e9e6f0;
    border-bottom: 1px solid #efedf3;
    background: #fff;
}

.gantt-task-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.3rem 1rem;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: var(--gantt-row-height, 5rem);
    padding: 0.65rem 0.8rem 0.65rem 1rem;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.gantt-task-toggle:hover {
    background: #faf9fd;
}

.gantt-task-copy {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.gantt-task-copy small {
    overflow: hidden;
    color: #929bad;
    font-size: 0.65rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-task-copy strong {
    overflow: hidden;
    color: #202737;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-phase-label {
    width: max-content;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 800;
}

.gantt-phase-label.is-pending { color: #0879b9; background: #def3ff; }
.gantt-phase-label.is-development { color: #6b3af1; background: #eee8ff; }
.gantt-phase-label.is-finished { color: #00855d; background: #d9f8e9; }

.gantt-assignee {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.4rem;
    color: #596379;
    font-size: 0.7rem;
    font-weight: 700;
}

.gantt-assignee > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-assignee .mini-avatar {
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    font-size: 0.64rem;
}

.gantt-edit-chevron {
    width: 0.9rem;
    color: #9ca4b4;
    transition: transform 160ms ease;
}

.gantt-task-toggle[aria-expanded="true"] .gantt-edit-chevron {
    transform: rotate(90deg);
}

.gantt-date-editor {
    padding: 0 0.85rem 0.75rem;
}

.gantt-date-editor form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    padding: 0.65rem;
    border-radius: 0.7rem;
    background: #f7f5fc;
}

.gantt-date-editor label {
    display: grid;
    gap: 0.18rem;
    color: #6d7588;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
}

.gantt-date-editor input {
    width: 100%;
    min-width: 0;
    padding: 0.42rem;
    border: 1px solid #ddd7eb;
    border-radius: 0.45rem;
    background: #fff;
    font-size: 0.7rem;
}

.gantt-date-editor .btn {
    grid-column: 1 / -1;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
}

.gantt-date-editor p {
    margin: 0;
    color: #7d8698;
    font-size: 0.75rem;
}

.gantt-task-track {
    position: relative;
    display: grid;
    grid-column: 2 / span 42;
    grid-template-columns: repeat(42, 44px);
    min-height: var(--gantt-row-height, 5rem);
    border-bottom: 1px solid #efedf3;
}

.gantt-grid-cell {
    border-right: 1px solid #f0edf4;
}

.gantt-grid-cell.is-today {
    box-shadow: inset 2px 0 rgb(109 61 242 / 35%);
}

.gantt-bar {
    position: absolute;
    top: 50%;
    left: calc(var(--gantt-left) * 44px + 4px);
    z-index: 2;
    display: flex;
    align-items: center;
    width: calc(var(--gantt-duration) * 44px - 8px);
    min-width: 20px;
    height: 2rem;
    gap: 0.3rem;
    padding: 0 0.65rem;
    overflow: hidden;
    border-radius: 0.65rem;
    color: #fff;
    box-shadow: 0 6px 14px rgb(47 42 81 / 15%);
    font-size: 0.69rem;
    font-weight: 800;
    transform: translateY(-50%);
}

.gantt-bar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-task-bar {
    top: calc(10px + var(--gantt-bar-index) * 38px);
    min-width: 5.5rem;
    transform: none;
}

.gantt-task-bar small {
    flex: 0 0 auto;
    padding-left: 0.45rem;
    border-left: 1px solid rgb(255 255 255 / 38%);
    color: rgb(255 255 255 / 88%);
    font-size: 0.61rem;
    font-weight: 750;
    white-space: nowrap;
}

.gantt-bar i {
    font-style: normal;
}

.gantt-bar.is-pending { background: linear-gradient(135deg, #159ad6, #0878bd); }
.gantt-bar.is-development { background: linear-gradient(135deg, #8655f6, #6330e7); }
.gantt-bar.is-finished { background: linear-gradient(135deg, #1ebd88, #07966a); }
.gantt-bar.is-overdue { box-shadow: 0 0 0 2px #ff5a70, 0 7px 16px rgb(225 45 76 / 18%); }

.gantt-outside-period {
    position: absolute;
    top: calc(18px + var(--gantt-bar-index, 0) * 38px);
    left: 0.7rem;
    color: #a2a9b8;
    font-size: 0.7rem;
    font-style: italic;
    transform: none;
}

.gantt-empty {
    grid-column: 1 / -1;
    display: grid;
    min-height: 18rem;
    place-items: center;
    align-content: center;
    gap: 0.45rem;
    color: #7d8699;
    text-align: center;
}

.gantt-empty > span {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 1rem;
    color: #6d3df2;
    background: #eee9ff;
}

.gantt-empty .icon {
    width: 1.6rem;
}

.gantt-empty h2,
.gantt-empty p {
    margin: 0;
}

.gantt-empty h2 {
    color: #252c3b;
    font-size: 1.05rem;
}

.gantt-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.85rem 1rem;
    color: #687286;
    font-size: 0.72rem;
    font-weight: 700;
}

.gantt-legend span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gantt-legend i {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
}

.gantt-legend i.pending { background: #0c8bcc; }
.gantt-legend i.development { background: #6d3df2; }
.gantt-legend i.finished { background: #0ca873; }

.gantt-legend small {
    margin-left: auto;
    color: #9aa2b2;
}

@media (max-width: 980px) {
    .gantt-summary {
        grid-template-columns: 1fr;
    }

    .gantt-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .gantt-search {
        min-width: 0;
        flex-basis: auto;
    }

    .gantt-filters select {
        width: 100%;
    }

    .gantt-phase-filter {
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    .gantt-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .gantt-create-button {
        width: 100%;
        justify-content: center;
    }

    .gantt-board {
        grid-template-columns: 300px repeat(42, 42px);
        min-width: 2064px;
    }

    .gantt-left-head {
        grid-template-columns: 1fr;
    }

    .gantt-left-head span:last-child,
    .gantt-assignee {
        display: none;
    }

    .gantt-task-toggle {
        grid-template-columns: minmax(0, 1fr) 1rem;
    }

    .gantt-task-track {
        grid-template-columns: repeat(42, 42px);
    }

    .gantt-bar {
        left: calc(var(--gantt-left) * 42px + 4px);
        width: calc(var(--gantt-duration) * 42px - 8px);
    }
}

/* Gantt visual refresh */
.gantt-page-head {
    align-items: center;
    margin-bottom: 1.55rem;
}

.gantt-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.gantt-title-star {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    color: #78849a;
}

.gantt-title-star .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.gantt-summary {
    gap: 1rem;
    margin-bottom: 1.45rem;
}

.gantt-summary article {
    min-height: 7.6rem;
    gap: 1.15rem;
    padding: 1.15rem 1.3rem;
    border-color: #e8e4f3;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 12px 32px rgb(35 28 80 / 6%);
}

.gantt-summary-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.gantt-summary-icon .icon {
    width: 1.6rem;
    height: 1.6rem;
}

.gantt-summary-copy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 0.9rem;
    row-gap: 0.16rem;
}

.gantt-summary-copy strong {
    grid-row: 1 / span 2;
    align-self: start;
    min-width: 1.4rem;
    color: #111827;
    font-size: 1.85rem;
    line-height: 1;
}

.gantt-summary-copy small {
    color: #4f5b72;
    font-size: 0.9rem;
    font-weight: 760;
}

.gantt-summary-copy em {
    grid-column: 2;
    color: #929bad;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 650;
}

.gantt-summary-copy em.is-positive { color: #14a66e; }
.gantt-summary-copy em.is-negative { color: #ee4563; }

.gantt-filters {
    position: relative;
    min-height: 5.15rem;
    margin-bottom: 1.15rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    box-shadow: 0 10px 28px rgb(35 28 80 / 5%);
}

.gantt-search {
    min-width: 0;
    min-height: 3.1rem;
    border-color: #ddd8ed;
    border-radius: 0.8rem;
}

.gantt-search input {
    font-size: 0.9rem;
}

.gantt-filter-menu {
    position: relative;
    flex: 0 0 auto;
}

.gantt-filter-menu > summary {
    position: relative;
    display: grid;
    width: 3.15rem;
    height: 3.15rem;
    place-items: center;
    border: 1px solid #ded9eb;
    border-radius: 0.8rem;
    color: #59657d;
    background: #fff;
    cursor: pointer;
    list-style: none;
}

.gantt-filter-menu > summary::-webkit-details-marker {
    display: none;
}

.gantt-filter-menu > summary:hover,
.gantt-filter-menu[open] > summary {
    color: #6836ec;
    border-color: #bdaeff;
    background: #f8f5ff;
}

.gantt-filter-menu > summary .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.gantt-filter-menu > summary > span {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 0.42rem;
    height: 0.42rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #6d3df2;
}

.gantt-filter-panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 30;
    display: grid;
    width: min(25rem, calc(100vw - 3rem));
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #e1ddec;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 22px 55px rgb(32 24 70 / 18%);
}

.gantt-filter-panel label {
    display: grid;
    gap: 0.35rem;
}

.gantt-filter-panel label > span,
.gantt-filter-label {
    color: #596379;
    font-size: 0.72rem;
    font-weight: 800;
}

.gantt-filter-panel select {
    width: 100%;
    min-height: 2.7rem;
    padding: 0 0.75rem;
    border: 1px solid #dfdaea;
    border-radius: 0.65rem;
    background: #fff;
}

.gantt-filter-panel .gantt-phase-filter {
    width: 100%;
    overflow-x: auto;
}

.gantt-filter-panel .gantt-phase-filter button {
    flex: 1 0 max-content;
}

.gantt-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.2rem;
}

.gantt-filter-actions a {
    color: #69748a;
    font-size: 0.76rem;
    font-weight: 750;
}

.gantt-filter-actions .btn {
    min-height: 2.25rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.74rem;
}

.gantt-toolbar {
    min-height: 5.4rem;
    padding: 1rem 1.25rem;
}

.gantt-toolbar strong {
    font-size: 1.05rem;
}

.gantt-toolbar nav {
    gap: 0.45rem;
}

.gantt-calendar-button {
    position: relative;
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e1ddeb;
    border-radius: 0.7rem;
    color: #536079;
    background: #fff;
    cursor: pointer;
}

.gantt-calendar-button input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gantt-calendar-button .icon {
    width: 1.05rem;
}

.gantt-nav-button,
.gantt-today-button {
    height: 2.65rem;
    border-radius: 0.7rem;
}

.gantt-scale-selector {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 6.6rem;
    height: 2.65rem;
    gap: 0.45rem;
    margin-left: 0.45rem;
    padding: 0 0.8rem;
    border: 1px solid #e1ddeb;
    border-radius: 0.7rem;
    color: #354057 !important;
    background: #fff;
    font-size: 0.75rem !important;
    font-weight: 750;
}

.gantt-scale-selector .icon {
    width: 0.8rem;
    pointer-events: none;
}

.gantt-scale-selector select {
    min-width: 4.3rem;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    appearance: none;
    font: inherit;
    font-weight: inherit;
}

.gantt-board {
    grid-template-columns: 390px repeat(42, 48px);
    min-width: 2406px;
}

.gantt-left-head {
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    min-height: 4.35rem;
    padding: 0 1.25rem;
    background: #faf9fc;
}

.gantt-day-head {
    min-height: 4.35rem;
    background: #fbfafd;
}

.gantt-day-head.is-today {
    background: linear-gradient(180deg, #7440f3, #6932e8);
    box-shadow: inset 0 -3px rgb(255 255 255 / 18%);
}

.gantt-day-head strong {
    font-size: 0.92rem;
}

.gantt-day-head span {
    font-size: 0.58rem;
    text-transform: lowercase;
}

.gantt-task-toggle {
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    padding: 0.7rem 1.05rem 0.7rem 1.25rem;
}

.gantt-project-identity {
    display: grid;
    grid-template-columns: 0.5rem 2.35rem minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 0.65rem;
}

.gantt-project-identity > i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--project-color, #6d3df2);
}

.gantt-project-icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.7rem;
    color: var(--project-color, #6d3df2);
    background: color-mix(in srgb, var(--project-color, #6d3df2) 12%, #fff);
}

.gantt-project-icon .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.gantt-task-copy {
    gap: 0.22rem;
}

.gantt-task-copy strong {
    font-size: 0.78rem;
    white-space: normal;
}

.gantt-task-copy small {
    font-size: 0.6rem;
}

.gantt-assignee {
    font-size: 0.71rem;
}

.gantt-assignee .mini-avatar {
    width: 1.85rem;
    height: 1.85rem;
    color: #fff;
    background: linear-gradient(135deg, #7340ed, #5320bd);
}

.gantt-task-track {
    grid-template-columns: repeat(42, 48px);
}

.gantt-bar {
    left: calc(var(--gantt-left) * var(--gantt-cell-width, 48px) + 6px);
    width: calc(var(--gantt-duration) * var(--gantt-cell-width, 48px) - 12px);
    height: 2.15rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    box-shadow: 0 7px 15px rgb(47 42 81 / 16%);
}

.gantt-task-bar {
    top: calc(9px + var(--gantt-bar-index) * 38px);
}

.gantt-task-bar small {
    margin-left: auto;
}

.gantt-bar.is-pending { background: linear-gradient(90deg, #2d8ff1, #2375e7); }
.gantt-bar.is-development { background: linear-gradient(90deg, #7844ee, #6727df); }
.gantt-bar.is-finished { background: linear-gradient(90deg, #12ac71, #07985f); }

.gantt-legend {
    border-top: 1px solid #efedf4;
    background: #fff;
}

@media (max-width: 980px) {
    .gantt-filter-menu {
        align-self: flex-end;
    }

    .gantt-filter-panel {
        position: fixed;
        top: 8rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .gantt-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .gantt-toolbar nav {
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    .gantt-summary article {
        min-height: 6.4rem;
    }

    .gantt-board {
        grid-template-columns: 310px repeat(42, 44px);
        min-width: 2158px;
    }

    .gantt-left-head {
        grid-template-columns: 1fr;
    }

    .gantt-task-toggle {
        grid-template-columns: minmax(0, 1fr);
    }

    .gantt-task-track {
        grid-template-columns: repeat(42, 44px);
    }

    .gantt-bar {
        left: calc(var(--gantt-left) * var(--gantt-cell-width, 48px) + 5px);
        width: calc(var(--gantt-duration) * var(--gantt-cell-width, 48px) - 10px);
    }
}

/* Dedicated Gantt entry form */
.gantt-entry-form-shell {
    max-width: none;
}

.gantt-form-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    color: #8a93a5;
    font-size: 0.78rem;
    font-weight: 700;
}

.gantt-form-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #6534e8;
}

.gantt-form-breadcrumbs .icon {
    width: 0.9rem;
}

.gantt-form-head {
    margin-bottom: 1.35rem;
}

.gantt-form-head h1 {
    margin: 0.28rem 0 0.35rem;
    color: #111827;
    font-size: clamp(1.8rem, 2.8vw, 2.35rem);
    letter-spacing: -0.045em;
}

.gantt-form-head p {
    margin: 0;
    color: #69748a;
}

.gantt-entry-form {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 0.8fr);
    gap: 1rem;
}

.gantt-entry-main-card,
.gantt-entry-side-card {
    border: 1px solid #e6e2ef;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 14px 36px rgb(35 28 80 / 6%);
}

.gantt-entry-main-card {
    padding: 1.35rem;
}

.gantt-entry-side {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.gantt-entry-side-card {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
}

.gantt-entry-side-card h2 {
    margin: 0;
    color: #1b2231;
    font-size: 0.95rem;
}

.gantt-entry-section-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #efedf3;
}

.gantt-entry-section-title > span {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: 0.8rem;
    color: #6534e8;
    background: #eee8ff;
}

.gantt-entry-section-title h2,
.gantt-entry-section-title p {
    margin: 0;
}

.gantt-entry-section-title h2 {
    color: #1b2231;
    font-size: 1rem;
}

.gantt-entry-section-title p {
    margin-top: 0.2rem;
    color: #828b9d;
    font-size: 0.76rem;
}

.gantt-entry-fields {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 1rem;
}

.gantt-entry-description {
    grid-column: 1 / -1;
}

.gantt-entry-form .form-row {
    display: grid;
    align-content: start;
    gap: 0.4rem;
}

.gantt-entry-form .form-row label {
    color: #374055;
    font-size: 0.76rem;
    font-weight: 800;
}

.gantt-entry-form .form-control {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #ded9eb;
    border-radius: 0.72rem;
    outline: 0;
    color: #202737;
    background: #fff;
}

.gantt-entry-form textarea.form-control {
    min-height: 10.5rem;
    resize: vertical;
}

.gantt-entry-form .form-control:focus {
    border-color: #9d7df6;
    box-shadow: 0 0 0 3px rgb(109 61 242 / 10%);
}

.gantt-entry-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.gantt-viewers-card {
    gap: 0.7rem;
}

.gantt-viewers-help,
.gantt-viewers-card small {
    margin: 0;
    color: #7d8799;
    font-size: 0.72rem;
    line-height: 1.45;
}

.gantt-viewers-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0 0.8rem;
    border: 1px solid #ded9eb;
    border-radius: 0.72rem;
    color: #7c879b;
    background: #fff;
}

.gantt-viewers-search:focus-within {
    border-color: #9d7df6;
    box-shadow: 0 0 0 3px rgb(109 61 242 / 10%);
}

.gantt-viewers-search .icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.gantt-viewers-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #202737;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
}

.gantt-viewers-list {
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid #ece8f3;
    border-radius: 0.8rem;
    background: #fbfaff;
    scrollbar-width: thin;
}

.gantt-viewers-list ul {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gantt-viewers-list li label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.6rem;
    color: #30394c;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.gantt-viewers-list li label:hover {
    color: #6030df;
    background: #f0ebff;
}

.gantt-viewers-list input {
    width: 1rem;
    height: 1rem;
    accent-color: #6d3df2;
}

.gantt-entry-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e6e2ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 28px rgb(35 28 80 / 5%);
}

.gantt-entry-actions > a {
    color: #677187;
    font-size: 0.8rem;
    font-weight: 750;
}

.gantt-entry-actions .btn {
    min-width: 10rem;
    justify-content: center;
}

@media (max-width: 900px) {
    .gantt-entry-form {
        grid-template-columns: 1fr;
    }

    .gantt-entry-actions {
        grid-column: 1;
    }
}

@media (max-width: 640px) {
    .gantt-entry-fields,
    .gantt-entry-date-grid {
        grid-template-columns: 1fr;
    }

    .gantt-entry-description {
        grid-column: auto;
    }

    .gantt-entry-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        text-align: center;
    }
}

/* Virtual whiteboards */
.whiteboard-list-shell,
.whiteboard-form-shell,
.whiteboard-workspace-shell {
    max-width: none;
}

.whiteboard-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.whiteboard-page-head h1,
.whiteboard-form-head h1 {
    margin: .3rem 0 .35rem;
    color: #111827;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    letter-spacing: -.04em;
}

.whiteboard-page-head p,
.whiteboard-form-head p {
    margin: 0;
    color: #68738a;
}

.whiteboard-eyebrow,
.whiteboard-card-kicker {
    color: #6d3df2;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.whiteboard-new-button {
    min-width: 10.5rem;
    justify-content: center;
    box-shadow: 0 13px 28px rgba(109, 61, 242, .22);
}

.whiteboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.whiteboard-summary-grid article {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e8e5f5;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 30px rgba(39, 29, 78, .05);
}

.whiteboard-summary-grid article > span:last-child {
    display: grid;
    gap: .1rem;
}

.whiteboard-summary-grid strong {
    color: #111827;
    font-size: 1.35rem;
    line-height: 1;
}

.whiteboard-summary-grid small {
    color: #758097;
    font-size: .78rem;
}

.whiteboard-summary-icon,
.whiteboard-form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .9rem;
}

.whiteboard-summary-icon .icon,
.whiteboard-form-icon .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.whiteboard-summary-icon.purple,
.whiteboard-form-icon {
    color: #6d3df2;
    background: #f0eaff;
}

.whiteboard-summary-icon.blue {
    color: #1676d2;
    background: #e8f3ff;
}

.whiteboard-summary-icon.green {
    color: #07936a;
    background: #e5f9f1;
}

.whiteboard-search {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    margin: 1.25rem 0;
    padding: .25rem .85rem;
    border: 1px solid #dfd9f6;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(39, 29, 78, .04);
}

.whiteboard-search .icon {
    flex: 0 0 auto;
    width: 1.15rem;
    color: #8a94a8;
}

.whiteboard-search input {
    width: 100%;
    min-height: 2.75rem;
    border: 0;
    outline: 0;
    color: #172033;
    background: transparent;
}

.whiteboard-search a {
    color: #6d3df2;
    font-size: .8rem;
    font-weight: 700;
}

.whiteboard-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(16rem, 1fr));
    gap: 1.2rem;
}

.whiteboard-card {
    overflow: hidden;
    border: 1px solid #e7e3f3;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 15px 36px rgba(42, 31, 78, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.whiteboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 19px 42px rgba(42, 31, 78, .12);
}

.whiteboard-card-preview {
    position: relative;
    display: block;
    min-height: 11rem;
    overflow: hidden;
    border-bottom: 1px solid #ebe8f3;
    background-color: #fcfcff;
}

.whiteboard-card-preview.is-grid,
.whiteboard-stage.is-grid {
    background-image:
        linear-gradient(#e9e7f1 1px, transparent 1px),
        linear-gradient(90deg, #e9e7f1 1px, transparent 1px);
    background-size: 24px 24px;
}

.whiteboard-card-preview.is-dots,
.whiteboard-stage.is-dots {
    background-image: radial-gradient(circle, #cbc6dc 1.25px, transparent 1.4px);
    background-size: 22px 22px;
}

.whiteboard-card-preview.is-plain,
.whiteboard-stage.is-plain {
    background-image: none;
}

.whiteboard-card-preview > canvas,
.whiteboard-preview-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.whiteboard-card-preview > canvas {
    z-index: 1;
}

.whiteboard-preview-content {
    z-index: 2;
    display: block;
    overflow: hidden;
}

.whiteboard-preview-real-note,
.whiteboard-preview-real-text {
    position: absolute;
    display: block;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.whiteboard-preview-real-note {
    padding: .38rem;
    border-radius: .22rem .22rem .58rem .22rem;
    box-shadow: 0 7px 16px rgba(44, 37, 70, .14);
    color: #302b42;
    font-size: .5rem;
    line-height: 1.25;
}

.whiteboard-preview-real-note.is-yellow { background: #fff1a8; }
.whiteboard-preview-real-note.is-pink { background: #ffd7e5; }
.whiteboard-preview-real-note.is-blue { background: #cdeeff; }
.whiteboard-preview-real-note.is-green { background: #d3f4dc; }

.whiteboard-preview-real-text {
    line-height: 1.15;
    font-weight: 700;
}

.whiteboard-preview-line {
    position: absolute;
    height: .35rem;
    border-radius: 999px;
    background: #6d3df2;
    transform: rotate(-8deg);
}

.whiteboard-preview-line.line-one {
    top: 3.1rem;
    left: 12%;
    width: 35%;
}

.whiteboard-preview-line.line-two {
    top: 5.3rem;
    left: 23%;
    width: 48%;
    background: #24a4d8;
    transform: rotate(10deg);
}

.whiteboard-preview-note {
    position: absolute;
    width: 3.8rem;
    height: 3.5rem;
    border-radius: .25rem .25rem .65rem .25rem;
    box-shadow: 0 8px 18px rgba(44, 37, 70, .13);
    transform: rotate(5deg);
}

.whiteboard-preview-note.yellow {
    top: 1.45rem;
    right: 12%;
    background: #fff1a8;
}

.whiteboard-preview-note.pink {
    right: 30%;
    bottom: 1.2rem;
    background: #ffd7e5;
    transform: rotate(-5deg);
}

.whiteboard-open-pill {
    position: absolute;
    left: 50%;
    bottom: .8rem;
    z-index: 3;
    padding: .42rem .72rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(28, 20, 51, .8);
    font-size: .74rem;
    font-weight: 700;
    opacity: 0;
    transform: translate(-50%, .4rem);
    transition: .2s ease;
}

.whiteboard-card:hover .whiteboard-open-pill {
    opacity: 1;
    transform: translate(-50%, 0);
}

.whiteboard-card-body {
    padding: 1.1rem;
}

.whiteboard-card-body h2 {
    margin: .3rem 0 .35rem;
    font-size: 1.08rem;
}

.whiteboard-card-body h2 a {
    color: #151b2c;
}

.whiteboard-card-body p {
    min-height: 2.6rem;
    margin: 0;
    color: #747f94;
    font-size: .84rem;
    line-height: 1.55;
}

.whiteboard-card-body footer {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid #efedf5;
    color: #68738a;
    font-size: .75rem;
}

.whiteboard-card-body footer time {
    margin-left: auto;
}

.whiteboard-shared-count {
    padding: .2rem .45rem;
    border-radius: 999px;
    color: #6d3df2;
    background: #f1edff;
    font-weight: 700;
}

.whiteboard-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    padding: 4rem 1rem;
    border: 1px dashed #d8d1f3;
    border-radius: 1.25rem;
    color: #768197;
    text-align: center;
    background: rgba(255, 255, 255, .72);
}

.whiteboard-empty > span {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.2rem;
    color: #6d3df2;
    background: #f0eaff;
}

.whiteboard-empty .icon {
    width: 2rem;
    height: 2rem;
}

.whiteboard-empty h2 {
    margin: 1rem 0 .25rem;
    color: #161d30;
}

.whiteboard-empty p {
    margin: 0 0 1rem;
}

.whiteboard-crumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.2rem;
    color: #8790a3;
    font-size: .82rem;
}

.whiteboard-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #6d3df2;
    font-weight: 700;
}

.whiteboard-crumbs .icon {
    width: 1rem;
}

.whiteboard-form-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.whiteboard-form-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.1rem;
}

.whiteboard-form-icon .icon {
    width: 1.7rem;
    height: 1.7rem;
}

.whiteboard-create-form {
    display: grid;
    gap: 1rem;
    max-width: 65rem;
}

.whiteboard-form-card {
    padding: 1.3rem;
    border: 1px solid #e6e2f2;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 14px 34px rgba(42, 31, 78, .06);
}

.whiteboard-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
}

.whiteboard-description-field {
    grid-row: span 2;
}

.whiteboard-description-field textarea {
    min-height: 9.8rem;
    resize: vertical;
}

.whiteboard-form-section-title h2 {
    margin: 0 0 .25rem;
    color: #151b2c;
    font-size: 1rem;
}

.whiteboard-form-section-title p {
    margin: 0 0 1rem;
    color: #778197;
    font-size: .82rem;
}

.whiteboard-member-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.whiteboard-member-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid #e4e0ef;
    border-radius: .85rem;
    cursor: pointer;
    transition: .18s ease;
}

.whiteboard-member-option:hover {
    border-color: #c8bafa;
    background: #fbfaff;
}

.whiteboard-member-option input {
    position: absolute;
    opacity: 0;
}

.whiteboard-member-option > span:nth-of-type(2) {
    display: grid;
}

.whiteboard-member-option strong {
    color: #20283a;
    font-size: .84rem;
}

.whiteboard-member-option small {
    color: #8b94a6;
    font-size: .72rem;
}

.whiteboard-member-check {
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-left: auto;
    border: 1px solid #d5d1df;
    border-radius: .38rem;
    color: transparent;
}

.whiteboard-member-check .icon {
    width: .8rem;
}

.whiteboard-member-option:has(input:checked) {
    border-color: #9373f8;
    background: #f7f4ff;
    box-shadow: inset 0 0 0 1px #9373f8;
}

.whiteboard-member-option input:checked ~ .whiteboard-member-check {
    border-color: #6d3df2;
    color: #fff;
    background: #6d3df2;
}

.whiteboard-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e6e2f2;
    border-radius: 1rem;
    background: #fff;
    margin-bottom: 5rem;
}

.whiteboard-workspace-shell {
    padding: 1.25rem !important;
}

.whiteboard-workspace {
    display: grid;
    grid-template-rows: auto auto minmax(34rem, calc(100vh - 15.8rem));
    min-height: calc(100vh - 7.5rem);
}

.whiteboard-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
}

.whiteboard-title-area,
.whiteboard-head-actions,
.whiteboard-people {
    display: flex;
    align-items: center;
}

.whiteboard-title-area {
    gap: .75rem;
}

.whiteboard-title-area h1 {
    margin: .1rem 0 0;
    color: #151b2c;
    font-size: 1.3rem;
}

.whiteboard-title-area span {
    color: #7e879b;
    font-size: .75rem;
}

.whiteboard-back,
.whiteboard-icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    padding: 0;
    border: 1px solid #e1ddec;
    border-radius: .75rem;
    color: #5f6980;
    background: #fff;
    cursor: pointer;
}

.whiteboard-back:hover,
.whiteboard-icon-button:hover {
    border-color: #bfaefa;
    color: #6d3df2;
}

.whiteboard-icon-button .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.whiteboard-icon-button.danger {
    color: #ef4766;
}

.whiteboard-head-actions {
    gap: .65rem;
}

.whiteboard-people {
    padding-right: .6rem;
}

.whiteboard-people .mini-avatar + .mini-avatar {
    margin-left: -.4rem;
    border: 2px solid #fff;
}

.whiteboard-people small {
    margin-left: .45rem;
    color: #707a8f;
}

.whiteboard-save-status {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: #647087;
    font-size: .75rem;
}

.whiteboard-save-status i {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #22b47a;
}

.whiteboard-save-status.is-saving i {
    background: #f59e0b;
    animation: whiteboard-pulse 1s infinite;
}

.whiteboard-save-status.is-error {
    color: #dd3857;
}

.whiteboard-save-status.is-error i {
    background: #ef4766;
}

.whiteboard-save-status.is-synced {
    color: #087f5b;
}

@keyframes whiteboard-pulse {
    50% { opacity: .35; }
}

.whiteboard-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 3.7rem;
    padding: .55rem .65rem;
    border: 1px solid #e4e0ef;
    border-radius: 1rem 1rem 0 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(36, 27, 67, .07);
}

.whiteboard-tool-group {
    display: flex;
    gap: .3rem;
}

.whiteboard-tool {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 2.55rem;
    padding: 0 .72rem;
    border: 0;
    border-radius: .72rem;
    color: #657087;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
}

.whiteboard-tool:hover,
.whiteboard-tool.is-active {
    color: #6d3df2;
    background: #f0eaff;
}

.whiteboard-tool .icon {
    width: 1.05rem;
}

.whiteboard-toolbar-divider {
    width: 1px;
    height: 1.8rem;
    margin: 0 .2rem;
    background: #e5e2ec;
}

.whiteboard-color-control,
.whiteboard-width-control,
.whiteboard-background-control {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #6e788c;
    font-size: .72rem;
    font-weight: 700;
}

.whiteboard-color-control input {
    width: 2rem;
    height: 2rem;
    padding: .15rem;
    border: 1px solid #ded9e9;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.whiteboard-width-control input {
    width: 5rem;
    accent-color: #6d3df2;
}

.whiteboard-background-control select {
    min-height: 2.35rem;
    padding: 0 1.8rem 0 .65rem;
    border: 1px solid #e1ddec;
    border-radius: .65rem;
    color: #455066;
    background: #fff;
}

.whiteboard-toolbar-spacer {
    flex: 1;
}

.whiteboard-toolbar button:disabled {
    opacity: .35;
    pointer-events: none;
}

.whiteboard-fullscreen-button .collapse-icon {
    display: none;
}

.whiteboard-fullscreen-button.is-active .expand-icon {
    display: none;
}

.whiteboard-fullscreen-button.is-active .collapse-icon {
    display: inline-block;
}

.whiteboard-workspace:fullscreen,
.whiteboard-workspace.is-fullscreen {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    padding: 1rem;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    background: #f7f6fc;
}

.whiteboard-workspace:fullscreen .whiteboard-stage,
.whiteboard-workspace.is-fullscreen .whiteboard-stage {
    min-height: 0;
}

.whiteboard-stage {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    border: 1px solid #e4e0ef;
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background-color: #fff;
    box-shadow: 0 18px 38px rgba(37, 28, 69, .08);
}

.whiteboard-stage canvas,
.whiteboard-notes-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.whiteboard-stage canvas {
    z-index: 1;
    touch-action: none;
    cursor: crosshair;
}

.whiteboard-stage canvas.is-erasing {
    cursor: cell;
}

.whiteboard-notes-layer {
    z-index: 2;
    pointer-events: none;
}

.whiteboard-stage-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #aaa5b8;
    font-size: .85rem;
    transform: translate(-50%, -50%);
}

.whiteboard-stage-hint .icon {
    width: 1.2rem;
}

.whiteboard-sticky {
    position: absolute;
    display: grid;
    grid-template-rows: 1.9rem 1fr;
    width: clamp(10rem, 18vw, 14rem);
    min-height: 9.5rem;
    min-width: 10rem;
    max-width: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
    overflow: hidden;
    border-radius: .25rem .25rem 1.1rem .25rem;
    box-shadow: 0 12px 24px rgba(54, 43, 83, .18);
    pointer-events: auto;
}

.whiteboard-sticky.is-yellow { background: #fff1a8; }
.whiteboard-sticky.is-pink { background: #ffd9e7; }
.whiteboard-sticky.is-blue { background: #d7edff; }
.whiteboard-sticky.is-green { background: #d6f6e8; }

.whiteboard-sticky-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .2rem .45rem .1rem .7rem;
    color: rgba(55, 52, 68, .42);
    cursor: grab;
    touch-action: none;
}

.whiteboard-sticky-handle:active {
    cursor: grabbing;
}

.whiteboard-sticky-handle button {
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    color: rgba(47, 45, 57, .5);
    background: transparent;
    cursor: pointer;
    font-size: 1.15rem;
}

.whiteboard-sticky-handle button:hover {
    color: #e33155;
    background: rgba(255, 255, 255, .42);
}

.whiteboard-sticky textarea {
    width: 100%;
    min-height: 7.5rem;
    padding: .3rem .8rem 2.1rem;
    border: 0;
    outline: 0;
    color: #393647;
    background: transparent;
    overflow: auto;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font: 600 .83rem/1.5 inherit;
}

.whiteboard-element-author {
    position: absolute;
    left: .65rem;
    bottom: .45rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: calc(100% - 2.8rem);
    padding: .18rem .45rem .18rem .22rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 999px;
    color: #5f5870;
    background: rgb(255 255 255 / 70%);
    box-shadow: 0 3px 10px rgb(48 36 79 / 8%);
    backdrop-filter: blur(5px);
    pointer-events: none;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1;
}

.whiteboard-element-author b,
.whiteboard-stroke-author b {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #7b46f6, #5324cb);
    font-size: .58rem;
}

.whiteboard-element-author > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whiteboard-sticky textarea::-webkit-scrollbar,
.whiteboard-text-box textarea::-webkit-scrollbar,
.whiteboard-toolbar::-webkit-scrollbar,
.whiteboard-stage::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.whiteboard-toolbar,
.whiteboard-stage {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.whiteboard-text-box {
    position: absolute;
    min-width: 8.75rem;
    max-width: calc(100% - 1rem);
    padding: 1.6rem 0.35rem 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    pointer-events: auto;
}

.whiteboard-text-box:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.whiteboard-text-box:focus,
.whiteboard-text-box:focus-within {
    border-color: rgb(109 61 242 / 55%);
    outline: 0;
    background: transparent;
    box-shadow: 0 0 0 2px rgb(109 61 242 / 10%);
}

.whiteboard-text-box .whiteboard-element-author {
    top: 100%;
    bottom: auto;
    margin-top: .28rem;
    opacity: 0;
    transition: opacity 140ms ease;
}

.whiteboard-text-box:hover .whiteboard-element-author,
.whiteboard-text-box:focus .whiteboard-element-author,
.whiteboard-text-box:focus-within .whiteboard-element-author {
    opacity: 1;
}

.whiteboard-stroke-author {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    max-width: 14rem;
    padding: .36rem .58rem .36rem .34rem;
    border: 1px solid #e4ddf7;
    border-radius: 999px;
    color: #463d59;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 8px 22px rgb(44 30 82 / 16%);
    pointer-events: none;
    font-size: .72rem;
    font-weight: 800;
    transform: translateY(-50%);
}

.whiteboard-stroke-author[hidden] {
    display: none;
}

.whiteboard-stroke-author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whiteboard-text-controls {
    position: absolute;
    top: 0.12rem;
    right: 0.25rem;
    left: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8c849f;
    cursor: grab;
    opacity: 0;
    touch-action: none;
    transition: opacity 140ms ease;
}

.whiteboard-text-box:hover .whiteboard-text-controls,
.whiteboard-text-box:focus .whiteboard-text-controls,
.whiteboard-text-box:focus-within .whiteboard-text-controls {
    opacity: 1;
}

.whiteboard-text-controls:active {
    cursor: grabbing;
}

.whiteboard-text-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.whiteboard-text-actions button {
    min-width: 1.55rem;
    height: 1.35rem;
    padding: 0 0.25rem;
    border: 0;
    border-radius: 0.35rem;
    color: #645b77;
    background: #f0edf7;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 800;
}

.whiteboard-text-actions button:hover {
    color: #6032e7;
    background: #e8e0ff;
}

.whiteboard-text-actions button.danger:hover {
    color: #d92f50;
    background: #ffe5eb;
}

.whiteboard-text-box textarea {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.15rem 0.35rem;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    scrollbar-width: none;
}

.whiteboard-text-box textarea::placeholder {
    color: #aaa3b8;
    font-weight: 600;
}

.whiteboard-text-resize {
    position: absolute;
    right: -0.15rem;
    bottom: -0.2rem;
    width: 1.3rem;
    height: 1.3rem;
    border: 0;
    color: #817795;
    background: transparent;
    cursor: nwse-resize;
    opacity: 0;
}

.whiteboard-text-box:hover .whiteboard-text-resize,
.whiteboard-text-box:focus .whiteboard-text-resize,
.whiteboard-text-box:focus-within .whiteboard-text-resize {
    opacity: 1;
}

.whiteboard-sticky-resize {
    position: absolute;
    right: .2rem;
    bottom: .2rem;
    display: grid;
    align-content: end;
    justify-content: end;
    gap: 2px;
    width: 1.6rem;
    height: 1.6rem;
    padding: .25rem;
    border: 0;
    color: rgba(48, 45, 60, .38);
    background: transparent;
    cursor: nwse-resize;
    touch-action: none;
}

.whiteboard-sticky-resize span {
    display: block;
    justify-self: end;
    height: 1px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: right center;
}

.whiteboard-sticky-resize span:nth-child(1) { width: .35rem; }
.whiteboard-sticky-resize span:nth-child(2) { width: .58rem; }
.whiteboard-sticky-resize span:nth-child(3) { width: .8rem; }

.whiteboard-sticky-resize:hover {
    color: #6d3df2;
}

@media (max-width: 1120px) {
    .whiteboard-card-grid {
        grid-template-columns: repeat(2, minmax(15rem, 1fr));
    }

    .whiteboard-member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .whiteboard-tool span,
    .whiteboard-color-control span,
    .whiteboard-width-control span,
    .whiteboard-background-control > span,
    .whiteboard-save-status,
    .whiteboard-people small {
        display: none;
    }
}

@media (max-width: 760px) {
    .whiteboard-page-head,
    .whiteboard-workspace-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .whiteboard-new-button {
        width: 100%;
    }

    .whiteboard-summary-grid,
    .whiteboard-card-grid,
    .whiteboard-form-grid,
    .whiteboard-member-grid {
        grid-template-columns: 1fr;
    }

    .whiteboard-description-field {
        grid-row: auto;
    }

    .whiteboard-head-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .whiteboard-toolbar {
        overflow-x: auto;
    }

    .whiteboard-toolbar-spacer {
        min-width: .25rem;
    }

    .whiteboard-workspace-shell {
        padding: .75rem !important;
    }

    .whiteboard-workspace {
        grid-template-rows: auto auto minmax(30rem, calc(100vh - 17rem));
    }
}

.task-pagination-summary {
    color: #7b8498;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 720;
    white-space: nowrap;
}

.task-pagination-summary strong {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 880;
}

.task-pagination-controls,
.task-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.task-page-button,
.task-page-numbers a,
.task-page-numbers strong,
.task-page-ellipsis {
    min-width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #56617a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 820;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.task-page-button {
    min-width: 6.75rem;
    padding: 0 0.8rem;
    gap: 0.45rem;
}

.task-page-button:hover,
.task-page-numbers a:hover {
    color: var(--brand);
    border-color: rgba(109, 61, 242, 0.28);
    background: #f7f4ff;
    transform: translateY(-1px);
}

.task-page-numbers strong {
    border-color: transparent;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(109, 61, 242, 0.18);
}

.task-page-ellipsis {
    min-width: 1.5rem;
    border-color: transparent;
    background: transparent;
    color: #9ca3af;
}

.task-page-button.is-disabled {
    border-color: rgba(148, 163, 184, 0.13);
    color: #b1b8c5;
    background: rgba(248, 250, 252, 0.78);
    pointer-events: none;
}

.messages {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.messages li {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 1rem;
    background: rgba(236, 253, 245, 0.92);
    color: #065f46;
    font-size: 0.875rem;
    font-weight: 650;
}

.errorlist {
    margin-top: 0.25rem;
    padding: 0;
    list-style: none;
    color: #dc2626;
    font-size: 0.86rem;
}

.form-errors {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 0.9rem;
    background: rgba(254, 242, 242, 0.9);
    color: #b91c1c;
    font-size: 0.9rem;
    font-weight: 700;
}

.form-errors p {
    margin: 0;
}

.compact-form-errors {
    max-width: 36rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
}

.metric {
    margin: 0.25rem 0;
    color: #020617;
    font-size: 2rem;
    font-weight: 850;
}

.muted {
    color: var(--muted);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
}

.workspace-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.workspace-table th,
.workspace-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    font-size: 0.88rem;
}

.workspace-table th {
    color: var(--subtle);
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(248, 250, 252, 0.85);
}

.table-sort-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.table-sort-link:hover,
.table-sort-link.is-active {
    color: var(--brand);
}

.table-sort-focus {
    max-width: 7.5rem;
    overflow: hidden;
    padding: .18rem .42rem;
    border-radius: 999px;
    color: #6d3df2;
    background: #eee9ff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.table-sort-arrow {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #f3f0ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
}

.workspace-table tbody tr {
    transition: background 0.16s ease, transform 0.16s ease;
}

.workspace-table tbody tr:hover {
    background: rgba(248, 250, 252, 0.9);
}

.task-title-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.task-check {
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.35rem;
    background: #ffffff;
}

.task-code {
    color: var(--subtle);
    font-size: 0.75rem;
    font-weight: 780;
}

.task-title {
    display: block;
    margin-top: 0.15rem;
    color: var(--ink);
    font-weight: 760;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.74rem;
    font-weight: 800;
}

.badge::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: currentColor;
}

.badge-critical,
.badge-high {
    background: #fee2e2;
    color: #dc2626;
}

.badge-medium,
.badge-in_qa {
    background: #fef3c7;
    color: #d97706;
}

.badge-ready,
.badge-ready_for_production,
.badge-review_requested,
.badge-finished,
.badge-active {
    background: #dcfce7;
    color: #059669;
}

.badge-paused {
    background: #f3f0ff;
    color: var(--brand);
}

.badge-low,
.badge-pending {
    background: #e0f2fe;
    color: #0284c7;
}

.badge-in_progress {
    background: #ede9fe;
    color: #7c3aed;
}

.badge-changes_requested,
.badge-cancelled {
    background: #ffe4e6;
    color: #e11d48;
}

.assignee-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    font-weight: 680;
}

.mini-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #64748b, #111827);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.filters {
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.timeline {
    display: grid;
    gap: 0.75rem;
}

.timeline-item {
    padding: 0.75rem;
    border: 1px solid transparent;
    border-left: 4px solid var(--brand);
    border-radius: 0 1rem 1rem 0;
    background: #f8fafc;
}

.empty-state {
    padding: 2rem;
    color: var(--muted);
    text-align: center;
}

.calendar-hero,
.meeting-detail-hero {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff, #eefdf9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-hero h1,
.meeting-detail-hero h1 {
    margin: 0.1rem 0 0.35rem;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1;
}

.calendar-hero p,
.meeting-detail-hero p {
    max-width: 48rem;
    color: #64748b;
    font-weight: 650;
}

.calendar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.calendar-stat-grid {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.calendar-stat {
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.07);
}

.calendar-stat span,
.calendar-stat small {
    display: block;
    color: #64748b;
    font-weight: 760;
}

.calendar-stat strong {
    display: block;
    margin: 0.35rem 0;
    color: #0f766e;
    font-size: 2rem;
    line-height: 1;
}

.calendar-shell,
.meeting-form-grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.32fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.meeting-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
}

.calendar-sidebar-panel,
.calendar-board {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.07);
}

.calendar-sidebar-panel {
    padding: 1rem;
}

.calendar-filters {
    display: grid;
    gap: 0.65rem;
}

.calendar-filters label,
.meeting-main-form label,
.meeting-side-form label,
.meeting-settings-form label {
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 820;
}

.calendar-upcoming {
    margin-top: 1rem;
}

.meeting-list-item,
.calendar-event-card {
    color: inherit;
    text-decoration: none;
}

.meeting-list-item {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    display: grid;
    gap: 0.18rem;
}

.meeting-date,
.meeting-list-item small,
.calendar-event-card small,
.calendar-event-card em {
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
}

.calendar-board {
    overflow: hidden;
}

.calendar-board-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-board-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
}

.calendar-board-head span {
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 680;
}

.calendar-tabs {
    padding: 0.2rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0.75rem;
    background: #f8fafc;
    display: inline-flex;
    gap: 0.15rem;
}

.calendar-tabs button {
    min-width: 4rem;
    height: 2rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #64748b;
    font-weight: 850;
    cursor: pointer;
}

.calendar-tabs button.is-active {
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.calendar-event-grid {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.calendar-event-card {
    min-height: 8.5rem;
    padding: 0.9rem;
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-left: 4px solid #0f766e;
    border-radius: 0.75rem;
    background: #ffffff;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.calendar-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.calendar-event-card[data-status="CANCELLED"] {
    border-left-color: #ef4444;
    opacity: 0.72;
}

.calendar-event-card strong {
    color: #111827;
}

.calendar-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    color: #64748b;
    text-align: center;
    display: grid;
    gap: 0.3rem;
}

.calendar-page-v2 .calendar-hero {
    padding: 0.35rem 0 0.85rem;
    border: 0;
    background: transparent;
}

.calendar-page-v2 .calendar-hero .eyebrow {
    margin: 0 0 0.85rem;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 860;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendar-page-v2 .calendar-hero h1 {
    font-size: clamp(2.4rem, 4vw, 3.35rem);
    font-weight: 560;
    letter-spacing: -0.045em;
}

.calendar-page-v2 .calendar-hero > div:first-child > p:last-child {
    max-width: 38rem;
    margin: 0;
    line-height: 1.55;
}

.calendar-page-v2 .calendar-actions .btn {
    min-height: 3.2rem;
    padding-inline: 1.2rem;
    border-radius: 0.75rem;
}

.calendar-page-v2 .calendar-stat-grid {
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.calendar-page-v2 .calendar-stat {
    min-height: 7rem;
    padding: 1.2rem;
    border-color: rgba(109, 61, 242, 0.1);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 28px rgba(28, 23, 51, 0.05);
}

.calendar-stat-icon {
    flex: 0 0 auto;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 0.75rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.calendar-stat-icon .icon {
    width: 1.45rem;
    height: 1.45rem;
}

.calendar-stat-icon.purple {
    color: var(--brand);
    background: #f0eaff;
}

.calendar-stat-icon.green {
    color: #059669;
    background: #e8f8f2;
}

.calendar-stat-icon.amber {
    color: #e78a00;
    background: #fff4df;
}

.calendar-stat-icon.red {
    color: #ef476f;
    background: #ffecef;
}

.calendar-page-v2 .calendar-stat > span:last-child {
    min-width: 0;
}

.calendar-page-v2 .calendar-stat strong {
    margin: 0 0 0.3rem;
    color: #111827;
    font-size: 1.8rem;
    font-weight: 650;
}

.calendar-page-v2 .calendar-stat small {
    font-size: 0.78rem;
}

.calendar-page-v2 .calendar-shell {
    grid-template-columns: minmax(15rem, 0.27fr) minmax(0, 1fr);
    gap: 1rem;
}

.calendar-page-v2 .calendar-sidebar-panel,
.calendar-page-v2 .calendar-board {
    border-color: rgba(109, 61, 242, 0.1);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(28, 23, 51, 0.05);
}

.calendar-page-v2 .calendar-sidebar-panel {
    padding: 1.15rem;
}

.calendar-page-v2 .calendar-sidebar-panel > h2,
.calendar-page-v2 .calendar-upcoming h2 {
    margin: 0 0 0.9rem;
    color: #172033;
    font-size: 0.98rem;
    font-weight: 830;
}

.calendar-page-v2 .calendar-filters {
    gap: 0.55rem;
}

.calendar-page-v2 .calendar-filters label {
    margin-top: 0.2rem;
}

.calendar-page-v2 .calendar-filters .form-control {
    min-height: 2.75rem;
    border-color: #e1e4f0;
    border-radius: 0.65rem;
    background: #fff;
}

.calendar-page-v2 .calendar-filters .btn {
    min-height: 2.75rem;
    margin-top: 0.2rem;
    color: var(--brand);
    border-color: rgba(109, 61, 242, 0.7);
    justify-content: center;
}

.calendar-page-v2 .calendar-upcoming {
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid #ececf5;
}

.calendar-page-v2 .meeting-list-item {
    padding: 0.75rem 0.25rem;
}

.calendar-page-v2 .meeting-list-item .meeting-date {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.calendar-page-v2 .meeting-list-item .meeting-date i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #10a37f;
}

.calendar-page-v2 .calendar-board-head {
    padding: 1rem 1.15rem;
}

.calendar-board-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.calendar-board-title > span:last-child {
    min-width: 0;
}

.calendar-board-title small {
    color: #667085;
    font-size: 0.77rem;
    font-weight: 650;
}

.calendar-board-icon {
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.7rem;
    background: #f0eaff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.calendar-board-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.calendar-page-v2 .calendar-tabs {
    padding: 0;
    overflow: hidden;
    border-radius: 0.65rem;
    background: #fff;
    gap: 0;
}

.calendar-page-v2 .calendar-tabs a {
    min-width: 4.4rem;
    height: 2.4rem;
    padding: 0 0.8rem;
    border-right: 1px solid #e5e7f0;
    color: #596680;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 790;
}

.calendar-page-v2 .calendar-tabs a:last-child {
    border-right: 0;
}

.calendar-page-v2 .calendar-tabs a.is-active {
    color: #fff;
    background: linear-gradient(135deg, #713df3, #5426d8);
}

.calendar-navigation {
    min-height: 4rem;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid #ececf4;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.calendar-navigation > strong {
    min-width: 9rem;
    color: #172033;
    font-size: 1.02rem;
    text-align: center;
}

.calendar-nav-button,
.calendar-today-button {
    min-width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #e1e4ef;
    border-radius: 0.65rem;
    background: #fff;
    color: #596680;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.calendar-nav-button .icon {
    width: 1rem;
}

.calendar-today-button {
    min-width: 4rem;
    margin-left: auto;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    font-weight: 790;
}

.calendar-weekdays,
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    min-height: 2.8rem;
    border-bottom: 1px solid #e6e8f1;
    background: #fbfbfe;
}

.calendar-weekdays span {
    padding: 0.85rem 0.55rem;
    color: #7a849b;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.calendar-day {
    min-width: 0;
    min-height: 8.4rem;
    padding: 0.55rem;
    border-right: 1px solid #e8eaf2;
    border-bottom: 1px solid #e8eaf2;
    background: #fff;
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day.is-outside {
    background: #fafbfe;
}

.calendar-day-number {
    width: 1.55rem;
    height: 1.55rem;
    margin-bottom: 0.35rem;
    color: #65718a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 750;
}

.calendar-day.is-outside .calendar-day-number {
    color: #b2b8c7;
}

.calendar-day.is-today .calendar-day-number {
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
}

.calendar-day-events {
    display: grid;
    gap: 0.28rem;
}

.calendar-day-event {
    min-width: 0;
    padding: 0.45rem 0.5rem;
    border: 1px solid #d9e7ff;
    border-left: 3px solid #2d7ff9;
    border-radius: 0.55rem;
    background: #f7faff;
    color: #172033;
    display: grid;
    gap: 0.12rem;
}

.calendar-day-event:hover {
    border-color: rgba(109, 61, 242, 0.4);
    box-shadow: 0 5px 14px rgba(28, 23, 51, 0.08);
}

.calendar-day-event[data-status="CANCELLED"] {
    border-color: #ffd5dc;
    border-left-color: #ef476f;
    background: #fff9fa;
    opacity: 0.78;
}

.calendar-day-event[data-status="CONFIRMED"],
.calendar-day-event[data-status="COMPLETED"] {
    border-color: #cfeee4;
    border-left-color: #10a37f;
    background: #f7fdfa;
}

.calendar-day-event small,
.calendar-day-event span {
    overflow: hidden;
    color: #73809a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.61rem;
}

.calendar-day-event strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.69rem;
}

.calendar-more-events {
    color: var(--brand);
    font-size: 0.68rem;
    font-weight: 780;
}

.calendar-board[data-calendar-view="week"] .calendar-day {
    min-height: 30rem;
}

.calendar-board[data-calendar-view="day"] .calendar-month-grid {
    grid-template-columns: 1fr;
}

.calendar-board[data-calendar-view="day"] .calendar-day {
    min-height: 32rem;
}

.meeting-main-form,
.meeting-side-form,
.meeting-settings-form {
    display: grid;
    gap: 1rem;
}

.form-grid {
    display: grid;
    gap: 0.85rem;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.meeting-main-form label,
.meeting-side-form label,
.meeting-settings-form label {
    display: grid;
    gap: 0.35rem;
}

.meeting-side-form h2 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
}

.meeting-participant-picker {
    padding: 0.9rem;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
    display: grid;
    gap: 0.85rem;
}

.meeting-picker-head {
    display: grid;
    gap: 0.2rem;
}

.meeting-picker-head strong,
.meeting-choice-columns h3 {
    color: #111827;
    font-size: 0.9rem;
    font-weight: 900;
}

.meeting-picker-head small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.meeting-choice-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.meeting-choice-columns h3 {
    margin: 0 0 0.45rem;
}

.meeting-choice-list {
    max-height: 16rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    display: grid;
    gap: 0.45rem;
}

.meeting-choice-list li {
    margin: 0;
}

.meeting-choice-list label {
    min-height: 2.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0.72rem;
    background: #ffffff;
    color: #334155;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0.55rem !important;
    cursor: pointer;
}

.meeting-choice-list input {
    width: 1rem;
    height: 1rem;
    accent-color: #6d3df2;
}

.meeting-choice-list label:has(input:checked) {
    border-color: rgba(109, 61, 242, 0.36);
    background: rgba(109, 61, 242, 0.08);
    color: #312e81;
}

.check-row {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0.5rem !important;
}

.meeting-checkbox {
    width: 1rem;
    height: 1rem;
}

.meeting-form-heading {
    margin-bottom: 1.35rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.meeting-form-heading .eyebrow {
    margin: 0 0 0.55rem;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.meeting-form-heading h1 {
    margin: 0 0 0.45rem;
    color: #111827;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 570;
    letter-spacing: -0.035em;
}

.meeting-form-heading p:last-child {
    margin: 0;
    color: #667085;
}

.meeting-form-heading > .btn {
    min-height: 2.9rem;
    border-radius: 0.75rem;
}

.meeting-form-grid-v2 {
    grid-template-columns: minmax(0, 1.55fr) minmax(21rem, 1fr);
    gap: 1rem;
}

.meeting-form-alert {
    grid-column: 1 / -1;
}

.meeting-form-main,
.meeting-form-side {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1rem;
}

.meeting-card {
    overflow: visible;
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(28, 23, 51, 0.045);
}

.meeting-card-head {
    min-height: 3.7rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid #ececf4;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meeting-card-head > span {
    color: var(--brand);
    display: inline-flex;
}

.meeting-card-head > span .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.meeting-card-head h2 {
    margin: 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 830;
}

.meeting-card-body {
    padding: 1rem 1.15rem 1.15rem;
    display: grid;
    gap: 1rem;
}

.meeting-card-body label {
    color: #465169;
    display: grid;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 790;
}

.meeting-card-body .form-control,
.meeting-card-body input[type="text"],
.meeting-card-body input[type="email"],
.meeting-card-body input[type="url"],
.meeting-card-body input[type="date"],
.meeting-card-body input[type="datetime-local"],
.meeting-card-body select {
    width: 100%;
    min-height: 2.85rem;
    border: 1px solid #e0e3ee;
    border-radius: 0.7rem;
    background: #fff;
    color: #263147;
}

.meeting-card-body textarea.form-control {
    min-height: 6rem;
    padding: 0.75rem;
    resize: vertical;
}

.meeting-card-body .errorlist {
    margin: 0;
    padding: 0;
    color: #dc2626;
    list-style: none;
    font-size: 0.72rem;
}

.meeting-member-search {
    min-height: 2.85rem;
    padding: 0 0.75rem;
    border: 1px solid #e0e3ee;
    border-radius: 0.7rem;
    color: #8a93a8 !important;
    display: flex !important;
    align-items: center;
    gap: 0.55rem !important;
}

.meeting-member-search .icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.meeting-member-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
}

.meeting-card-body .meeting-choice-columns {
    gap: 0.85rem;
}

.meeting-card-body .meeting-choice-list {
    max-height: 12rem;
    gap: 0;
    border: 1px solid #e3e5ee;
    border-radius: 0.7rem;
}

.meeting-card-body .meeting-choice-list label {
    min-height: 3rem;
    border: 0;
    border-bottom: 1px solid #eceef4;
    border-radius: 0;
}

.meeting-card-body .meeting-choice-list li:last-child label {
    border-bottom: 0;
}

.meeting-external-block {
    display: grid;
    gap: 0.4rem;
}

.meeting-external-block > strong,
.meeting-section-label {
    color: #263147;
    font-size: 0.82rem;
    font-weight: 820;
}

.meeting-external-block > small {
    color: #7a849b;
    font-size: 0.72rem;
}

.meeting-section-label {
    padding-top: 0.75rem;
    border-top: 1px solid #ececf4;
    color: var(--brand);
}

.meeting-options-list {
    display: grid;
}

.meeting-options-list .check-row {
    min-height: 3rem;
    margin: 0;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #ececf4;
    color: #465169;
    font-size: 0.8rem;
    font-weight: 680;
}

.meeting-options-list .check-row:last-child {
    border-bottom: 0;
}

.meeting-options-list .meeting-checkbox {
    accent-color: var(--brand);
}

.meeting-save-button {
    width: 100%;
    min-height: 3.25rem;
    border-radius: 0.75rem;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(109, 61, 242, 0.2);
}

.meeting-alert {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 0.75rem;
    background: #fff1f2;
    color: #be123c;
    font-weight: 760;
}

.meeting-detail-list {
    display: grid;
    gap: 0.8rem;
}

.meeting-detail-list p {
    margin: 0;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
}

.meeting-detail-list strong {
    color: #111827;
}

.meeting-detail-list span {
    color: #64748b;
    font-weight: 700;
}

.meeting-participant-list {
    display: grid;
    gap: 0.7rem;
}

.meeting-participant-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.meeting-participant-row strong,
.meeting-participant-row small {
    display: block;
}

.meeting-participant-row small {
    color: #64748b;
    font-weight: 700;
}

.meeting-response-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.user-directory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.user-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.user-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.2);
    box-shadow: var(--shadow-md);
}

.user-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.role-list {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.checkbox-list ul,
.checkbox-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkbox-list li {
    margin-bottom: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    background: rgba(248, 250, 252, 0.75);
}

.checkbox-list label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.user-form-shell {
    max-width: 94rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.6rem;
    color: #8b73e6;
    font-size: 0.9rem;
    font-weight: 720;
}

.user-form-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.45rem;
}

.user-form-heading h1 {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
}

.user-form-heading p {
    margin: 0;
    color: #68728a;
    font-size: 0.95rem;
}

.heading-icon,
.section-icon {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    background: #eee7ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.8rem;
}

.section-icon.green {
    background: #eafaf3;
    color: #059669;
}

.section-icon.purple {
    background: #eee7ff;
    color: var(--brand);
}

.premium-user-form {
    display: grid;
    gap: 1.15rem;
}

.form-card {
    padding: 1.5rem;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
}

.form-card-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
}

.form-card-title h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 850;
}

.form-card-title p {
    margin: 0.15rem 0 0;
    color: #68728a;
    font-size: 0.86rem;
}

.personal-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    gap: 1.45rem;
}

.personal-card .form-control,
.premium-user-form .form-control {
    min-height: 3.3rem;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.personal-card .form-control:focus,
.premium-user-form .form-control:focus {
    border-color: rgba(109, 61, 242, 0.55);
    box-shadow: 0 0 0 4px rgba(109, 61, 242, 0.14);
}

.required {
    color: #ef4444;
}

.field-help {
    margin: 0.55rem 0 0;
    color: #9089b8;
    font-size: 0.78rem;
}

.identity-color-row {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(109, 61, 242, 0.1);
}

.identity-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.color-option {
    position: relative;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-option span {
    width: 1rem;
    height: 1rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: var(--identity-color);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12);
}

.color-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--identity-color) 62%, #ffffff);
    background: color-mix(in srgb, var(--identity-color) 10%, #ffffff);
    color: #111827;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

.user-form-grid {
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) minmax(18rem, 0.9fr) minmax(21rem, 1fr);
    gap: 1rem;
}

.role-card-list {
    display: grid;
    gap: 0.55rem;
}

.role-option {
    position: relative;
    min-height: 4.15rem;
    margin: 0;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 0.78rem;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1.15rem 2.05rem minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.role-option:has(input:checked) {
    border-color: rgba(109, 61, 242, 0.62);
    background: linear-gradient(135deg, rgba(109, 61, 242, 0.08), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 0 0 1px rgba(109, 61, 242, 0.08);
}

.role-option input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--brand);
}

.role-icon {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.65rem;
    background: #f1edff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.role-copy strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 820;
}

.role-copy span {
    display: block;
    margin-top: 0.16rem;
    color: #717b94;
    font-size: 0.8rem;
    font-weight: 560;
}

.switch-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1rem 0;
}

.switch-line + .switch-line {
    border-top: 1px solid rgba(109, 61, 242, 0.1);
}

.switch-line strong,
.switch-line small {
    display: block;
}

.switch-line strong {
    margin-bottom: 0.3rem;
    color: #111827;
    font-size: 0.92rem;
}

.switch-line small {
    max-width: 18rem;
    color: #68728a;
    font-size: 0.83rem;
    line-height: 1.55;
}

.switch-line input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle {
    position: relative;
    width: 3.05rem;
    height: 1.55rem;
    border-radius: 999px;
    background: #d8dce8;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.16);
    transition: background 0.16s ease;
}

.toggle::after {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: 0.2rem;
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 8px rgba(17, 24, 39, 0.18);
    transition: transform 0.16s ease;
}

.switch-line input:checked + .toggle {
    background: linear-gradient(135deg, var(--brand), #5b21b6);
}

.switch-line input:checked + .toggle::after {
    transform: translateX(1.42rem);
}

.strength-meter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center;
    gap: 0.25rem;
    margin: 0.55rem 0 0.85rem;
}

.strength-meter span {
    height: 0.23rem;
    border-radius: 999px;
    background: #12a567;
}

.strength-meter strong {
    margin-left: 0.55rem;
    color: #12a567;
    font-size: 0.78rem;
}

.password-rules {
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    color: #68728a;
    font-size: 0.8rem;
}

.password-rules li::before {
    content: "✓";
    margin-right: 0.55rem;
    color: #12a567;
    font-weight: 900;
}

.form-actions-bar {
    min-height: 5.35rem;
    padding: 1.25rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.form-actions-bar .btn {
    min-width: 13.5rem;
    min-height: 3.15rem;
}

.form-actions-bar.compact {
    min-height: auto;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    justify-content: flex-start;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(22rem, 1.18fr);
    gap: 1.2rem;
    align-items: start;
}

.account-profile-card {
    position: sticky;
    top: 1.2rem;
}

.account-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(217, 225, 236, 0.86);
    border-radius: 1rem;
    background: #f8fafc;
}

.avatar.large {
    width: 4rem;
    height: 4rem;
    font-size: 1.55rem;
}

.account-identity strong,
.account-identity small {
    display: block;
}

.account-identity strong {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 850;
}

.account-identity small {
    margin-top: 0.22rem;
    color: var(--subtle);
    font-weight: 650;
}

.account-details {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.account-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(217, 225, 236, 0.72);
}

.account-details div:last-child {
    border-bottom: 0;
}

.account-details dt {
    color: var(--subtle);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.account-details dd {
    margin: 0;
    color: var(--ink);
    font-weight: 850;
}

.account-password-form {
    display: block;
}

.project-form-shell {
    width: min(100%, 106rem);
    padding-top: 1.55rem;
}

.project-form-crumbs {
    margin-bottom: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #8a93a8;
    font-size: 0.84rem;
    font-weight: 760;
}

.project-form-crumbs a {
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.project-form-heading {
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.project-form-heading h1 {
    margin: 0 0 0.3rem;
    font-size: 1.8rem;
    line-height: 1.1;
}

.project-form-heading p {
    margin: 0;
    color: #68728a;
    font-size: 0.95rem;
}

.premium-project-form {
    display: grid;
    gap: 1.15rem;
}

.project-section {
    padding: 1.25rem;
}

.project-general-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(15rem, 1fr) minmax(20rem, 1.12fr);
    gap: 1.15rem;
    align-items: start;
}

.project-general-grid .description-row {
    grid-row: span 2;
}

.project-general-grid textarea {
    min-height: 7.1rem;
    resize: vertical;
}

.align-right {
    text-align: right;
}

.project-settings-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(15rem, 1fr) minmax(9rem, 0.7fr);
    gap: 1.15rem;
    align-items: start;
}

.project-section .form-row {
    margin-bottom: 0;
}

.project-section label {
    display: block;
    margin-bottom: 0.52rem;
    color: #172033;
    font-size: 0.84rem;
    font-weight: 830;
}

.project-section .form-control {
    min-height: 3.15rem;
    border-color: rgba(109, 61, 242, 0.17);
    border-radius: 0.85rem;
    background: #ffffff;
}

.project-select .form-control,
.project-responsibility-grid .input-with-icon .form-control {
    padding-left: 2.6rem;
}

.project-responsibility-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
    gap: 1.15rem;
}

.project-responsibility-grid select[multiple] {
    min-height: 5.6rem;
    padding: 0.7rem 0.85rem 0.7rem 2.6rem;
    line-height: 1.45;
}

.project-responsibility-grid select[multiple] option {
    padding: 0.35rem 0.45rem;
    border-radius: 0.45rem;
}

.project-member-picker {
    padding: 0.9rem;
    border: 1px solid rgba(109, 61, 242, 0.16);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), #ffffff);
    display: grid;
    gap: 0.8rem;
}

.project-member-picker-head {
    display: grid;
    gap: 0.22rem;
}

.project-member-picker-head strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 900;
}

.project-member-picker-head small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.35;
}

.project-member-check-list {
    max-height: 15.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.project-member-check-list li {
    margin: 0;
}

.project-member-check-list label {
    min-height: 2.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #334155;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0.55rem !important;
    cursor: pointer;
}

.project-member-check-list input {
    width: 1rem;
    height: 1rem;
    accent-color: #6d3df2;
}

.project-member-check-list label:has(input:checked) {
    border-color: rgba(109, 61, 242, 0.36);
    background: rgba(109, 61, 242, 0.08);
    color: #312e81;
}

.project-compact-select {
    position: relative;
    min-height: 3.15rem;
    padding: 0 2.6rem 0 0.85rem;
    border: 1px solid rgba(109, 61, 242, 0.17);
    border-radius: 0.85rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #172033;
    font-weight: 780;
}

.project-compact-select select {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0 2.4rem 0 3.6rem;
    border: 0;
    border-radius: inherit;
    background: #ffffff;
    color: #172033;
    cursor: pointer;
    appearance: none;
    opacity: 0;
}

.project-compact-select select:focus {
    outline: none;
}

.project-compact-select select option {
    color: #172033;
}

.project-compact-select:focus-within {
    border-color: rgba(109, 61, 242, 0.45);
    box-shadow: 0 0 0 4px rgba(109, 61, 242, 0.1);
}

.project-compact-select strong {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 850;
}

.project-color-dot,
.space-initial,
.space-card-logo {
    background: var(--space-color, var(--project-choice-color, #7c3aed));
}

.project-color-dot {
    position: relative;
    z-index: 1;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.45rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--space-color, #7c3aed) 28%, transparent);
}

.project-icon-preview {
    position: relative;
    z-index: 1;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.65rem;
    background: #eee7ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-compact-select .select-chevron {
    position: absolute;
    z-index: 4;
    right: 0.85rem;
    width: 1rem;
    height: 1rem;
    color: #64748b;
    pointer-events: none;
}

.project-toggle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.project-toggle-card {
    position: relative;
    min-height: 5.65rem;
    margin: 0;
    padding: 0.9rem 4.6rem 0.9rem 0.9rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.9rem;
    background: #ffffff;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.project-toggle-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.project-toggle-card .toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 3.05rem;
    height: 1.55rem;
    transform: translateY(-50%);
}

.toggle-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.72rem;
    background: #f1edff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-toggle-card strong,
.project-toggle-card small {
    display: block;
}

.project-toggle-card strong {
    color: #172033;
    font-size: 0.88rem;
    font-weight: 850;
}

.project-toggle-card small {
    margin-top: 0.28rem;
    color: #68728a;
    font-size: 0.76rem;
    line-height: 1.45;
}

.project-toggle-card input:checked + .toggle {
    background: linear-gradient(135deg, var(--brand), #5b21b6);
}

.project-toggle-card input:checked + .toggle::after {
    transform: translateX(1.42rem);
}

.project-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.project-actions-bar > div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.project-actions-bar .btn {
    min-width: 12rem;
}

.reports-shell {
    width: min(100%, 106rem);
    padding-top: 1.55rem;
}

.reports-hero {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.reports-hero h1 {
    margin: 0 0 0.35rem;
    font-size: 1.85rem;
}

.reports-hero p {
    margin: 0;
    color: #68728a;
}

.reports-filter-bar {
    margin-bottom: 1.15rem;
    padding: 1rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
    align-items: end;
    gap: 0.75rem;
}

.reports-filter-bar .form-row {
    margin: 0;
}

.reports-filter-bar label {
    display: block;
    margin-bottom: 0.45rem;
    color: #5f6b84;
    font-size: 0.78rem;
    font-weight: 820;
}

.reports-filter-bar .btn {
    min-width: 6.75rem;
}

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.report-kpi-card {
    min-height: 8.4rem;
    padding: 1rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.report-kpi-card .summary-icon {
    margin-bottom: 0.25rem;
}

.report-kpi-card small,
.report-kpi-card em {
    color: #68728a;
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 760;
}

.report-kpi-card strong {
    color: #111827;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}

.reports-chart-grid,
.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.reports-shell > .panel {
    margin-bottom: 1rem;
}

.report-bars {
    display: grid;
    gap: 0.85rem;
}

.report-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.report-bar-row span {
    color: #111827;
    font-weight: 780;
}

.report-bar-row strong {
    color: #68728a;
    font-size: 0.85rem;
}

.report-bar-row div {
    grid-column: 1 / -1;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f7;
}

.report-bar-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), #8b5cf6);
}

.report-bar-row.priority-critical i {
    background: linear-gradient(90deg, #ef4444, #e11d48);
}

.report-bar-row.priority-high i {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.report-bar-row.priority-medium i {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.report-list {
    display: grid;
    gap: 0.7rem;
}

.report-list-item {
    min-height: 4.4rem;
    padding: 0.75rem;
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 0.9rem;
    background: #fbfaff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.report-list-item strong,
.report-list-item small {
    display: block;
}

.report-list-item strong {
    color: #111827;
    font-weight: 850;
}

.report-list-item small {
    margin-top: 0.2rem;
    color: #68728a;
    font-size: 0.78rem;
}

.report-list-item b {
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: #eee7ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
}

.task-form-shell {
    width: min(100%, 104rem);
    padding-top: 1.55rem;
}

.task-form-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.template-button {
    min-width: 10rem;
    min-height: 3rem;
}

.task-form-heading {
    margin-bottom: 1.45rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.task-form-heading h1 {
    margin-bottom: 0.45rem;
    font-size: clamp(1.7rem, 2.3vw, 2.2rem);
    line-height: 1.08;
}

.task-form-heading p {
    margin: 0;
    max-width: 48rem;
    color: #5f6b84;
    font-size: 0.98rem;
}

.premium-task-form {
    display: grid;
    gap: 1.35rem;
}

.task-main-card {
    padding: 1.65rem;
    border-radius: 1.35rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)),
        radial-gradient(circle at 78% 18%, rgba(109, 61, 242, 0.06), transparent 24rem);
}

.task-form-grid {
    display: grid;
    gap: 1.1rem;
}

.task-form-grid.primary {
    grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1fr) minmax(14rem, 1fr) minmax(18rem, 1.05fr);
    align-items: start;
}

.task-form-grid.secondary {
    grid-template-columns: repeat(4, minmax(13rem, 1fr));
    align-items: start;
}

.task-form-divider {
    height: 1px;
    margin: 1.45rem 0;
    background: linear-gradient(90deg, transparent, rgba(109, 61, 242, 0.18), transparent);
}

.task-main-card label {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 800;
}

.task-main-card .form-control {
    min-height: 3.25rem;
    border-color: rgba(109, 61, 242, 0.16);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.96);
    color: #172033;
    font-size: 0.93rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.task-members-row select[multiple] {
    min-height: 5.6rem;
    padding: 0.7rem 0.85rem 0.7rem 2.6rem;
    line-height: 1.45;
}

.task-members-row select[multiple] option {
    padding: 0.35rem 0.45rem;
    border-radius: 0.45rem;
}

.task-main-card textarea.form-control {
    min-height: 7.25rem;
    resize: vertical;
}

.task-main-card .form-control::placeholder {
    color: #8b95aa;
}

.task-main-card .form-control:focus {
    border-color: rgba(109, 61, 242, 0.55);
    box-shadow: 0 0 0 4px rgba(109, 61, 242, 0.12);
}

.input-with-icon {
    position: relative;
}

.input-with-icon > .icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    color: #73809a;
    transform: translateY(-50%);
    pointer-events: none;
}

.input-with-icon .form-control {
    padding-left: 2.55rem;
}

.status-dot-icon {
    color: #a7aec0;
}

.priority-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}

.priority-picker select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.task-create-card .priority-picker select.form-control {
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
}

.priority-chip {
    min-height: 3.05rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.72rem;
    background: #ffffff;
    color: #526078;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.priority-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.priority-chip .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.priority-chip span {
    width: 0.7rem;
    height: 1px;
    border-radius: 999px;
    background: currentColor;
}

.priority-chip.low {
    color: #2563eb;
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.14);
}

.priority-chip.medium {
    color: #f59e0b;
    background: #fff7ed;
    border-color: rgba(245, 158, 11, 0.18);
}

.priority-chip.high {
    color: #ef4444;
    background: #fff1f2;
    border-color: rgba(239, 68, 68, 0.16);
}

.priority-chip.critical {
    color: #e11d48;
    background: #fff1f6;
    border-color: rgba(225, 29, 72, 0.18);
}

.priority-chip.is-selected {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor, 0 12px 28px rgba(17, 24, 39, 0.08);
}

.task-extra-panel {
    margin-top: 1.4rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.task-extra-panel summary {
    min-height: 3.35rem;
    padding: 0.85rem 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.task-extra-panel summary::-webkit-details-marker {
    display: none;
}

.task-extra-panel summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.task-extra-panel summary strong {
    font-size: 0.98rem;
    font-weight: 850;
}

.task-extra-panel .chevron {
    color: #65728a;
    transition: transform 0.18s ease;
}

.task-extra-panel:not([open]) .chevron {
    transform: rotate(180deg);
}

.section-icon.small {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
}

.task-options-grid {
    padding: 0 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(12rem, 1fr));
    gap: 0.7rem;
}

.mini-toggle-card {
    min-height: 4.35rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(109, 61, 242, 0.11);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.88);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
}

.mini-toggle-card strong,
.mini-toggle-card small {
    display: block;
}

.mini-toggle-card strong {
    margin-bottom: 0.25rem;
    color: #111827;
    font-size: 0.84rem;
    font-weight: 820;
}

.mini-toggle-card small {
    color: #6c768d;
    font-size: 0.76rem;
    line-height: 1.35;
}

.mini-toggle-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mini-toggle-card input:checked + .toggle {
    background: linear-gradient(135deg, var(--brand), #5b21b6);
}

.mini-toggle-card input:checked + .toggle::after {
    transform: translateX(1.42rem);
}

.task-extra-fields {
    padding: 0 1rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.task-extra-field {
    display: none;
    padding: 1rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.86);
}

.task-extra-field.is-visible {
    display: block;
}

.task-extra-field textarea.form-control {
    min-height: 6.25rem;
}

.task-actions-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    backdrop-filter: blur(20px);
}

.task-action-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.task-actions-bar .btn-light {
    min-width: 11rem;
}

.task-form-shell-v2 {
    width: min(100%, 96rem);
    padding-top: 1.35rem;
    padding-bottom: 3rem;
}

html:has(.task-form-shell-v2),
body:has(.task-form-shell-v2) {
    overflow-x: clip;
}

.task-create-header {
    min-height: 2.8rem;
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.task-create-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #8c96aa;
    font-size: 0.84rem;
    font-weight: 720;
}

.task-create-breadcrumb a {
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.task-create-breadcrumb .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.task-create-breadcrumb strong {
    color: #33405a;
}

.task-template-button {
    min-width: 8.4rem;
    min-height: 2.75rem;
    padding-inline: 1rem;
    border-color: rgba(109, 61, 242, 0.16);
    color: #172033;
    background: rgba(255, 255, 255, 0.86);
}

.task-create-heading {
    margin-bottom: 1.35rem;
}

.task-create-heading h1 {
    margin: 0 0 0.45rem;
    color: #111827;
    font-size: clamp(1.75rem, 2.25vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.task-create-heading p {
    margin: 0;
    color: #647089;
    font-size: 0.94rem;
}

.task-create-form {
    display: block;
}

.task-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.22fr) minmax(19.5rem, 1fr);
    align-items: start;
    gap: 1.35rem;
}

.task-create-main,
.task-create-sidebar {
    display: grid;
    gap: 1.05rem;
}

.task-create-card {
    border: 1px solid rgba(90, 102, 132, 0.13);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(30, 41, 69, 0.07);
}

.task-create-primary {
    padding: 1.35rem;
}

.task-create-card label {
    color: #172033;
    font-size: 0.78rem;
    font-weight: 800;
}

.task-create-card .form-row {
    gap: 0.48rem;
}

.task-create-card .form-control {
    width: 100%;
    min-height: 2.85rem;
    border: 1px solid rgba(109, 61, 242, 0.17);
    border-radius: 0.72rem;
    background: #fff;
    color: #172033;
    font-size: 0.86rem;
    box-shadow: none;
}

.task-create-card .form-control:hover {
    border-color: rgba(109, 61, 242, 0.3);
}

.task-create-card .form-control:focus {
    border-color: rgba(109, 61, 242, 0.65);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.1);
}

.task-create-card .form-control::placeholder {
    color: #96a0b5;
}

.task-title-field,
.task-description-field {
    margin-bottom: 1rem;
}

.task-description-field textarea.form-control {
    min-height: 8rem;
    resize: vertical;
}

.task-create-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.task-create-card .input-with-icon > .icon {
    left: 0.85rem;
    width: 1rem;
    height: 1rem;
}

.task-create-card .input-with-icon .form-control {
    padding-left: 2.45rem;
}

.task-readonly-project {
    display: flex;
    align-items: center;
    min-height: 2.9rem;
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.45rem;
    border: 1px solid #e1e4f2;
    border-radius: 0.75rem;
    background: #f7f7fc;
    color: #535f77;
    font-weight: 700;
}

.task-create-options {
    overflow: hidden;
}

.task-create-options summary {
    min-height: 3rem;
    padding: 0.8rem 1.2rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.task-create-options summary::-webkit-details-marker {
    display: none;
}

.task-create-options summary strong {
    color: #172033;
    font-size: 0.9rem;
    font-weight: 850;
}

.task-create-options summary .chevron {
    width: 0.95rem;
    height: 0.95rem;
    color: #69758d;
    transition: transform 0.18s ease;
}

.task-create-options:not([open]) summary .chevron {
    transform: rotate(180deg);
}

.task-options-list {
    padding: 0 1.2rem 0.45rem;
}

.task-option-row {
    min-height: 3.55rem;
    margin: 0;
    padding: 0.55rem 0.2rem;
    border-top: 1px solid #edf0f6;
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.task-option-icon {
    color: #53617d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-option-icon .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.task-option-copy strong,
.task-option-copy small {
    display: block;
}

.task-option-copy strong {
    margin-bottom: 0.16rem;
    color: #34405a;
    font-size: 0.8rem;
    font-weight: 800;
}

.task-option-copy small {
    color: #748097;
    font-size: 0.72rem;
    line-height: 1.3;
}

.task-option-row > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-option-row > input:checked + .toggle {
    background: linear-gradient(135deg, var(--brand), #5b21b6);
}

.task-option-row > input:checked + .toggle::after {
    transform: translateX(1.42rem);
}

.task-create-extra-fields {
    padding: 0 1.2rem 1rem;
}

.task-create-extra-fields .task-extra-field {
    background: #f9f8ff;
}

.clipboard-attachment-zone {
    min-height: 5.4rem;
    margin-bottom: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(109, 61, 242, 0.36);
    border-radius: 0.85rem;
    background: rgba(109, 61, 242, 0.045);
    color: #53617a;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: text;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.clipboard-attachment-zone:hover,
.clipboard-attachment-zone:focus {
    border-color: rgba(109, 61, 242, 0.7);
    outline: 0;
    background: rgba(109, 61, 242, 0.075);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.08);
}

.clipboard-attachment-zone.has-file {
    border-color: rgba(16, 185, 129, 0.48);
    background: rgba(16, 185, 129, 0.06);
}

.clipboard-attachment-zone.has-error {
    border-color: rgba(225, 29, 72, 0.48);
    background: rgba(225, 29, 72, 0.055);
}

.clipboard-attachment-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.75rem;
    background: #eee9ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.clipboard-attachment-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.clipboard-attachment-zone strong,
.clipboard-attachment-zone small {
    display: block;
}

.clipboard-attachment-zone strong {
    margin-bottom: 0.28rem;
    color: #2d3850;
    font-size: 0.82rem;
    font-weight: 850;
}

.clipboard-attachment-zone small {
    color: #748097;
    font-size: 0.73rem;
    line-height: 1.35;
}

.clipboard-attachment-zone kbd {
    padding: 0.08rem 0.32rem;
    border: 1px solid #d9dcec;
    border-bottom-width: 2px;
    border-radius: 0.3rem;
    background: #fff;
    color: #4d5870;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 800;
}

.clipboard-attachment-preview[hidden] {
    display: none;
}

.clipboard-attachment-preview {
    min-height: 4.25rem;
    margin-top: 0.75rem;
    padding: 0.6rem;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 0.8rem;
    background: #fff;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.75rem;
}

.clipboard-attachment-preview img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.55rem;
    background: #eef0f6;
    object-fit: cover;
}

.clipboard-attachment-preview img[hidden] {
    display: none;
}

.clipboard-attachment-preview strong,
.clipboard-attachment-preview small {
    display: block;
}

.clipboard-attachment-preview strong {
    overflow: hidden;
    color: #2f3a52;
    font-size: 0.8rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clipboard-attachment-preview small {
    margin-top: 0.2rem;
    color: #748097;
    font-size: 0.7rem;
}

.clipboard-attachment-preview button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f2f3f7;
    color: #6c768b;
    font-size: 1.2rem;
    cursor: pointer;
}

.clipboard-attachment-preview button:hover {
    background: #ffe9ee;
    color: #e11d48;
}

.clipboard-attachment-status {
    min-height: 1rem;
    margin: 0.4rem 0 0;
    color: #0f9f6e;
    font-size: 0.72rem;
    font-weight: 720;
}

.clipboard-attachment-zone.has-error ~ .clipboard-attachment-status {
    color: #e11d48;
}

.task-create-actions {
    min-height: 4.4rem;
    padding: 0.75rem 1rem 0.75rem 1.35rem;
    border: 1px solid rgba(90, 102, 132, 0.13);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(30, 41, 69, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.task-create-actions > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.task-cancel-link {
    color: #27324a;
    font-size: 0.84rem;
    font-weight: 800;
}

.task-secondary-submit {
    min-width: 10.8rem;
    border: 0;
    color: var(--brand);
    background: transparent;
    box-shadow: none;
}

.task-primary-submit {
    min-width: 10rem;
    min-height: 2.9rem;
    box-shadow: 0 10px 24px rgba(109, 61, 242, 0.24);
}

.task-sidebar-card {
    padding: 1.15rem;
}

.task-sidebar-card h2 {
    margin: 0 0 0.85rem;
    color: #172033;
    font-size: 0.92rem;
    font-weight: 850;
}

.priority-picker-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.priority-picker-v2 .priority-chip {
    min-height: 3.05rem;
    border-radius: 0.68rem;
    font-size: 0.82rem;
}

.priority-picker-v2 .priority-chip.is-selected {
    box-shadow: inset 0 0 0 1px currentColor, 0 8px 20px rgba(17, 24, 39, 0.07);
}

.task-time-grid {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.task-member-picker {
    position: relative;
}

.task-create-card .task-member-picker > select.form-control {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.task-member-trigger {
    width: 100%;
    min-height: 2.85rem;
    padding-left: 0.8rem;
    border: 1px solid rgba(109, 61, 242, 0.17);
    border-radius: 0.72rem;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.task-member-trigger:focus-within {
    border-color: rgba(109, 61, 242, 0.65);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.1);
}

.task-member-search {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    flex: 1;
    font: inherit;
    font-size: 0.84rem;
}

.task-member-search::placeholder {
    color: #78849a;
}

.task-member-search::-webkit-search-cancel-button {
    cursor: pointer;
}

.task-member-trigger button {
    width: 2.7rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #66738d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-member-trigger button .icon {
    width: 0.95rem;
    height: 0.95rem;
    transition: transform 0.18s ease;
}

.task-member-picker.is-open .task-member-trigger button .icon {
    transform: rotate(180deg);
}

.task-member-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 14rem;
    padding: 0.4rem;
    border: 1px solid #e1e5ef;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 18px 44px rgba(25, 33, 54, 0.16);
    overflow-y: auto;
    display: none;
}

.task-member-picker.is-open .task-member-menu {
    display: grid;
}

.task-member-option {
    margin: 0;
    padding: 0.48rem 0.55rem;
    border-radius: 0.55rem;
    display: grid;
    grid-template-columns: auto 1.55rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    color: #35415a;
    cursor: pointer;
}

.task-member-option:hover {
    background: #f6f3ff;
}

.task-member-option[hidden] {
    display: none;
}

.task-member-option input {
    accent-color: var(--brand);
}

.task-member-empty {
    margin: 0;
    padding: 0.8rem;
    color: #78849a;
    font-size: 0.78rem;
    text-align: center;
}

.task-member-avatar {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: var(--member-color, var(--brand));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 850;
}

.task-member-chips,
.task-tag-chips {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.task-member-chip,
.task-tag-chip {
    min-height: 1.85rem;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #35415a;
    background: #f6f4fc;
    font-size: 0.72rem;
    font-weight: 720;
}

.task-member-chip button,
.task-tag-chip button {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7a8498;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.task-tags-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.85rem;
    gap: 0.5rem;
}

.task-tags-editor button {
    border: 1px solid rgba(109, 61, 242, 0.17);
    border-radius: 0.72rem;
    background: #fff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-tags-editor button:hover {
    background: #f6f3ff;
}

.task-tags-editor button .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.task-tag-chip.tag-0 {
    color: #6d3df2;
    background: #f1edff;
}

.task-tag-chip.tag-1 {
    color: #d97706;
    background: #fff5df;
}

.task-tag-chip.tag-2 {
    color: #2563eb;
    background: #eaf2ff;
}

.task-order-card .input-with-icon {
    max-width: 11rem;
}

.task-create-card .field-help {
    margin: 0.42rem 0 0;
    color: #77839a;
    font-size: 0.7rem;
    line-height: 1.35;
}

.task-create-card .errorlist {
    margin: 0.35rem 0 0;
}

@media (max-width: 1120px) {
    .task-create-layout {
        grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.9fr);
    }

    .task-time-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 880px) {
    .task-create-layout {
        grid-template-columns: 1fr;
    }

    .task-create-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-create-sidebar .task-sidebar-card:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .task-form-shell-v2 {
        padding-top: 0.9rem;
    }

    .task-create-header {
        align-items: flex-start;
    }

    .task-template-button {
        min-width: auto;
    }

    .task-create-fields-grid,
    .task-create-sidebar,
    .task-time-grid,
    .task-create-extra-fields {
        grid-template-columns: 1fr;
    }

    .task-create-sidebar .task-sidebar-card:first-child {
        grid-column: auto;
    }

    .task-create-primary,
    .task-sidebar-card {
        padding: 1rem;
    }

    .task-create-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .task-create-actions > div {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .task-create-actions .btn,
    .task-cancel-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.task-detail-shell {
    width: min(100%, 92rem);
    padding-top: 1.35rem;
}

.task-detail-crumbs {
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #8a93a8;
    font-size: 0.84rem;
    font-weight: 760;
}

.task-detail-crumbs a {
    color: var(--brand);
}

.task-detail-header {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.task-title-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.task-title-row h1 {
    margin: 0;
    font-size: clamp(1.8rem, 2.4vw, 2.25rem);
    line-height: 1.05;
}

.task-detail-header p {
    margin: 0.65rem 0 0;
    color: #5f6b84;
    font-weight: 640;
}

.task-star {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a0b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-star:hover {
    color: var(--brand);
    background: #f1edff;
}

.task-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.task-detail-actions .btn,
.task-detail-actions .icon-button {
    min-height: 2.65rem;
    border-radius: 0.72rem;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
}

.task-delete-form {
    margin: 0;
}

.task-delete-form .btn {
    width: 100%;
}

.task-locked-banner {
    margin: -0.3rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(18, 165, 103, 0.22);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(18, 165, 103, 0.1), rgba(255, 255, 255, 0.96));
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.task-locked-banner > span {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.85rem;
    background: #eafaf3;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.task-locked-banner strong {
    display: block;
    color: #064e3b;
    font-weight: 850;
}

.task-locked-banner p {
    margin: 0.18rem 0 0;
    color: #47645c;
    font-size: 0.9rem;
    line-height: 1.45;
}

.task-meta-grid {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.task-meta-card {
    min-height: 5.25rem;
    padding: 0.9rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.meta-icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    background: #f7f4ff;
    color: #6d3df2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.small-avatar {
    width: 2.45rem;
    height: 2.45rem;
}

.tiny-avatar {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.7rem;
}

.task-meta-card small,
.task-meta-card strong {
    display: block;
}

.task-meta-card small {
    margin-bottom: 0.35rem;
    color: #68728a;
    font-size: 0.78rem;
    font-weight: 780;
}

.task-meta-card strong {
    color: #111827;
    font-size: 0.94rem;
}

.task-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(19rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.task-detail-main,
.task-detail-side {
    display: grid;
    gap: 1rem;
}

.task-detail-side {
    position: sticky;
    top: 7.1rem;
}

.detail-panel {
    padding: 1.3rem;
    border: 1px solid rgba(109, 61, 242, 0.11);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 30px rgba(33, 24, 80, 0.045);
}

.detail-panel h2 {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    font-weight: 850;
}

.detail-panel p {
    color: #222b3d;
    line-height: 1.65;
}

.locked-chat-note {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(109, 61, 242, 0.22);
    border-radius: 0.9rem;
    background: #fbfaff;
    color: #68728a;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 750;
}

.confirm-modal[hidden] {
    display: none;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.48);
    backdrop-filter: blur(4px);
}

.confirm-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 27rem);
    padding: 1.45rem;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 1.2rem;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(17, 24, 39, 0.28);
}

.confirm-modal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: #eafaf3;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-card h2 {
    margin: 1rem 0 0.45rem;
    font-size: 1.25rem;
    font-weight: 860;
}

.confirm-modal-card p {
    margin: 0;
    color: #68728a;
    line-height: 1.55;
}

.confirm-modal-actions {
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.tag-row {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tag-row strong {
    margin-right: 0.2rem;
    font-size: 0.86rem;
}

.tag-chip {
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    background: #eee7ff;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 820;
}

.panel-title-row {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.panel-title-row h2 {
    margin: 0;
}

.panel-title-row > span {
    color: #8a93a8;
    font-size: 0.78rem;
    font-weight: 800;
}

.task-subtask-add {
    min-height: 2.5rem;
    margin-left: auto;
    padding: 0.55rem 0.85rem;
    color: var(--brand);
}

.task-subtask-add .icon {
    width: 1rem;
    height: 1rem;
}

.mini-progress {
    width: 8rem;
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf5;
}

.mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), #4f46e5);
}

.subtask-list {
    overflow: hidden;
    border: 1px solid rgba(109, 61, 242, 0.09);
    border-radius: 0.85rem;
}

.task-section-empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.1rem;
    padding: 0.65rem 0.8rem;
}

.task-section-empty > span {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border: 1.5px dashed #b9c2d4;
    border-radius: 999px;
}

.task-section-empty p {
    margin: 0;
    color: #778299;
    font-size: 0.86rem;
}

.subtask-row {
    min-height: 3.4rem;
    padding: 0.75rem 0.9rem;
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    color: #111827;
}

.subtask-row + .subtask-row {
    border-top: 1px solid rgba(109, 61, 242, 0.08);
}

.subtask-row:hover {
    background: #faf8ff;
}

.fake-checkbox {
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid #b7bfd1;
    border-radius: 0.25rem;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fake-checkbox.is-checked {
    border-color: var(--brand);
    background: var(--brand);
}

.fake-checkbox .icon {
    width: 0.8rem;
    height: 0.8rem;
}

.add-inline-link {
    margin-top: 0.9rem;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 820;
}

.compact-upload-form {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.compact-upload-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.task-file-picker {
    max-width: 14rem;
    overflow: hidden;
    color: #526079;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.task-file-picker.has-file {
    border-color: rgba(109, 61, 242, 0.35);
    color: var(--brand);
    background: #f5f1ff;
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.attachment-card {
    position: relative;
    min-height: 5.8rem;
    padding: 0.85rem;
    border: 1px solid rgba(109, 61, 242, 0.11);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.86);
    color: #111827;
}

.attachment-preview-link {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: 0.8rem;
    padding-right: 2rem;
    color: #111827;
    cursor: zoom-in;
}

.attachment-card:hover {
    border-color: rgba(109, 61, 242, 0.35);
    box-shadow: var(--shadow-sm);
}

.comment-attachment {
    cursor: zoom-in;
}

.attachment-delete-button {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(225, 29, 72, 0.16);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.92);
    color: #e11d48;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
}

.attachment-delete-button:hover {
    border-color: rgba(225, 29, 72, 0.35);
    background: #fff1f2;
    transform: translateY(-1px);
}

.attachment-delete-button .icon {
    width: 1rem;
    height: 1rem;
}

.table-delete-form {
    margin: 0;
}

.table-delete-button {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 0.75rem;
    background: #fff5f5;
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.table-delete-button:hover {
    border-color: rgba(239, 68, 68, 0.34);
    background: #fee2e2;
}

.table-delete-button .icon {
    width: 1rem;
    height: 1rem;
}

.row-action-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.75rem;
    background: #eaf2ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.file-icon.pdf {
    background: #ffe8ee;
    color: #e11d48;
}

.attachment-card strong,
.attachment-card small,
.attachment-card em {
    display: block;
}

.attachment-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}

.attachment-card small,
.attachment-card em {
    margin-top: 0.24rem;
    color: #73809a;
    font-size: 0.76rem;
    font-style: normal;
}

.attachment-preview-modal[hidden] {
    display: none;
}

.attachment-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.attachment-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.56);
    backdrop-filter: blur(5px);
}

.attachment-preview-card {
    position: relative;
    z-index: 1;
    width: min(100%, 72rem);
    height: min(88vh, 48rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 32px 100px rgba(17, 24, 39, 0.36);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.attachment-preview-head {
    min-height: 4.4rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.12);
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.attachment-preview-head strong,
.attachment-preview-head span {
    display: block;
}

.attachment-preview-head strong {
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-weight: 860;
}

.attachment-preview-head span {
    margin-top: 0.15rem;
    color: #73809a;
    font-size: 0.78rem;
    font-weight: 760;
}

.attachment-preview-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.attachment-preview-actions .btn {
    min-height: 2.45rem;
    padding: 0 0.85rem;
    font-size: 0.82rem;
}

.attachment-preview-body {
    min-height: 0;
    background: #111827;
    display: grid;
    place-items: center;
}

.attachment-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.attachment-preview-loading {
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    color: #eef2ff;
    font-size: 0.88rem;
    font-weight: 760;
}

.attachment-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.attachment-preview-fallback {
    width: min(100%, 28rem);
    padding: 2rem;
    border-radius: 1rem;
    background: #ffffff;
    color: #4b5563;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    text-align: center;
}

.attachment-preview-fallback .icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--brand);
}

.attachment-preview-fallback strong {
    color: var(--ink);
    font-weight: 850;
}

.codex-prompt-modal[hidden] {
    display: none;
}

.codex-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.codex-prompt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.52);
    backdrop-filter: blur(5px);
}

.codex-prompt-card {
    position: relative;
    z-index: 1;
    width: min(100%, 58rem);
    height: min(82vh, 42rem);
    overflow: hidden;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 1.1rem;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(17, 24, 39, 0.3);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.codex-prompt-head,
.codex-prompt-actions {
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.codex-prompt-head {
    border-bottom: 1px solid rgba(109, 61, 242, 0.12);
}

.codex-prompt-head strong,
.codex-prompt-head span {
    display: block;
}

.codex-prompt-head strong {
    color: var(--ink);
    font-weight: 860;
}

.codex-prompt-head span,
.codex-prompt-actions span {
    color: #73809a;
    font-size: 0.8rem;
    font-weight: 760;
}

.codex-prompt-body {
    position: relative;
    min-height: 0;
    background: #0f172a;
}

.codex-prompt-textarea {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 1rem;
    border: 0;
    outline: 0;
    resize: none;
    background: #0f172a;
    color: #eef2ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.88rem;
    line-height: 1.6;
}

.codex-prompt-loading[hidden] {
    display: none;
}

.codex-prompt-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.7rem;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 42%, rgba(109, 61, 242, 0.22), transparent 11rem),
        rgba(15, 23, 42, 0.88);
    color: #eef2ff;
    text-align: center;
}

.codex-prompt-loading strong,
.codex-prompt-loading small {
    display: block;
}

.codex-prompt-loading strong {
    font-size: 0.95rem;
    font-weight: 860;
}

.codex-prompt-loading small {
    max-width: 21rem;
    color: #c7d2fe;
    font-size: 0.78rem;
    font-weight: 720;
}

.codex-prompt-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(238, 242, 255, 0.2);
    border-top-color: #a78bfa;
    border-right-color: #22d3ee;
    border-radius: 999px;
    animation: codexPromptSpin 0.8s linear infinite;
    box-shadow: 0 0 36px rgba(109, 61, 242, 0.38);
}

.codex-prompt-modal.is-loading .codex-prompt-textarea {
    color: rgba(238, 242, 255, 0.56);
}

.codex-prompt-buttons .btn:disabled {
    cursor: wait;
    opacity: 0.62;
}

@keyframes codexPromptSpin {
    to {
        transform: rotate(360deg);
    }
}

.codex-prompt-actions {
    border-top: 1px solid rgba(109, 61, 242, 0.12);
    background: #ffffff;
}

.codex-prompt-buttons {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.codex-prompt-buttons .btn {
    min-height: 2.45rem;
    padding: 0 0.85rem;
    font-size: 0.82rem;
}

.codex-prompt-history {
    max-height: 8.4rem;
    overflow: auto;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid rgba(109, 61, 242, 0.08);
    background: #fbfaff;
}

.codex-prompt-history > strong {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 850;
}

.codex-prompt-history > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.codex-prompt-history button {
    min-height: 2.65rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.7rem;
    background: #ffffff;
    color: #364153;
    cursor: pointer;
    text-align: left;
}

.codex-prompt-history button.is-active,
.codex-prompt-history button:hover {
    border-color: rgba(109, 61, 242, 0.38);
    color: var(--brand);
}

.codex-prompt-history span,
.codex-prompt-history small {
    display: block;
}

.codex-prompt-history span {
    font-size: 0.78rem;
    font-weight: 850;
}

.codex-prompt-history small {
    margin-top: 0.1rem;
    color: #73809a;
    font-size: 0.72rem;
    font-weight: 720;
}

.comment-list {
    display: grid;
    gap: 0.85rem;
}

.comments-panel {
    display: grid;
    grid-template-rows: auto minmax(13rem, 28rem) auto;
}

.comment-scroll {
    min-height: 13rem;
    max-height: 28rem;
    overflow-y: auto;
    padding-right: 0.35rem;
    scroll-behavior: smooth;
}

.comment-empty-state {
    min-height: 13rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.45rem;
    color: #758096;
    text-align: center;
}

.comment-empty-state > span {
    width: 4.2rem;
    height: 4.2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--brand);
    background: linear-gradient(145deg, #f5f1ff, #ebe5ff);
}

.comment-empty-state > span .icon {
    width: 2rem;
    height: 2rem;
}

.comment-empty-state strong {
    color: #263047;
    font-size: 0.9rem;
}

.comment-empty-state small {
    color: #8a94a8;
    font-size: 0.78rem;
}

.comment-scroll::-webkit-scrollbar {
    width: 0.55rem;
}

.comment-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef1f8;
}

.comment-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(109, 61, 242, 0.35);
}

.comment-item {
    position: relative;
    padding: 0.95rem;
    border-radius: 0.9rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--comment-color, var(--brand)) 8%, #ffffff), #fafbff 30%),
        #fafbff;
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    gap: 0.8rem;
}

.comment-item::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    bottom: 0.95rem;
    left: 0;
    width: 0.25rem;
    border-radius: 999px;
    background: var(--comment-color, var(--brand));
}

.comment-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-delete-button {
    width: 1.9rem;
    height: 1.9rem;
    margin-left: auto;
    border: 1px solid #f3c7ce;
    border-radius: 0.55rem;
    background: #fff7f8;
    color: #dc3545;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.comment-delete-button:hover {
    border-color: #ef9ca8;
    background: #ffecef;
    transform: translateY(-1px);
}

.comment-delete-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.comment-delete-button .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.comment-item p {
    margin: 0.45rem 0;
    color: #172033;
}

.comment-item small,
.comment-attachment {
    color: #7a8499;
    font-size: 0.78rem;
}

.comment-compose {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(109, 61, 242, 0.1);
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
}

.comment-compose textarea {
    min-height: 3.2rem;
    max-height: 8rem;
    resize: vertical;
}

.comment-tools {
    display: grid;
    gap: 0.35rem;
    color: #68728a;
    font-size: 0.76rem;
}

.comment-tools input[type="file"] {
    max-width: 12rem;
}

.comment-internal {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
}

.side-panel {
    padding: 1.1rem;
}

.info-list {
    display: grid;
    gap: 1rem;
}

.info-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.info-list span {
    color: #68728a;
    font-size: 0.82rem;
    font-weight: 760;
}

.info-list strong {
    color: #111827;
    font-size: 0.84rem;
    text-align: right;
}

.status-update-form {
    display: grid;
    gap: 0.8rem;
}

.status-action-list {
    display: grid;
    gap: 0.85rem;
}

.status-action-list .status-update-form {
    padding: 0;
}

.status-action-list .btn {
    width: 100%;
}

.status-action-list small {
    color: #68728a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
}

.status-update-form .form-control {
    min-height: 2.9rem;
}

.task-share-modal-card {
    width: min(100%, 34rem);
}

.task-share-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.task-share-modal-head h2 {
    margin: 0 0 0.35rem;
}

.task-share-modal-head p {
    font-size: 0.86rem;
}

.task-share-modal-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border-radius: 0.9rem;
    background: rgba(109, 61, 242, 0.1);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-share-form {
    display: grid;
    gap: 0.75rem;
}

.task-share-form label {
    color: #111827;
    font-size: 0.78rem;
    font-weight: 820;
}

.task-share-form .form-control {
    width: 100%;
    min-height: 2.9rem;
    border-color: rgba(109, 61, 242, 0.16);
    border-radius: 0.85rem;
    background: #ffffff;
    color: #172033;
    font-size: 0.86rem;
}

.task-share-form select.form-control {
    min-height: 7.4rem;
    padding: 0.65rem;
}

.task-share-form textarea.form-control {
    min-height: 5.5rem;
    resize: vertical;
}

.task-share-form .btn {
    margin-top: 0.15rem;
}

.task-share-help {
    margin-top: -0.45rem;
    color: #7b8498;
    font-size: 0.75rem;
    font-weight: 650;
}

.task-share-form .errorlist {
    margin: -0.35rem 0 0;
    padding-left: 1rem;
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 760;
}

.history-list {
    position: relative;
    display: grid;
    gap: 1rem;
}

.history-item {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.75rem;
}

.history-item > span {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgba(109, 61, 242, 0.2);
    border-radius: 999px;
    background: #ffffff;
}

.history-item > span::after {
    content: "";
    position: absolute;
    inset: 0.38rem;
    border-radius: 999px;
    background: var(--brand);
}

.history-item strong,
.history-item small,
.history-item em {
    display: block;
}

.history-item strong {
    margin-bottom: 0.25rem;
    font-size: 0.84rem;
}

.history-item small,
.history-item em {
    color: #78839a;
    font-size: 0.76rem;
    font-style: normal;
    line-height: 1.45;
}

.sidebar-spaces {
    gap: 0.15rem;
}

.sidebar-spaces-empty {
    display: block;
    padding: 0.35rem 0.75rem 0.55rem;
    color: #929bad;
    font-size: 0.75rem;
    line-height: 1.4;
}

.space-link {
    min-height: 2.3rem;
    padding: 0 0.75rem;
    border-radius: 0.72rem;
    color: #56617a;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.9rem;
    font-weight: 720;
}

.space-link:hover {
    background: #f7f4ff;
    color: var(--brand);
}

.space-link.is-active {
    background: linear-gradient(135deg, rgba(109, 61, 242, 0.13), rgba(255, 255, 255, 0.94));
    color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand), 0 10px 22px rgba(109, 61, 242, 0.08);
}

.space-link.is-active .space-initial {
    transform: scale(1.04);
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16);
}

.space-initial {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.38rem;
    background: var(--space-color, #ef3b77);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.space-initial .icon {
    width: 0.85rem;
    height: 0.85rem;
}

.space-initial.color-2,
.space-card-logo.color-2 {
    background: #22c55e;
}

.space-initial.color-3,
.space-card-logo.color-3 {
    background: #3b82f6;
}

.space-initial.color-4,
.space-card-logo.color-4 {
    background: #f97316;
}

.space-initial.color-5,
.space-card-logo.color-5 {
    background: #7c3aed;
}

.muted-space {
    color: #68728a;
}

.work-page-head {
    position: relative;
    margin-bottom: 1.3rem;
}

.work-page-head h1 {
    margin-bottom: 0.65rem;
    font-size: 1.85rem;
    line-height: 1.05;
}

.work-page-head p {
    margin: 0;
    color: #667085;
    font-size: 1rem;
}

.work-page-head .btn {
    position: absolute;
    top: 0;
    right: 0;
}

.task-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.75rem;
}

.spaces-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-summary-card {
    position: relative;
    min-height: 10rem;
    padding: 1.3rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.task-summary-card.is-selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand);
}

.summary-icon {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.summary-icon.purple {
    color: var(--brand);
    background: #f0eaff;
}

.summary-icon.blue {
    color: #2563eb;
    background: #eaf2ff;
}

.summary-icon.amber {
    color: #d97706;
    background: #fff4dd;
}

.summary-icon.red {
    color: #e11d48;
    background: #ffe8ee;
}

.summary-icon.green {
    color: #16a34a;
    background: #e9f9ef;
}

.task-summary-card strong,
.task-summary-card b,
.task-summary-card small {
    display: block;
}

.task-summary-card strong {
    margin-bottom: 0.7rem;
    color: #1f2937;
    font-size: 0.95rem;
}

.task-summary-card b {
    margin-bottom: 0.7rem;
    color: #111827;
    font-size: 1.85rem;
    line-height: 1;
}

.task-summary-card small {
    color: #667085;
    font-size: 0.84rem;
    font-weight: 650;
}

.my-tasks-page .work-page-head {
    margin-bottom: 2rem;
}

.my-tasks-page .work-page-head h1 {
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 520;
    letter-spacing: -0.035em;
}

.my-tasks-page .task-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    margin-bottom: 2.25rem;
}

.my-tasks-page .task-summary-card {
    min-height: 10.75rem;
    padding: 1.55rem 1.45rem;
    border-color: rgba(109, 61, 242, 0.1);
    border-radius: 1.1rem;
    align-items: flex-start;
    gap: 1.15rem;
    box-shadow: 0 10px 30px rgba(43, 35, 78, 0.045);
}

.my-tasks-page .task-summary-card > span:last-child {
    min-width: 0;
    flex: 1;
}

.my-tasks-page .summary-icon {
    flex: 0 0 auto;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 0.8rem;
}

.my-tasks-page .summary-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.my-tasks-page .task-summary-card strong {
    min-height: 2.35rem;
    margin: 0;
    display: flex;
    align-items: center;
    color: #536078;
    font-size: 0.98rem;
    line-height: 1.25;
}

.my-tasks-page .task-summary-card b {
    margin: 0.2rem 0 1rem;
    font-size: 2.15rem;
    line-height: 1;
}

.my-tasks-page .task-summary-card small {
    color: #6a7590;
    font-size: 0.82rem;
}

.task-toolbar {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.spaces-filter-bar {
    display: grid;
    grid-template-columns: minmax(18rem, 1.65fr) minmax(11rem, 0.58fr) minmax(13rem, 0.9fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.spaces-search-field,
.spaces-select-field,
.spaces-filter-select {
    min-width: 0;
    min-height: 3.65rem;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.035);
}

.spaces-filter-select {
    position: relative;
}

.spaces-filter-select summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    list-style: none;
}

.spaces-filter-select summary::-webkit-details-marker {
    display: none;
}

.spaces-filter-select summary > span {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.spaces-filter-select summary small {
    color: #7d88a0;
    font-size: 0.64rem;
    font-weight: 700;
}

.spaces-filter-select summary strong {
    overflow: hidden;
    color: #263146;
    font-size: 0.78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spaces-filter-select summary > .icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    color: #536078;
    transition: transform 0.18s ease;
}

.spaces-filter-select[open] {
    z-index: 30;
    border-color: rgba(109, 61, 242, 0.48);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.08);
}

.spaces-filter-select[open] summary > .icon {
    transform: rotate(180deg);
}

.spaces-filter-options {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.2rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.42rem;
    border: 1px solid #e3def0;
    border-radius: 0.78rem;
    background: #fff;
    box-shadow: 0 16px 38px rgba(30, 24, 65, 0.16);
}

.spaces-filter-options button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 2.35rem;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 0.58rem;
    color: #344054;
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.spaces-filter-options button:hover {
    color: #6030df;
    background: #f5f1ff;
}

.spaces-filter-options button.is-selected {
    color: #6030df;
    background: #eee8ff;
    font-weight: 800;
}

.spaces-filter-options button .icon {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    opacity: 0;
}

.spaces-filter-options button.is-selected .icon {
    opacity: 1;
}

.spaces-search-field {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.9rem;
    color: #79849b;
}

.spaces-search-field .icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

.spaces-search-field input,
.spaces-select-field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #263146;
    background: transparent;
    font: inherit;
}

.spaces-search-field input {
    height: 100%;
    font-size: 0.84rem;
}

.spaces-select-field {
    display: grid;
    align-content: center;
    gap: 0.15rem;
    padding: 0.45rem 0.75rem;
}

.spaces-select-field > span {
    color: #7d88a0;
    font-size: 0.64rem;
    font-weight: 700;
}

.spaces-select-field select {
    padding: 0;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.spaces-search-field:focus-within,
.spaces-select-field:focus-within {
    border-color: rgba(109, 61, 242, 0.45);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.08);
}

@media (max-width: 900px) {
    .spaces-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .spaces-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .spaces-filter-bar {
        grid-template-columns: 1fr;
    }

    .spaces-search-field {
        grid-column: auto;
    }
}

.task-search {
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0 0.7rem;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 0.7rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #8a93a8;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04);
}

.task-filter-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.my-task-filter-shell {
    margin-bottom: 1.5rem;
}

.my-task-filter-form {
    display: grid;
    gap: 0.85rem;
}

.my-task-filter-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.my-task-filter-form .task-search {
    height: 4rem;
    padding: 0 1.15rem;
    border-radius: 0.9rem;
    font-size: 1rem;
}

.my-task-filter-form .task-search > .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.my-task-filter-toggle {
    position: relative;
    min-width: 9.5rem;
    min-height: 4rem;
    padding: 0 1.15rem;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 0.9rem;
    background: #fff;
    color: #596680;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-weight: 780;
    cursor: pointer;
}

.my-task-filter-toggle:hover,
.my-task-filter-toggle[aria-expanded="true"] {
    border-color: rgba(109, 61, 242, 0.4);
    color: var(--brand);
    background: #faf8ff;
}

.my-task-filter-toggle .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.my-task-filter-toggle i {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 0.48rem;
    height: 0.48rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 1px rgba(109, 61, 242, 0.2);
}

.my-task-editable-filters {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(9rem, 1fr)) auto;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 28px rgba(28, 23, 51, 0.05);
}

.my-task-editable-filters[hidden] {
    display: none;
}

.editable-task-filter {
    position: relative;
    min-width: 0;
    min-height: 4rem;
    padding: 0.55rem 0.8rem 0.45rem;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04);
    display: grid;
    align-content: center;
    gap: 0.18rem;
}

.editable-task-filter:focus-within {
    border-color: rgba(109, 61, 242, 0.48);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.09);
}

.editable-task-filter > span:first-child {
    color: #7a849b;
    font-size: 0.7rem;
    font-weight: 780;
}

.editable-task-filter-control {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.editable-task-filter-control input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-size: 0.9rem;
    font-weight: 760;
}

.editable-task-filter-control input::placeholder {
    color: #303a50;
    opacity: 1;
}

.editable-task-filter-control .icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: #667085;
    pointer-events: none;
}

.editable-task-filter-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    max-height: 15rem;
    padding: 0.4rem;
    overflow-y: auto;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 16px 38px rgba(28, 23, 51, 0.16);
}

.editable-task-filter-menu[hidden],
.editable-task-filter-menu button[hidden],
.editable-task-filter-menu small[hidden] {
    display: none;
}

.editable-task-filter-menu button {
    width: 100%;
    min-height: 2.55rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #303a50;
    text-align: left;
    font-size: 0.86rem;
    font-weight: 680;
    cursor: pointer;
}

.editable-task-filter-menu button:hover,
.editable-task-filter-menu button:focus-visible {
    outline: 0;
    background: #f1edff;
    color: var(--brand);
}

.editable-task-filter-menu small {
    padding: 0.75rem;
    color: #8a93a8;
    display: block;
    text-align: center;
    font-size: 0.8rem;
}

.my-task-filter-clear {
    min-height: 4rem;
    padding: 0 0.55rem;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
}

.my-task-filter-clear:hover {
    color: #5426d8;
}

.task-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: none;
    color: #111827;
    background: transparent;
}

.task-search button,
.filter-chip,
.row-menu {
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.7rem;
    background: #ffffff;
    color: #667085;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04);
}

.task-search button {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-chip {
    min-height: 3rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 720;
    white-space: nowrap;
    cursor: pointer;
}

.task-search button:focus-visible,
.filter-chip:focus-visible {
    outline: 2px solid rgba(109, 61, 242, 0.35);
    outline-offset: 2px;
}

.filter-chip span {
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: #eee7ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
}

.task-view-chip.is-active {
    border-color: rgba(109, 61, 242, 0.36);
    background: #eee7ff;
    color: var(--brand);
}

.task-view-chip.is-active span {
    background: #ffffff;
}

@media (max-width: 1380px) {
    .task-toolbar {
        grid-template-columns: minmax(16rem, 1fr);
    }
}

@media (max-width: 760px) {
    .task-toolbar {
        grid-template-columns: 1fr;
    }

    .task-filter-group {
        grid-column: auto;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.2rem;
    }
}

.my-task-table-wrap {
    overflow: hidden;
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 1.05rem;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.05);
}

[data-my-tasks-table-shell] {
    transition: opacity 0.18s ease;
}

[data-my-tasks-table-shell].is-loading {
    opacity: 0.58;
    pointer-events: none;
}

.my-task-table-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
}

.my-task-table-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
}

.my-task-table-head p {
    margin: 0.2rem 0 0;
    color: #667085;
    font-size: 0.84rem;
    font-weight: 650;
}

.my-task-table-head > span {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.my-task-table {
    width: 100%;
    border-collapse: collapse;
}

.my-task-table th,
.my-task-table td {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.08);
    text-align: left;
    vertical-align: middle;
}

.my-tasks-page .my-task-table-head {
    padding: 1.4rem 1.45rem;
}

.my-tasks-page .my-task-table-head h2 {
    font-size: 1.08rem;
}

.my-tasks-page .my-task-table th,
.my-tasks-page .my-task-table td {
    padding: 0.95rem 1rem;
}

.my-tasks-page .my-task-table th:first-child,
.my-tasks-page .my-task-table td:first-child {
    width: 2.25rem;
    padding-right: 0.3rem;
}

.task-row-grip {
    width: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, 0.2rem);
    gap: 0.16rem;
    opacity: 0.72;
}

.task-row-grip i {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 999px;
    background: #61708c;
}

.my-task-table th {
    color: #606b85;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #fbfbff;
}

.my-task-table tbody tr:hover {
    background: #fbfaff;
}

.my-task-table strong {
    display: block;
    color: #111827;
}

.my-task-table small {
    margin-top: 0.35rem;
    color: #667085;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8rem;
}

.project-cell,
.update-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.project-cell strong,
.project-cell small,
.update-cell strong,
.update-cell small {
    display: block;
}

.danger-text {
    color: #e11d48 !important;
    font-weight: 800;
}

.row-menu {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-weight: 900;
}

.table-footer {
    padding: 0.9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #667085;
    font-size: 0.86rem;
}

.pagination-pills {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-pills a,
.pagination-pills b {
    min-width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.pagination-pills a {
    color: #667085;
    text-decoration: none;
}

.pagination-pills a:hover {
    color: var(--brand);
    border-color: rgba(109, 61, 242, 0.28);
}

.pagination-pills b {
    color: var(--brand);
    background: #eee7ff;
}

.spaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.space-card {
    padding: 1.2rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.space-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
}

.space-card-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.space-card-logo {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.85rem;
    background: var(--space-color, #ef3b77);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    text-transform: uppercase;
}

.space-card-logo .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.project-detail-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.project-detail-shell {
    display: grid;
    gap: 1.05rem;
}

.project-detail-crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #8a93a8;
    font-size: 0.86rem;
    font-weight: 780;
}

.project-detail-crumbs a {
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.project-detail-crumbs > span .icon {
    width: 0.9rem;
    height: 0.9rem;
}

.project-detail-crumbs strong {
    color: #98a2b3;
}

.project-hero-detail {
    position: relative;
    min-height: 10.2rem;
    padding: 1.45rem;
    border: 1px solid rgba(109, 61, 242, 0.08);
    border-radius: 1.35rem;
    background:
        linear-gradient(128deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 45%, rgba(245, 240, 255, 0.9) 100%);
    box-shadow: 0 18px 60px rgba(49, 33, 122, 0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.project-hero-detail::after {
    content: "";
    position: absolute;
    inset: auto -6rem -9rem 42%;
    height: 15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--space-color, var(--brand)) 10%, transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}

.project-hero-main,
.project-hero-actions {
    position: relative;
    z-index: 1;
}

.project-hero-main {
    display: flex;
    align-items: center;
    gap: 1.05rem;
    min-width: 0;
}

.project-hero-logo {
    width: 4.4rem;
    height: 4.4rem;
    flex: 0 0 auto;
    border-radius: 1rem;
    background: var(--space-color, var(--brand));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--space-color, var(--brand)) 32%, transparent);
}

.project-hero-logo .icon {
    width: 1.9rem;
    height: 1.9rem;
}

.project-hero-copy {
    min-width: 0;
}

.project-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.project-title-row h1 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    line-height: 1.05;
}

.project-hero-copy p {
    margin-bottom: 0.75rem;
    color: #667085;
    font-size: 0.96rem;
    font-weight: 560;
}

.project-favorite {
    color: #74819a;
    display: inline-flex;
    align-items: center;
}

.project-status-pill {
    gap: 0.4rem;
}

.project-config-summary .status-dot,
.project-status-pill .status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.project-hero-art {
    position: relative;
    z-index: 1;
    width: min(24vw, 18rem);
    height: 7.5rem;
    flex: 0 0 auto;
}

.art-folder {
    position: absolute;
    border-radius: 0.95rem;
    background: linear-gradient(145deg, #b99cff, #7048e8);
    box-shadow: 0 18px 42px rgba(109, 61, 242, 0.23);
}

.art-folder::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: -0.45rem;
    width: 3.8rem;
    height: 1rem;
    border-radius: 0.55rem 0.55rem 0 0;
    background: inherit;
}

.art-folder.back {
    right: 4.3rem;
    top: 0.7rem;
    width: 5.7rem;
    height: 4.6rem;
    opacity: 0.45;
}

.art-folder.front {
    right: 2.3rem;
    top: 2rem;
    width: 6.5rem;
    height: 5rem;
    display: grid;
    place-content: center;
    gap: 0.55rem;
}

.art-folder.front span {
    width: 2.8rem;
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
}

.art-folder.front span:last-child {
    width: 4rem;
}

.art-bubble {
    position: absolute;
    right: 1.2rem;
    bottom: 0.75rem;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(109, 61, 242, 0.14);
    box-shadow: 0 12px 28px rgba(109, 61, 242, 0.12);
}

.spark {
    position: absolute;
    width: 0.42rem;
    height: 0.42rem;
    color: #b99cff;
}

.spark::before,
.spark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 999px;
    background: currentColor;
}

.spark::before {
    width: 0.12rem;
    height: 0.9rem;
}

.spark::after {
    width: 0.9rem;
    height: 0.12rem;
}

.spark-one {
    right: 9.5rem;
    top: 1.1rem;
}

.spark-two {
    right: 16rem;
    top: 3.4rem;
}

.project-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.icon-btn {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
}

.project-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.project-insight-card {
    min-height: 6.35rem;
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.project-insight-card strong,
.project-insight-card b {
    display: block;
}

.project-insight-card strong {
    margin-bottom: 0.4rem;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 820;
}

.project-insight-card b {
    color: #111827;
    font-size: 0.95rem;
    line-height: 1.35;
}

.project-config-summary,
.project-board-lists {
    margin: 1rem 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.project-board-lists span {
    min-height: 2.2rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(109, 61, 242, 0.14);
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 760;
}

.qa-board-shell {
    display: grid;
    gap: 1.25rem;
}

.qa-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}

.qa-kpi-card {
    min-height: 8rem;
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(17, 24, 39, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.4rem;
}

.qa-kpi-card span {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 850;
}

.qa-kpi-card strong {
    color: #111827;
    font-size: 2rem;
    line-height: 1;
}

.qa-kpi-card small {
    color: #8a93a8;
    font-size: 0.76rem;
    font-weight: 760;
}

.qa-kpi-purple {
    background: linear-gradient(180deg, #ffffff, #f4efff);
}

.qa-kpi-amber {
    background: linear-gradient(180deg, #ffffff, #fff7dd);
}

.qa-kpi-red {
    background: linear-gradient(180deg, #ffffff, #fff0f0);
}

.qa-kpi-green {
    background: linear-gradient(180deg, #ffffff, #edfff4);
}

.qa-kpi-blue {
    background: linear-gradient(180deg, #ffffff, #eef6ff);
}

.qa-filter-toolbar {
    min-height: 4.55rem;
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.qa-filter-groups {
    min-width: 0;
    display: grid;
    gap: 0.75rem;
}

.qa-filter-tabs,
.qa-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
}

.qa-filter-tabs a,
.qa-filter-chips a {
    min-height: 2.35rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: #526079;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 820;
    white-space: nowrap;
}

.qa-filter-tabs a {
    border-radius: 0.7rem;
}

.qa-filter-tabs a.is-active,
.qa-filter-chips a.is-active {
    border-color: rgba(109, 61, 242, 0.34);
    background: #eee7ff;
    color: var(--brand);
}

.qa-filter-tabs a span,
.qa-filter-chips a span {
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #f3f0ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 860;
}

.qa-filter-search {
    width: min(19rem, 26vw);
    height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #8a93a8;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.qa-filter-search input[type="search"] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font: inherit;
}

.qa-task-panel {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    background: #ffffff;
    overflow: hidden;
}

.qa-task-panel-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.qa-task-panel-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.qa-task-panel-head p {
    margin: 0.2rem 0 0;
    color: #667085;
    font-size: 0.86rem;
    font-weight: 700;
}

.qa-filter-clear {
    min-height: 2.35rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(109, 61, 242, 0.18);
    border-radius: 999px;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 850;
    white-space: nowrap;
}

[data-qa-task-shell] {
    transition: opacity 0.18s ease;
}

[data-qa-task-shell].is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.project-board-toolbar {
    min-height: 4.55rem;
    padding: 1rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.project-filter-groups {
    min-width: 0;
    display: grid;
    gap: 0.75rem;
}

.project-board-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
}

.project-board-tabs a {
    position: relative;
    min-height: 2.55rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 0.7rem;
    background: #ffffff;
    color: #526079;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    white-space: nowrap;
}

.project-board-tabs a.is-active {
    border-color: rgba(109, 61, 242, 0.34);
    background: #eee7ff;
    color: var(--brand);
}

.project-board-tabs a span,
.project-type-tabs a span,
.project-priority-tabs a span {
    min-width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: #f3f0ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 860;
}

.project-type-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
}

.project-type-tabs a {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    background: #fbfbff;
    color: #667085;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.project-type-tabs a.is-active {
    border-color: rgba(109, 61, 242, 0.34);
    background: #eee7ff;
    color: var(--brand);
}

.project-priority-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
}

.project-priority-tabs a {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: #667085;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.project-priority-tabs a.is-active {
    border-color: rgba(109, 61, 242, 0.34);
    background: #eee7ff;
    color: var(--brand);
}

.project-priority-tabs a.priority-critical {
    border-color: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

.project-priority-tabs a.priority-critical.is-active {
    border-color: rgba(239, 68, 68, 0.34);
    background: #fff1f2;
}

.project-priority-tabs a.priority-critical span {
    background: #ffe4e6;
    color: #b91c1c;
}

.project-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.project-detail-search {
    width: min(20rem, 28vw);
    height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #8a93a8;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04);
}

.project-detail-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
}

.project-task-panel {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(17, 24, 39, 0.06);
    overflow: hidden;
}

[data-project-task-shell] {
    transition: opacity 0.18s ease;
}

[data-project-task-shell].is-loading {
    opacity: 0.58;
    pointer-events: none;
}

.project-task-panel-head {
    padding: 1.15rem 1.25rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.project-task-panel-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
}

.project-task-panel-head p {
    margin: 0.2rem 0 0;
    color: #667085;
    font-size: 0.84rem;
    font-weight: 650;
}

.project-bulk-review-form {
    margin: 0 1.25rem 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(109, 61, 242, 0.12);
    border-radius: 0.85rem;
    background: #fbfbff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem;
}

.project-bulk-review-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.project-bulk-review-form legend {
    margin-bottom: 0.45rem;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 850;
}

.project-bulk-list-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.project-bulk-list-option {
    cursor: pointer;
}

.project-bulk-list-option input {
    accent-color: var(--brand);
}

.project-bulk-list-option em {
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #f3f0ff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 850;
}

.project-bulk-list-option.is-disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.project-filter-clear {
    color: var(--brand);
    font-size: 0.84rem;
    font-weight: 850;
    white-space: nowrap;
}

.project-task-panel .table-wrap {
    border: 0;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.project-empty-state {
    min-height: 18.5rem;
    padding: 2.2rem 1rem;
    color: #667085;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.project-empty-state strong {
    margin-top: 0.95rem;
    color: #111827;
    font-size: 1rem;
    font-weight: 850;
}

.project-empty-state p {
    margin: 0.5rem 0 1rem;
    color: #667085;
    font-size: 0.9rem;
}

.project-empty-illustration {
    position: relative;
    width: 5.4rem;
    height: 6.1rem;
    border: 0.45rem solid #efe7ff;
    border-radius: 0.7rem;
    color: var(--brand);
}

.project-empty-illustration::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: -0.9rem;
    width: 2rem;
    height: 1rem;
    border-radius: 999px 999px 0 0;
    background: #d7c7ff;
}

.project-empty-illustration::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 1.45rem;
    width: 2.7rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #e7ddff;
    box-shadow: 0 1.25rem 0 #e7ddff, 0 2.5rem 0 #e7ddff;
}

.project-empty-illustration span {
    position: absolute;
    right: -1.2rem;
    bottom: 0.65rem;
    width: 2.7rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 0.2rem #ffffff;
}

.space-card-main strong,
.space-card-main small {
    display: block;
}

.space-card-main strong {
    margin-bottom: 0.35rem;
    color: #111827;
    font-size: 1rem;
}

.space-card-main small {
    color: #667085;
    line-height: 1.45;
}

.space-card-meta,
.space-card-footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.space-card-footer .assignee-pill {
    margin-right: auto;
}

.space-progress-row {
    margin-top: 1rem;
}

.documentation-shell {
    display: grid;
    gap: 1.15rem;
}

.documentation-hero,
.documentation-upload-card,
.documentation-pinned,
.documentation-list {
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 44px rgba(17, 24, 39, 0.06);
}

.documentation-hero {
    padding: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.documentation-hero h1 {
    margin-bottom: 0.55rem;
}

.documentation-hero p {
    max-width: 48rem;
    margin-bottom: 0;
    color: #667085;
    font-weight: 580;
}

.documentation-hero-stats {
    display: flex;
    gap: 0.85rem;
}

.documentation-hero-stats span {
    min-width: 7rem;
    padding: 0.95rem;
    border: 1px solid rgba(109, 61, 242, 0.1);
    border-radius: 0.9rem;
    background: #fbfaff;
    text-align: center;
}

.documentation-hero-stats strong,
.documentation-hero-stats small {
    display: block;
}

.documentation-hero-stats strong {
    color: var(--brand);
    font-size: 1.55rem;
    line-height: 1;
}

.documentation-hero-stats small {
    margin-top: 0.35rem;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 780;
}

.documentation-upload-card,
.documentation-pinned {
    padding: 1.15rem;
}

.documentation-form {
    display: grid;
    gap: 1rem;
}

.doc-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.doc-description-row {
    grid-column: span 3;
}

.doc-toggle-stack {
    display: grid;
    gap: 0.75rem;
}

.documentation-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.doc-filter-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.doc-filter-form select {
    min-height: 3rem;
    padding: 0 2.4rem 0 0.9rem;
    border: 1px solid rgba(109, 61, 242, 0.13);
    border-radius: 0.7rem;
    background: #ffffff;
    color: #56617a;
    font-weight: 720;
    box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04);
}

.doc-pinned-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.doc-pinned-card {
    min-height: 5.7rem;
    padding: 0.9rem;
    border: 1px solid rgba(109, 61, 242, 0.11);
    border-radius: 0.9rem;
    background: #fbfaff;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.doc-pinned-card strong,
.doc-pinned-card small {
    display: block;
}

.doc-pinned-card strong {
    margin-bottom: 0.25rem;
    color: #111827;
}

.doc-pinned-card small {
    color: #667085;
    font-size: 0.78rem;
    font-weight: 680;
}

.documentation-list {
    overflow: hidden;
}

.document-row {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(109, 61, 242, 0.08);
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.document-row:last-child {
    border-bottom: 0;
}

.doc-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 12px 26px rgba(109, 61, 242, 0.22);
}

.document-main {
    min-width: 0;
    flex: 1;
}

.document-main strong,
.document-main small,
.document-main em {
    display: block;
}

.document-main strong {
    color: #111827;
    font-size: 0.98rem;
}

.document-main small {
    margin-top: 0.22rem;
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.45;
}

.document-main em {
    margin-top: 0.35rem;
    color: #98a2b3;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 720;
}

@media (max-width: 1200px) {
    .task-detail-layout {
        grid-template-columns: 1fr;
    }

    .task-detail-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-form-grid.primary,
    .task-form-grid.secondary,
    .task-options-grid,
    .task-extra-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .description-row {
        grid-column: span 2;
    }

    .task-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .project-general-grid,
    .project-settings-grid,
    .project-responsibility-grid,
    .project-member-check-list,
    .reports-filter-bar,
    .reports-chart-grid,
    .reports-grid {
        grid-template-columns: 1fr;
    }

    .reports-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-general-grid .description-row {
        grid-row: auto;
    }

    .project-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .doc-form-grid,
    .doc-pinned-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .doc-description-row {
        grid-column: span 2;
    }

    .account-profile-card {
        position: static;
    }

    .spaces-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-task-table-wrap {
        overflow-x: auto;
    }

    .my-task-table {
        min-width: 980px;
    }
}

@media (max-width: 1080px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .login-page {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 23rem;
    }

    .sidebar {
        position: static;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .sidebar-scroll {
        overflow: visible;
    }

    .sidebar-section {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }

    .product-topbar {
        position: static;
        flex-wrap: wrap;
    }

    .global-search {
        min-width: 100%;
    }

    .stat-grid,
    .dashboard-grid,
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .task-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-actions-bar {
        position: static;
    }

    .project-hero-detail {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-hero-art {
        position: absolute;
        right: 1rem;
        top: 1rem;
        opacity: 0.45;
    }

    .project-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qa-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qa-filter-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem;
    }

    .qa-filter-tabs,
    .qa-filter-chips {
        width: 100%;
    }

    .qa-filter-search {
        width: 100%;
    }

    .project-board-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem;
    }

    .project-board-tabs,
    .project-type-tabs,
    .project-priority-tabs {
        width: 100%;
    }

    .project-toolbar-actions {
        justify-content: flex-start;
    }

    .project-detail-search {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .sidebar,
    .product-topbar,
    .app-main {
        padding: 1rem;
    }

    .qa-kpi-grid {
        grid-template-columns: 1fr;
    }

    .task-meta-grid,
    .task-detail-side,
    .attachment-grid {
        grid-template-columns: 1fr;
    }

    .compact-upload-form {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .panel-title-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .task-subtask-add {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .qa-task-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .container.login-shell {
        width: min(100% - 1rem, 76rem);
        margin: 0.5rem auto;
    }

    .login-page {
        border-radius: 1rem;
    }

    .review-status-grid {
        grid-template-columns: 1fr;
    }

    .login-brand-panel,
    .login-card {
        padding: 1.35rem;
    }

    .login-hero-copy h1 {
        font-size: 2rem;
    }

    .login-feature-grid {
        grid-template-columns: 1fr;
    }

    .login-links {
        align-items: flex-start;
        flex-direction: column;
    }

    .task-pagination {
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem;
    }

    .task-pagination-summary {
        justify-content: center;
    }

    .task-pagination-controls {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .task-page-button {
        min-width: 2.75rem;
        padding: 0 0.7rem;
    }

    .task-page-button-label {
        display: none;
    }

    .task-page-numbers {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .workspace-chat {
        right: 1rem;
        bottom: 1rem;
    }

    .workspace-chat-panel {
        width: calc(100vw - 2rem);
    }

    .workspace-chat-messages {
        height: 18rem;
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    h1 {
        font-size: 2rem;
    }

    .task-form-topline,
    .task-form-heading,
    .user-form-heading,
    .project-form-heading,
    .task-detail-header,
    .task-detail-actions,
    .form-actions-bar,
    .project-actions-bar,
    .project-actions-bar > div,
    .task-action-left {
        align-items: stretch;
        flex-direction: column;
    }

    .project-form-heading {
        display: flex;
    }

    .project-toggle-grid {
        grid-template-columns: 1fr;
    }

    .documentation-hero,
    .document-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .documentation-hero-stats,
    .documentation-toolbar,
    .doc-filter-form {
        width: 100%;
    }

    .documentation-hero-stats span,
    .doc-filter-form select,
    .document-row .btn {
        width: 100%;
    }

    .doc-form-grid,
    .doc-pinned-grid {
        grid-template-columns: 1fr;
    }

    .doc-description-row {
        grid-column: span 1;
    }

    .reports-hero {
        grid-template-columns: 1fr;
    }

    .reports-kpi-grid {
        grid-template-columns: 1fr;
    }

    .task-detail-side,
    .attachment-grid,
    .comment-compose {
        grid-template-columns: 1fr;
    }

    .subtask-row {
        grid-template-columns: 1.3rem minmax(0, 1fr);
    }

    .subtask-row .badge,
    .subtask-row .avatar {
        justify-self: start;
        grid-column: 2;
    }

    .compact-upload-form,
    .panel-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .task-form-grid.primary,
    .task-form-grid.secondary,
    .task-options-grid,
    .task-extra-fields,
    .priority-picker {
        grid-template-columns: 1fr;
    }

    .description-row {
        grid-column: auto;
    }

    .task-main-card {
        padding: 1rem;
    }

    .task-actions-bar .btn,
    .form-actions-bar .btn,
    .task-actions-bar .btn-light {
        width: 100%;
        min-width: 0;
    }

    .project-detail-crumbs {
        overflow-x: auto;
        white-space: nowrap;
    }

    .project-hero-detail {
        min-height: auto;
        padding: 1rem;
    }

    .project-hero-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-hero-logo {
        width: 3.7rem;
        height: 3.7rem;
    }

    .project-title-row {
        align-items: flex-start;
    }

    .project-hero-art {
        display: none;
    }

    .project-hero-actions,
    .project-hero-actions .btn {
        width: 100%;
    }

    .project-hero-actions .btn {
        justify-content: center;
    }

    .project-insight-grid {
        grid-template-columns: 1fr;
    }

    .project-insight-card {
        min-height: 5.5rem;
    }

    .project-toolbar-actions,
    .project-detail-search,
    .project-toolbar-actions .filter-chip,
    .project-toolbar-actions .icon-btn {
        width: 100%;
    }

    .project-toolbar-actions .filter-chip,
    .project-toolbar-actions .icon-btn {
        justify-content: center;
    }

    .calendar-hero,
    .meeting-detail-hero,
    .calendar-board-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .calendar-actions,
    .calendar-actions .btn,
    .meeting-detail-hero form,
    .meeting-detail-hero form .btn {
        width: 100%;
    }

    .calendar-actions .btn,
    .meeting-detail-hero form .btn {
        justify-content: center;
    }

    .calendar-stat-grid,
    .calendar-shell,
    .meeting-form-grid,
    .calendar-event-grid,
    .form-grid.two,
    .meeting-choice-columns,
    .meeting-detail-list p {
        grid-template-columns: 1fr;
    }

    .calendar-tabs {
        width: 100%;
    }

    .calendar-tabs button {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 980px) {
    .my-tasks-page .task-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-task-editable-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-page-v2 .calendar-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-page-v2 .calendar-shell {
        grid-template-columns: 1fr;
    }

    .meeting-form-grid-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .my-tasks-page .task-summary-grid {
        grid-template-columns: 1fr;
    }

    .my-tasks-page .task-summary-card {
        min-height: 8.8rem;
    }

    .my-task-editable-filters {
        grid-template-columns: 1fr;
    }

    .my-task-filter-top {
        grid-template-columns: 1fr;
    }

    .my-task-filter-toggle,
    .my-task-filter-clear {
        width: 100%;
    }

    .calendar-page-v2 .calendar-stat-grid {
        grid-template-columns: 1fr;
    }

    .calendar-page-v2 .calendar-board-head {
        align-items: flex-start;
    }

    .calendar-page-v2 .calendar-tabs {
        width: 100%;
    }

    .calendar-page-v2 .calendar-tabs a {
        min-width: 0;
        flex: 1;
    }

    .calendar-page-v2 .calendar-board {
        overflow-x: auto;
    }

    .calendar-page-v2 .calendar-weekdays,
    .calendar-page-v2 .calendar-month-grid {
        min-width: 52rem;
    }

    .calendar-page-v2 .calendar-board[data-calendar-view="day"] .calendar-month-grid {
        min-width: 0;
    }

    .meeting-form-heading {
        flex-direction: column;
    }

    .meeting-form-heading > .btn {
        width: 100%;
        justify-content: center;
    }
}

/* SPACE DETAIL REFERENCE LAYOUT */
.project-detail-shell {
    gap: 0.78rem;
}

.project-hero-detail {
    min-height: 0;
    padding: 1.15rem 1.35rem 0;
    border-color: #e2e6ee;
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.025);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.4rem;
    overflow: visible;
}

.project-hero-detail::after,
.project-hero-art {
    display: none;
}

.project-hero-main {
    gap: 1rem;
}

.project-hero-logo {
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 0.78rem;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--space-color, var(--brand)) 22%, transparent);
}

.project-hero-logo .icon {
    width: 1.65rem;
    height: 1.65rem;
}

.project-title-row h1 {
    margin: 0 0 0.2rem;
    font-size: 1.4rem;
    letter-spacing: -0.025em;
}

.project-hero-copy p {
    margin: 0;
    font-size: 0.83rem;
}

.project-favorite .icon {
    width: 1rem;
    height: 1rem;
}

.project-hero-actions .btn {
    min-height: 2.45rem;
    padding: 0 1rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
}

.project-hero-meta {
    grid-column: 1 / -1;
    min-height: 3.25rem;
    padding: 0.65rem 5rem 0.65rem 4.65rem;
    border-top: 1px solid #edf0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.project-hero-meta > span {
    min-width: 0;
    padding: 0 1.25rem;
    border-right: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.project-hero-meta > span:first-child {
    padding-left: 0;
}

.project-hero-meta > span:last-child {
    border-right: 0;
}

.project-hero-meta small,
.project-hero-meta b {
    white-space: nowrap;
}

.project-hero-meta small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 650;
}

.project-hero-meta b {
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.75rem;
    font-weight: 720;
}

.project-hero-meta .icon {
    width: 0.88rem;
    height: 0.88rem;
}

.project-meta-status {
    color: #079455 !important;
}

.project-meta-status i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
}

.project-status-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

.project-status-card {
    min-width: 0;
    min-height: 5.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e0e5ec;
    border-radius: 0.75rem;
    background: #fff;
    color: #475569;
    display: grid;
    align-content: space-between;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.project-status-card:hover,
.project-status-card.is-active {
    border-color: #596273;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.06);
}

.project-status-card span {
    font-size: 0.75rem;
    font-weight: 650;
}

.project-status-card strong {
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.35;
}

.project-status-card i {
    position: relative;
    height: 0.28rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.project-status-card i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: #3b82f6;
}

.project-status-card:first-child i::after {
    background: #111827;
}

.project-status-card.status-pending i::after { background: #94a3b8; }
.project-status-card.status-in_qa i::after { background: #9b87f5; }
.project-status-card.status-changes_requested i::after { background: #ef4444; }

.project-board-toolbar {
    min-height: 0;
    padding: 0.85rem 1rem;
    border-color: #e2e6ee;
    border-radius: 0.8rem;
    box-shadow: none;
    display: block;
}

.project-filter-controls {
    display: grid;
    grid-template-columns: minmax(15rem, 2.15fr) repeat(3, minmax(9rem, 1fr));
    gap: 0.8rem;
}

.project-detail-search {
    width: 100%;
    height: 2.55rem;
    border-color: #dfe4ec;
    border-radius: 0.55rem;
    box-shadow: none;
}

.project-detail-search:focus-within,
.project-filter-select[open] {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.project-filter-select {
    position: relative;
    height: 2.55rem;
    border: 1px solid #dfe4ec;
    border-radius: 0.55rem;
    background: #fff;
}

.project-filter-select summary {
    height: 100%;
    padding: 0 0.9rem;
    color: #475569;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 650;
}

.project-filter-select summary::-webkit-details-marker { display: none; }
.project-filter-select summary .icon { width: 0.9rem; height: 0.9rem; }

.project-filter-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 18rem;
    padding: 0.35rem;
    border: 1px solid #e2e6ee;
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    overflow-y: auto;
}

.project-filter-menu a {
    min-height: 2.1rem;
    padding: 0 0.55rem;
    border-radius: 0.45rem;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    font-weight: 650;
}

.project-filter-menu a:hover,
.project-filter-menu a.is-selected {
    background: #f1f5f9;
    color: #111827;
}

.project-filter-menu a span {
    color: #94a3b8;
    font-size: 0.7rem;
}

.project-active-filters {
    min-height: 2.2rem;
    padding-top: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-active-filters .filter-chip {
    min-height: 1.85rem;
    padding: 0 0.62rem;
    border: 1px solid #e1e6ed;
    border-radius: 0.42rem;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.project-active-filters .filter-chip b {
    margin-left: 0.35rem;
    color: #64748b;
    font-size: 1rem;
    line-height: 1;
}

.project-filter-clear {
    margin-left: 0.25rem;
    color: #475569;
    font-size: 0.72rem;
}

.project-bulk-review-form {
    margin: 0 0 0.78rem;
    padding: 0.72rem 1rem;
    border: 1px dashed #d8dee8;
    border-radius: 0.75rem;
    background: #fff;
    align-items: center;
    box-shadow: none;
}

.project-bulk-review-form legend {
    margin-bottom: 0.45rem;
    color: #1e293b;
    font-size: 0.8rem;
}

.project-bulk-list-option {
    min-height: 1.9rem;
    border-color: #e4e8ef;
    border-radius: 0.45rem;
    background: #f8fafc;
    font-size: 0.7rem;
}

.project-bulk-list-option input {
    position: absolute;
    opacity: 0;
}

.project-bulk-list-option:has(input:checked) {
    border-color: #94a3b8;
    background: #eef2f7;
}

.board-list-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #94a3b8;
}

.board-list-dot.status-in_progress { background: #3b82f6; }
.board-list-dot.status-in_qa { background: #9b87f5; }
.board-list-dot.status-ready { background: #10b981; }

.project-bulk-list-option em {
    min-width: auto;
    height: auto;
    margin-left: 0.35rem;
    background: transparent;
    color: #64748b;
}

.project-bulk-review-form .btn {
    min-height: 2.3rem;
    border-radius: 0.55rem;
    font-size: 0.76rem;
}

.project-task-panel {
    border-color: #e2e6ee;
    border-radius: 0.78rem;
    box-shadow: none;
}

.project-task-panel-head {
    padding: 0.9rem 1rem 0.65rem;
}

.project-task-panel-head h2 {
    font-size: 0.9rem;
}

.project-task-panel-head p {
    font-size: 0.72rem;
    font-weight: 500;
}

.project-visible-count {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.project-task-panel .workspace-table th,
.project-task-panel .workspace-table td {
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
    font-size: 0.7rem;
}

.project-task-panel .workspace-table th {
    color: #64748b;
    font-size: 0.64rem;
}

.project-task-panel .task-check {
    display: none;
}

.project-task-panel .task-title-cell > span:last-child {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.project-task-panel .task-code {
    min-width: 3.7rem;
    color: #718096;
    font-size: 0.66rem;
}

.project-task-panel .task-title {
    color: #111827;
    font-size: 0.7rem;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .project-hero-meta {
        padding-left: 0;
        padding-right: 0;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .project-status-overview {
        grid-template-columns: repeat(5, minmax(9rem, 1fr));
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .project-filter-controls {
        grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(7.5rem, 1fr));
    }
}

@media (max-width: 760px) {
    .project-hero-detail {
        padding: 1rem;
        grid-template-columns: 1fr;
    }

    .project-hero-actions {
        width: 100%;
    }

    .project-hero-actions .btn {
        flex: 1;
    }

    .project-hero-meta {
        grid-column: 1;
        padding-bottom: 0;
    }

    .project-hero-meta > span {
        min-width: max-content;
    }

    .project-filter-controls {
        grid-template-columns: 1fr;
    }

    .project-filter-select {
        width: 100%;
    }

    .project-bulk-review-form {
        align-items: stretch;
        flex-direction: column;
    }
}
/* SPACE DETAIL TYPOGRAPHY */
.project-detail-shell .project-title-row h1 { font-size: 1.5rem; }
.project-detail-shell .project-hero-copy p { font-size: 0.9rem; }
.project-detail-shell .project-hero-actions .btn { font-size: 0.86rem; }
.project-detail-shell .project-hero-meta small { font-size: 0.78rem; }
.project-detail-shell .project-hero-meta b { font-size: 0.82rem; }
.project-detail-shell .project-status-card span { font-size: 0.82rem; }
.project-detail-shell .project-status-card strong { font-size: 1.35rem; }
.project-detail-shell .project-detail-search input,
.project-detail-shell .project-filter-select summary { font-size: 0.84rem; }
.project-detail-shell .project-filter-menu a { font-size: 0.82rem; }
.project-detail-shell .project-filter-menu a span { font-size: 0.76rem; }
.project-detail-shell .project-active-filters .filter-chip { font-size: 0.76rem; }
.project-detail-shell .project-filter-clear { font-size: 0.78rem; }
.project-detail-shell .project-task-panel-head h2 { font-size: 1rem; }
.project-detail-shell .project-task-panel-head p { font-size: 0.78rem; }
.project-detail-shell .project-visible-count { font-size: 0.76rem; }
.project-detail-shell .project-task-panel .workspace-table th { font-size: 0.7rem; }
.project-detail-shell .project-task-panel .workspace-table td,
.project-detail-shell .project-task-panel .task-title { font-size: 0.76rem; }
.project-detail-shell .project-task-panel .task-code { font-size: 0.72rem; }
/* SPACE DETAIL GENERAL SCALE */
.project-detail-shell { gap: 0.95rem; }
.project-detail-shell .project-hero-detail {
    padding: 1.3rem 1.5rem 0;
    gap: 1.15rem 1.55rem;
}
.project-detail-shell .project-hero-main { gap: 1.15rem; }
.project-detail-shell .project-hero-logo { width: 4rem; height: 4rem; }
.project-detail-shell .project-hero-logo .icon { width: 1.8rem; height: 1.8rem; }
.project-detail-shell .project-hero-actions { gap: 0.85rem; }
.project-detail-shell .project-hero-actions .btn { min-height: 2.7rem; padding-inline: 1.1rem; }
.project-detail-shell .project-hero-meta { min-height: 3.6rem; padding-block: 0.78rem; }
.project-detail-shell .project-hero-meta > span { padding-inline: 1.4rem; gap: 0.82rem; }
.project-detail-shell .project-status-overview { gap: 1rem; }
.project-detail-shell .project-status-card { min-height: 5.85rem; padding: 1rem 1.1rem; }
.project-detail-shell .project-board-toolbar { padding: 1rem 1.1rem; }
.project-detail-shell .project-filter-controls { gap: 0.9rem; }
.project-detail-shell .project-detail-search,
.project-detail-shell .project-filter-select { height: 2.85rem; }
.project-detail-shell .project-active-filters { min-height: 2.45rem; padding-top: 0.85rem; }
.project-detail-shell .project-active-filters .filter-chip { min-height: 2.05rem; padding-inline: 0.72rem; }
.project-detail-shell .project-task-panel-head { padding: 1.05rem 1.15rem 0.8rem; }
.project-detail-shell .project-task-panel .workspace-table th {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
.project-detail-shell .project-task-panel .workspace-table td {
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
}

@media (max-width: 760px) {
    .project-detail-shell .project-hero-detail { padding: 1.1rem; }
}

.compact-upload-form[data-task-attachment-form] {
    max-width: 46rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.task-clipboard-zone {
    min-height: 2.55rem;
    padding: 0 0.75rem;
    border: 1px dashed rgba(109, 61, 242, 0.34);
    border-radius: 0.7rem;
    background: rgba(109, 61, 242, 0.04);
    color: #526079;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: text;
}

.task-clipboard-zone:hover,
.task-clipboard-zone:focus {
    border-color: rgba(109, 61, 242, 0.68);
    outline: 0;
    background: rgba(109, 61, 242, 0.08);
    box-shadow: 0 0 0 3px rgba(109, 61, 242, 0.08);
}

.task-clipboard-zone.has-file {
    border-color: rgba(16, 185, 129, 0.48);
    background: rgba(16, 185, 129, 0.06);
}

.task-clipboard-zone.has-error {
    border-color: rgba(225, 29, 72, 0.48);
    background: rgba(225, 29, 72, 0.055);
}

.task-clipboard-zone .icon { width: 1rem; height: 1rem; }
.task-clipboard-zone > span { font-size: 0.78rem; font-weight: 780; white-space: nowrap; }
.task-clipboard-zone small { color: #7c879b; font-size: 0.68rem; font-weight: 700; }

.task-clipboard-preview {
    width: 100%;
    flex: 1 0 100%;
    margin-top: 0.2rem;
}

.task-clipboard-status {
    width: 100%;
    min-height: 1rem;
    margin: 0;
    color: #0f9f6e;
    font-size: 0.72rem;
    font-weight: 720;
    text-align: right;
}

.task-clipboard-status.has-error { color: #e11d48; }

/* MY TASKS REFERENCE LAYOUT */
.my-tasks-heading {
    margin-bottom: 1.15rem;
}

.my-tasks-heading h1 {
    margin: 0;
}

.my-tasks-page .my-task-status-overview {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.my-task-status-card {
    min-width: 0;
    min-height: 7.25rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid #dfe4ec;
    border-radius: 1rem;
    background: #fff;
    color: #344054;
    display: grid;
    align-content: space-between;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.my-task-status-card:hover,
.my-task-status-card.is-active {
    border-color: #475467;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
}

.my-task-status-card:focus-visible {
    outline: 3px solid rgba(109, 61, 242, 0.2);
    outline-offset: 2px;
}

.my-task-status-card:hover { transform: translateY(-1px); }

.my-task-status-card span {
    font-size: 0.96rem;
    font-weight: 720;
}

.my-task-status-card strong {
    color: #081426;
    font-size: 1.75rem;
    line-height: 1.2;
}

.my-task-status-card i {
    position: relative;
    height: 0.35rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.my-task-status-card i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: #94a3b8;
}

.my-task-status-card:first-child i::after { background: #111827; }
.my-task-status-card.status-in-progress i::after { background: #3b82f6; }
.my-task-status-card.status-in-qa i::after { background: #9b87f5; }
.my-task-status-card.status-changes-requested i::after { background: #ef4444; }

.my-task-filter-reference {
    margin-bottom: 1.1rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid #e1e6ed;
    border-radius: 1rem;
    background: #fff;
    overflow: visible;
}

.my-task-filter-reference .my-task-filter-form {
    display: grid;
    grid-template-columns: minmax(18rem, 2.15fr) repeat(3, minmax(10rem, 1fr));
    align-items: center;
    gap: 0.55rem 1rem;
}

.my-task-filter-reference .my-task-filter-top,
.my-task-filter-reference .my-task-editable-filters {
    display: contents;
}

.my-task-filter-reference .my-task-filter-toggle {
    display: none !important;
}

.my-task-filter-reference .task-search {
    grid-column: 1;
    grid-row: 1;
    height: 3rem;
    padding: 0 1rem;
    border: 1px solid #dfe4ec;
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: none;
}

.my-task-filter-reference .task-search button { display: none; }

.my-task-filter-reference .editable-task-filter {
    min-height: 3rem;
    padding: 0 1rem;
    border-color: #dfe4ec;
    border-radius: 0.7rem;
    box-shadow: none;
    display: flex;
    align-items: center;
    cursor: text;
}

.my-task-filter-reference .editable-task-filter:focus-within {
    z-index: 30;
}

.my-task-filter-reference .editable-task-filter > span:first-child {
    color: #344054;
    font-size: 0.9rem;
    font-weight: 720;
}

.my-task-filter-reference .editable-task-filter-control {
    flex: 1;
}

.my-task-filter-reference .editable-task-filter-control input {
    height: 100%;
    font-size: 0.9rem;
}

.my-task-filter-reference .editable-task-filter-control input:not(:placeholder-shown) {
    margin-left: 0.4rem;
}

.my-task-filter-reference .editable-task-filter:not(:nth-child(1)) input::placeholder {
    color: transparent;
}

.my-task-filter-reference .editable-task-filter:not(:nth-child(1)) input:not(:focus) {
    width: 0;
    flex: 0 1 0;
    opacity: 0;
}

.user-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.user-card-actions form {
    margin: 0;
}

.my-task-filter-reference .editable-task-filter:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
    width: max-content;
    max-width: 22rem;
    min-height: 2.2rem;
    padding: 0 0.8rem;
    border-radius: 0.55rem;
    background: #f8fafc;
}

.my-task-filter-reference .editable-task-filter:nth-child(1) > span:first-child::after {
    content: ":";
}

.my-task-filter-reference .editable-task-filter:nth-child(1) .editable-task-filter-control input {
    min-width: 7rem;
    width: 10rem;
}

.my-task-filter-reference .editable-task-filter:nth-child(2) { grid-column: 4; grid-row: 1; }
.my-task-filter-reference .editable-task-filter:nth-child(3) { grid-column: 2; grid-row: 1; }
.my-task-filter-reference .editable-task-filter:nth-child(4) { grid-column: 3; grid-row: 1; }

.my-task-filter-reference .my-task-filter-secondary {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.my-task-filter-reference .my-task-filter-chips {
    grid-column: 2 / -1;
    grid-row: 2;
    min-height: 2.2rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.my-task-filter-reference .my-task-filter-chips > span {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.my-task-active-filter-chip {
    min-height: 2.2rem;
    padding: 0 0.8rem;
    border: 1px solid #dfe4ec;
    border-radius: 0.55rem;
    background: #f8fafc;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.my-task-active-filter-chip strong {
    color: #273449;
}

.my-task-active-filter-chip b {
    margin-left: 0.35rem;
    color: #8290a5;
    font-size: 1.15rem;
    line-height: 1;
}

.my-task-active-filter-chip:hover {
    border-color: rgba(109, 61, 242, 0.28);
    background: #f4f0ff;
}

.my-task-filter-reference .my-task-filter-clear {
    width: max-content;
    min-height: 2.2rem;
    padding: 0 0.5rem;
    color: #6d3df2;
    font-size: 0.8rem;
    font-weight: 700;
}

.my-task-filter-reference .my-task-filter-clear:hover {
    color: #5426db;
}

.my-task-filter-reference .editable-task-filter-menu {
    z-index: 60;
    top: calc(100% + 0.35rem);
    border-color: #dfe4ec;
    border-radius: 0.7rem;
}

.my-tasks-page .my-task-table-wrap {
    border-color: #e1e6ed;
    border-radius: 1rem;
    box-shadow: none;
    overflow: hidden;
}

.my-tasks-page .my-task-table-head {
    padding: 1.25rem 1.35rem 1rem;
}

.my-tasks-page .my-task-table-head h2 {
    font-size: 1.15rem;
    font-weight: 650;
}

.my-tasks-page .my-task-table-head p {
    font-size: 0.86rem;
    font-weight: 500;
}

.my-task-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.my-tasks-page .my-task-table {
    min-width: 68rem;
}

.my-tasks-page .my-task-table th,
.my-tasks-page .my-task-table td {
    padding: 0.82rem 1rem;
}

.my-tasks-page .my-task-table th:first-child,
.my-tasks-page .my-task-table td:first-child {
    width: auto;
    padding-left: 1.35rem;
    padding-right: 1rem;
}

.my-tasks-page .my-task-table th {
    color: #64748b;
    font-size: 0.72rem;
    letter-spacing: 0.035em;
    background: #f8fafc;
}

.my-task-title-cell {
    min-width: 13rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.my-task-title-cell .task-code {
    flex: 0 0 auto;
    color: #718096;
    font-size: 0.75rem;
}

.my-tasks-page .my-task-title-cell strong {
    display: inline;
    font-size: 0.82rem;
    white-space: nowrap;
}

.my-tasks-page .row-action-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.my-tasks-page .row-menu {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1180px) {
    .my-tasks-page .my-task-status-overview {
        grid-template-columns: repeat(5, minmax(10rem, 1fr));
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .my-task-filter-reference .my-task-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-task-filter-reference .task-search { grid-column: 1 / -1; grid-row: 1; }
    .my-task-filter-reference .editable-task-filter:nth-child(3) { grid-column: 1; grid-row: 2; }
    .my-task-filter-reference .editable-task-filter:nth-child(4) { grid-column: 2; grid-row: 2; }
    .my-task-filter-reference .editable-task-filter:nth-child(2) { grid-column: 1; grid-row: 3; }
    .my-task-filter-reference .my-task-filter-secondary { grid-column: 1 / -1; grid-row: 4; }
}

@media (max-width: 640px) {
    .my-task-filter-reference { padding: 0.85rem; }
    .my-task-filter-reference .my-task-filter-form { grid-template-columns: 1fr; }
    .my-task-filter-reference .task-search,
    .my-task-filter-reference .editable-task-filter:nth-child(2),
    .my-task-filter-reference .editable-task-filter:nth-child(3),
    .my-task-filter-reference .editable-task-filter:nth-child(4),
    .my-task-filter-reference .my-task-filter-secondary {
        grid-column: 1;
        width: 100%;
        max-width: none;
    }
    .my-task-filter-reference .task-search { grid-row: 1; }
    .my-task-filter-reference .editable-task-filter:nth-child(3) { grid-row: 2; }
    .my-task-filter-reference .editable-task-filter:nth-child(4) { grid-row: 3; }
    .my-task-filter-reference .editable-task-filter:nth-child(2) { grid-row: 4; }
    .my-task-filter-reference .my-task-filter-secondary {
        grid-row: 5;
        align-items: stretch;
    }
    .my-task-filter-reference .my-task-filter-secondary > .editable-task-filter {
        width: 100%;
        max-width: none;
    }
    .my-task-filter-reference .my-task-filter-secondary .my-task-filter-chips {
        justify-content: flex-start;
    }
}

/* SPACES REFERENCE LAYOUT */
.spaces-page-head {
    min-height: 4.3rem;
    margin-bottom: 1.65rem;
}

.spaces-page-head h1 {
    margin-bottom: 0.75rem;
    color: #111827;
    font-size: 2.25rem;
    font-weight: 800;
}

.spaces-page-head p {
    color: #53627a;
    font-size: 1rem;
}

.spaces-page-head .spaces-new-button {
    min-height: 3.25rem;
    padding: 0 1.35rem;
    border-radius: 0.7rem;
    background: #6d3df2;
    box-shadow: 0 12px 26px rgba(109, 61, 242, 0.24);
}

.spaces-page-head .spaces-new-button:hover {
    background: #5d2ee3;
}

.spaces-page .spaces-summary {
    gap: 1.1rem;
    margin-bottom: 1.85rem;
}

.spaces-page .spaces-summary .task-summary-card {
    min-height: 10.7rem;
    padding: 1.5rem;
    border-color: #dfe4ec;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.05);
    align-items: center;
}

.spaces-page .spaces-summary .task-summary-card.is-selected::after {
    display: none;
}

.spaces-page .spaces-summary .summary-icon {
    width: 4.25rem;
    height: 4.25rem;
    flex: 0 0 auto;
    border-radius: 1rem;
}

.spaces-page .spaces-summary .summary-icon .icon {
    width: 2rem;
    height: 2rem;
}

.spaces-page .spaces-summary .task-summary-card strong,
.spaces-page .spaces-summary .task-summary-card b,
.spaces-page .spaces-summary .task-summary-card small {
    display: block;
}

.spaces-page .spaces-summary .task-summary-card strong {
    color: #111827;
    font-size: 0.95rem;
}

.spaces-page .spaces-summary .task-summary-card b {
    margin: 0.55rem 0 0.75rem;
    color: #0b1425;
    font-size: 2.5rem;
    line-height: 1;
}

.spaces-page .spaces-summary .task-summary-card small {
    color: #5f6d85;
    font-size: 0.9rem;
}

.spaces-page .spaces-filter-bar {
    grid-template-columns: 1fr;
    margin-bottom: 1.8rem;
}

.spaces-page .spaces-filter-bar .spaces-search-field {
    min-height: 4rem;
    padding: 0 1.25rem;
    border-color: #d8dee8;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: none;
}

.spaces-page .spaces-filter-bar .spaces-search-field .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.spaces-page .spaces-filter-bar .spaces-search-field input {
    font-size: 1rem;
}

.spaces-page .spaces-filter-bar .spaces-filter-select {
    display: none;
}

.spaces-page .spaces-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.spaces-page .space-card {
    position: relative;
    min-height: 14rem;
    padding: 1.35rem;
    border-color: #dfe4ec;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.spaces-page .space-card:hover {
    transform: none;
    border-color: #cfd6e1;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.space-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.spaces-page .space-card-main {
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 1rem;
}

.spaces-page .space-card-logo {
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 auto;
    border-radius: 0.9rem;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--space-color, #6d3df2) 22%, transparent);
}

.spaces-page .space-card-logo .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.spaces-page .space-card-main strong {
    margin-bottom: 0.55rem;
    font-size: 1rem;
}

.spaces-page .space-card-main small {
    min-height: 2.6rem;
    color: #667085;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.space-card-menu {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
}

.space-card-menu[open] {
    z-index: 80;
}

.space-card-menu summary {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.6rem;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
}

.space-card-menu summary::-webkit-details-marker {
    display: none;
}

.space-card-menu summary:hover,
.space-card-menu[open] summary {
    background: #f5f7fa;
}

.space-card-menu summary .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.space-card-menu-popover {
    position: absolute;
    z-index: 90;
    top: calc(100% + 0.35rem);
    right: 0;
    width: 14.25rem;
    padding: 0.45rem;
    border: 1px solid #e3e7ee;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.17);
}

.space-card-menu-popover a,
.space-card-menu-popover button {
    width: 100%;
    min-height: 2.55rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #42516a;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.space-card-menu-popover a:hover,
.space-card-menu-popover button:hover {
    background: #f6f3ff;
    color: #6030df;
}

.space-card-menu-popover .icon {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
}

.space-card-menu-popover form {
    margin: 0.35rem -0.45rem -0.45rem;
    padding: 0.35rem 0.45rem 0.45rem;
    border-top: 1px solid #edf0f4;
}

.space-card-menu-popover .space-menu-danger {
    color: #ef312f;
}

.space-card-menu-popover .space-menu-danger:hover {
    color: #d92525;
    background: #fff1f1;
}

.spaces-page .space-progress-row {
    margin-top: auto;
    padding-top: .9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.spaces-page .space-progress-row .progress-track {
    height: 0.45rem;
    flex: 1;
    background: #e7eaf0;
}

.spaces-page .space-progress-row .progress-fill {
    background: #1687ef;
}

.spaces-page .space-progress-row > span:last-child {
    flex: 0 0 auto;
    color: #526178;
    font-size: 0.82rem;
    font-weight: 600;
}

.spaces-page .space-card-footer {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid #e5e8ee;
    flex-wrap: nowrap;
}

.spaces-page .space-card-footer .badge {
    min-height: 2rem;
    padding: 0 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.spaces-page .space-card-footer .badge i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.spaces-page .space-card-footer .assignee-pill {
    margin-right: 0;
    margin-left: auto;
}

@media (max-width: 1100px) {
    .spaces-page .spaces-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .spaces-page-head {
        padding-bottom: 4.3rem;
    }

    .spaces-page-head .spaces-new-button {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
    }

    .spaces-page .spaces-summary,
    .spaces-page .spaces-grid {
        grid-template-columns: 1fr;
    }
}

/* Online booking */
.booking-page { background:#fbfaff; }
.booking-hero,.booking-form-head { display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.65rem; }
.booking-hero .eyebrow { margin-bottom:.55rem;color:#7a6a9e;font-size:.7rem;letter-spacing:.14em; }
.booking-hero h1,.booking-form-head h1 { margin:0;font-size:2.05rem;letter-spacing:-.025em; }
.booking-hero p,.booking-form-head p { margin:.42rem 0 0;color:#69748b; }
.booking-hero .calendar-actions { display:flex;gap:.75rem; }
.booking-action-button { min-height:3.15rem;padding:0 1.3rem;border-radius:.7rem;gap:.55rem; }
.booking-action-button .icon { width:1.2rem;height:1.2rem; }
.booking-summary-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-bottom:1.4rem; }
.booking-summary-grid article { display:grid;gap:.15rem;min-height:106px;padding:1rem 1.45rem;background:#fff;border:1px solid #e2dfeb;border-radius:10px;box-shadow:none; }
.booking-summary-grid strong { color:#6d3df2;font-size:2.45rem;line-height:1; }.booking-summary-grid span { align-self:end;color:#697187;font-size:.9rem;font-weight:500; }
.booking-panel { margin-bottom:1.25rem;padding:1.25rem;background:#fff;border:1px solid #e2dfeb;border-radius:11px;box-shadow:none; }
.booking-panel-head { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:0;border:0; }
.booking-panel-head h2 { margin:0;color:#241842;font-size:1.15rem; }.booking-panel-head p { margin:.28rem 0 0;color:#758097;font-size:.86rem; }
.booking-type-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem; }
.booking-type-card { position:relative;min-height:174px;padding:1.2rem 1.35rem 1rem 1.6rem;border:1px solid #e1dee8;border-radius:9px;overflow:visible;background:#fff; }
.booking-type-card .booking-color { position:absolute;inset:0 auto 0 0;width:5px;border-radius:9px 0 0 9px;background:var(--booking-color); }
.booking-type-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }.booking-type-card h3 { margin:.05rem 0 .35rem;color:#251b3f;font-size:1rem; }.booking-type-menu { color:#6d3df2;font-size:1.55rem;line-height:.8; }.booking-type-card p { min-height:0;margin:0;color:#707b90;font-size:.82rem; }
.booking-type-actions { position:relative;z-index:2; }
.booking-type-actions summary { display:grid;width:1.9rem;height:1.9rem;place-items:center;border-radius:.5rem;color:#6d3df2;font-size:1.5rem;line-height:1;cursor:pointer;list-style:none; }
.booking-type-actions summary::-webkit-details-marker { display:none; }
.booking-type-actions[open] summary,.booking-type-actions summary:hover { background:#f1ecff; }
.booking-type-actions > div { position:absolute;top:2.2rem;right:0;z-index:5;min-width:160px;padding:.35rem;border:1px solid #e0daef;border-radius:.65rem;background:#fff;box-shadow:0 12px 28px rgba(48,25,91,.16); }
.booking-type-actions a,.booking-type-actions button { display:block;width:100%;padding:.62rem .7rem;border:0;border-radius:.45rem;background:transparent;color:#35294e;text-align:left;text-decoration:none;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer; }
.booking-type-actions a:hover { background:#f5f1ff;color:#6638dc; }
.booking-type-actions button { color:#e23e4f; }.booking-type-actions button:hover { background:#fff0f2; }
.booking-type-card dl { margin:.9rem 0 0;padding-top:.75rem;border-top:1px solid #e4e1e9; }.booking-type-card dl div { display:flex;justify-content:space-between;margin:.42rem 0; }.booking-type-card dt { color:#7b8497;font-size:.82rem; }.booking-type-card dd { margin:0;color:#302642;font-size:.82rem;font-weight:750; }
.booking-empty { grid-column:1/-1;padding:2.5rem;text-align:center;color:#737e93; }.booking-empty h3 { color:#1c2435; }
.booking-new-invitation { min-height:2.65rem;border-radius:.65rem;gap:.4rem; }
.booking-table-wrap { overflow-x:auto;border-top:1px solid #e8e5ed; }.booking-table { width:100%;border-collapse:collapse; }.booking-table th { padding:.75rem .55rem;text-align:left;color:#7b8496;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase; }.booking-table td { padding:.72rem .55rem;border-top:1px solid #eceaf4;color:#302842;font-size:.8rem; }.booking-table td small { display:block;margin-top:.2rem;color:#8a93a6; }.booking-link { color:#6d3df2;font-weight:800;text-decoration:underline; }.booking-empty-cell { text-align:center;color:#7c879b; }
.booking-status { padding:.42rem .72rem;border-radius:999px;background:#f0eef4;color:#514b5c;font-size:.72rem; }.booking-status-booked { background:#dcf8e8;color:#087845; }.booking-status-sent,.booking-status-delivered,.booking-status-opened,.booking-status-clicked { background:#eee8ff;color:#6534da; }.booking-status-expired,.booking-status-failed { background:#ffe7ea;color:#c32745; }
.booking-link-actions { display:flex;align-items:center;gap:.65rem;white-space:nowrap; }.booking-copy-link { padding:.46rem .7rem;border:1px solid #d9d2ef;border-radius:.55rem;color:#6235d7;background:#fff;font:inherit;font-size:.72rem;font-weight:750;cursor:pointer; }.booking-copy-link:hover { border-color:#9f86ef;background:#f5f1ff; }
.booking-config-form { max-width:1080px;margin:0 auto; }
.booking-config-form .booking-panel { margin-bottom:1.4rem;padding:1.55rem 1.7rem; }
.booking-config-form .booking-panel-head { margin-bottom:1.35rem; }
.booking-config-form .booking-panel-head h2 { font-size:1.08rem; }
.booking-step-number { color:#6d3df2; }
.booking-back-button { gap:.45rem; }
.booking-config-form .form-grid,.booking-invite-form .form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem 1.4rem; }
.booking-config-form label,.booking-invite-form label,.public-notes { display:grid;gap:.5rem;color:#342a48;font-size:.78rem;font-weight:750; }
.booking-config-form .form-control { min-height:2.85rem;border-color:#ddd8e7;border-radius:.65rem;background:#fff; }
.booking-config-form textarea.form-control { min-height:5.35rem;resize:vertical; }
.booking-config-form input[type="checkbox"],.meeting-checkbox { accent-color:#6d3df2; }
.booking-config-form input[type="color"] { width:100%;padding:.35rem .5rem;cursor:pointer; }
.booking-config-form .span-2,.booking-invite-form .span-2 { grid-column:1/-1; }
.availability-panel-head { align-items:center;margin-bottom:1rem!important; }
.booking-add-rule { min-height:2.55rem;padding:0 1rem;border-radius:.6rem;gap:.4rem;white-space:nowrap;background:#6d3df2; }
.availability-table { overflow:hidden;border:1px solid #e2deea;border-radius:.75rem;background:#fff; }
.availability-form-columns,.availability-form-row { display:grid;grid-template-columns:1.15fr 1fr 1fr .65fr .55fr;gap:1rem;align-items:center; }
.availability-form-columns { padding:.75rem 1rem;color:#756d83;background:#fbfaff;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase; }
.availability-form-columns span:nth-last-child(-n+2) { text-align:center; }
.availability-form-list { display:grid; }
.availability-form-row { position:relative;min-height:4.4rem;padding:.65rem 1rem;border-top:1px solid #ece9f1;background:#fff; }
.availability-form-row[hidden] { display:none; }
.availability-control { min-width:0; }
.availability-control .form-control { width:100%;min-height:2.6rem; }
.availability-control .errorlist { margin:.35rem 0 0;padding:0;list-style:none;color:#d42c49;font-size:.68rem; }
.availability-check { display:flex!important;align-items:center;justify-content:center; }
.availability-check input { width:1.05rem;height:1.05rem; }
.availability-delete { display:flex;align-items:center;justify-content:center; }
.availability-delete>input[type="checkbox"] { display:none; }
.availability-delete button { display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid #ddd8e7;border-radius:.55rem;color:#6d3df2;background:#fff;cursor:pointer; }
.availability-delete button:hover { border-color:#b8a5ef;background:#f5f1ff; }
.availability-delete svg { width:1rem;height:1rem; }
.availability-row-errors { grid-column:1/-1;color:#d42c49;font-size:.7rem; }
.availability-row-errors:empty { display:none; }
.booking-form-actions { display:flex;justify-content:flex-end;gap:.75rem;margin-top:.25rem;padding:1.2rem 0 0;border-top:1px solid #e7e3ed; }
.booking-form-actions .btn { min-height:2.8rem;padding:0 1.25rem;border-radius:.65rem; }
.booking-mailgun-note { margin-top:1rem;padding:1rem 1.15rem;background:#f4f0ff;border-radius:14px;color:#5d3ab9; }.booking-mailgun-note p { margin:.3rem 0 0; }
.public-booking-body { min-height:100vh;margin:0;background:radial-gradient(circle at 10% 10%,#efe8ff 0,transparent 35%),#f8f7fc;color:#151b2d;font-family:Inter,system-ui,sans-serif; }
.public-booking-shell { width:min(1080px,calc(100% - 2rem));margin:0 auto;padding:2rem 0; }.public-booking-brand { display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem; }.public-booking-brand>span { display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#6d36f1;color:#fff;font-weight:900; }.public-booking-brand div { display:grid; }.public-booking-brand small { color:#788298; }
.public-booking-card { display:grid;grid-template-columns:minmax(280px,.8fr) minmax(420px,1.3fr);min-height:620px;background:#fff;border:1px solid #e4e0f1;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(45,30,95,.12); }.public-booking-info { padding:2.2rem;background:linear-gradient(160deg,color-mix(in srgb,var(--booking-color) 12%,white),#fff);border-right:1px solid #ebe8f4; }.public-booking-info h1 { margin:.4rem 0 1rem;font-size:2.2rem; }.public-booking-info>p { color:#68738a;line-height:1.6; }.public-booking-info dl { margin:2rem 0; }.public-booking-info dl div { margin:1rem 0; }.public-booking-info dt { color:#7d879a;font-size:.82rem; }.public-booking-info dd { margin:.3rem 0 0;font-weight:800; }.public-booking-message { padding:1rem;border-radius:14px;background:#fff;border:1px solid #e8e4f2;line-height:1.5; }
.public-booking-slots { padding:2.2rem; }.public-booking-slots h2 { margin:0 0 .5rem;font-size:1.55rem; }.public-booking-slots>p { color:#6f7a90; }.slot-choice-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1.5rem 0;max-height:350px;overflow:auto;padding-right:.25rem; }.slot-choice { cursor:pointer; }.slot-choice input { position:absolute;opacity:0; }.slot-choice span { display:block;padding:.9rem;border:1px solid #ddd8ec;border-radius:12px;text-align:center;color:#3e4960;font-weight:750;transition:.15s ease; }.slot-choice input:checked+span { color:#5f2be2;border-color:#7441ee;background:#f2edff;box-shadow:0 0 0 2px #e5dafe; }.public-notes { margin-top:1rem; }.public-booking-submit { width:100%;margin-top:1rem;justify-content:center; }.booking-public-alert { padding:1.1rem;background:#fff5e8;border:1px solid #ffd8a7;border-radius:14px;color:#8a5112; }
.booking-week-picker { margin:1.35rem 0; }.booking-week-toolbar { display:grid;grid-template-columns:2.5rem 1fr 2.5rem;align-items:center;gap:.65rem;margin-bottom:.9rem; }.booking-week-toolbar strong { text-align:center;color:#273247;font-size:.9rem;text-transform:capitalize; }.booking-week-toolbar button { display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid #ddd8ec;border-radius:.75rem;color:#5831c7;background:#fff;font-size:1.25rem;font-weight:800;cursor:pointer; }.booking-week-toolbar button:disabled { color:#b7bdc8;background:#f7f8fa;cursor:not-allowed; }.booking-week[hidden],.slot-day-panel[hidden] { display:none!important; }.booking-day-selector { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem; }.booking-day-button { display:grid;place-items:center;gap:.12rem;min-width:0;padding:.55rem .2rem;border:1px solid #e1dced;border-radius:.8rem;color:#606d83;background:#fff;cursor:pointer;transition:.15s ease; }.booking-day-button span,.booking-day-button small { font-size:.61rem;font-weight:800;text-transform:uppercase; }.booking-day-button strong { color:#253047;font-size:1rem; }.booking-day-button:hover:not(:disabled) { border-color:#a88df7;background:#f7f4ff; }.booking-day-button.is-selected { color:#fff;border-color:#6d3df2;background:#6d3df2;box-shadow:0 7px 16px rgba(109,61,242,.2); }.booking-day-button.is-selected strong { color:#fff; }.booking-day-button:disabled { opacity:.42;background:#f4f5f7;cursor:not-allowed; }.slot-day-panel h3 { margin:1.15rem 0 -.45rem;color:#344056;font-size:.82rem; }.slot-day-panel .slot-choice-list { max-height:245px;margin-top:1rem; }
.public-booking-success-body { display:grid;place-items:center;padding:30px 16px;background:#fff; }
.public-booking-success { width:min(520px,100%);margin:0;padding:38px 34px 42px;border:1px solid #dedbe5;border-radius:18px;background:#fff;text-align:center;box-shadow:0 14px 38px rgba(65,42,122,.05); }
.booking-success-icon { display:grid;place-items:center;width:66px;height:66px;margin:0 auto 23px;border-radius:50%;background:#6d3df2;color:#fff;box-shadow:0 10px 22px rgba(109,61,242,.21); }
.booking-success-icon svg { width:33px;height:33px; }
.public-booking-success .eyebrow { margin:0 0 11px;color:#73658f;font-size:.74rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase; }
.public-booking-success h1 { margin:0;color:#6d3df2;font-size:1.7rem;font-weight:850;letter-spacing:-.025em; }
.booking-success-copy { margin:14px auto 27px;color:#77717d;font-size:.94rem;line-height:1.5; }
.booking-success-copy strong { color:#6d3df2; }
.public-booking-success dl { margin:0;text-align:left;border:1px solid #d9d4e3;border-radius:14px;overflow:hidden;background:#fff; }
.public-booking-success dl div { display:grid;grid-template-columns:minmax(92px,.65fr) minmax(0,1.5fr);align-items:center;gap:16px;min-height:60px;padding:0 20px;border-bottom:1px solid #e2dfe6; }
.public-booking-success dl div:last-child { border-bottom:0; }
.public-booking-success dt { color:#8f8996;font-size:.9rem; }
.public-booking-success dd { margin:0;color:#5f32d1;font-size:.9rem;font-weight:850;text-align:right; }
@media(max-width:620px){.public-booking-success-body{place-items:start center;padding:20px 12px}.public-booking-success{padding:38px 20px 30px;border-radius:16px}.booking-success-icon{width:68px;height:68px;margin-bottom:25px}.booking-success-icon svg{width:34px;height:34px}.public-booking-success h1{font-size:1.58rem}.public-booking-success .eyebrow{font-size:.72rem}.booking-success-copy{margin:16px auto 27px;font-size:.92rem}.booking-success-desktop-break{display:none}.public-booking-success dl div{grid-template-columns:88px minmax(0,1fr);gap:12px;min-height:62px;padding:0 16px}.public-booking-success dt,.public-booking-success dd{font-size:.86rem}}
@media(max-width:900px){.booking-summary-grid,.booking-type-grid{grid-template-columns:1fr}.public-booking-card{grid-template-columns:1fr}.public-booking-info{border-right:0;border-bottom:1px solid #ebe8f4}.availability-form-columns{display:none}.availability-form-row{grid-template-columns:1fr 1fr}.availability-check,.availability-delete{justify-content:flex-start}.booking-config-form .form-grid,.booking-invite-form .form-grid{grid-template-columns:1fr}.booking-config-form .span-2,.booking-invite-form .span-2{grid-column:auto}}
@media(max-width:620px){.booking-hero,.booking-form-head{align-items:flex-start;flex-direction:column}.booking-hero .calendar-actions{width:100%;flex-wrap:wrap}.slot-choice-list{grid-template-columns:1fr}.public-booking-info,.public-booking-slots{padding:1.4rem}.availability-form-row{grid-template-columns:1fr}.booking-day-selector{gap:.22rem}.booking-day-button{padding:.45rem .1rem;border-radius:.65rem}.booking-day-button span,.booking-day-button small{font-size:.52rem}.booking-day-button strong{font-size:.88rem}}

/* Public booking — weekly two-panel layout */
.public-booking-body { background:#fafafa;color:#171321; }
.public-booking-shell { width:min(940px,calc(100% - 36px));margin:0 auto;padding:24px 0; }
.public-booking-card { grid-template-columns:275px minmax(0,1fr);min-height:650px;border:1px solid #dedbe5;border-radius:22px;background:#fff;box-shadow:0 18px 55px rgba(39,29,70,.08); }
.public-booking-info { padding:25px 26px;border-right:1px solid #e2dfe9;background:#fff; }
.public-booking-brand { gap:14px;margin:0; }
.public-booking-brand>span { width:52px;height:52px;border-radius:12px;background:#6d3df2;box-shadow:0 8px 20px rgba(109,61,242,.22);font-size:1.2rem; }
.public-booking-brand strong { color:#171321;font-size:1.2rem; }.public-booking-brand small { margin-top:3px;color:#7d7789;font-size:.95rem; }
.public-booking-info-divider { height:1px;margin:23px -3px 28px;background:#dedbe5; }
.public-booking-info .eyebrow { margin:0 0 16px;color:#777181;font-size:.7rem;font-weight:900;letter-spacing:.12em; }
.public-booking-info h1 { margin:0;color:#241842;font-size:1.55rem;font-weight:850;line-height:1.24; }
.public-booking-detail-list { display:grid;gap:24px;margin:28px 0 0!important; }
.public-booking-info .public-booking-detail-list>div { display:grid;grid-template-columns:52px 1fr;align-items:center;gap:18px;margin:0; }
.public-booking-detail-icon { display:grid;place-items:center;width:52px;height:52px;border:1px solid #d9d5e1;border-radius:11px;color:#6d3df2;background:#fff; }
.public-booking-detail-icon svg { width:25px;height:25px; }
.public-booking-detail-list>div>span:last-child { display:grid;gap:4px; }
.public-booking-detail-list dt { color:#7c7686;font-size:.95rem; }.public-booking-detail-list dd { margin:0;color:#21183a;font-size:1rem;font-weight:850; }
.public-booking-message { margin-top:24px;border-color:#e3ddf5;background:#f8f6ff;color:#5c4f78; }
.public-booking-slots { padding:28px 27px 25px; }
.public-booking-slots h2 { margin:0 0 9px;color:#241842;font-size:1.7rem;font-weight:850;letter-spacing:-.025em; }
.public-booking-slots>p { max-width:680px;margin:0;color:#6f6978;font-size:.9rem;line-height:1.45; }
.booking-week-picker { margin:19px 0 0; }
.booking-week-toolbar { grid-template-columns:44px 1fr 44px;gap:14px;margin-bottom:14px; }
.booking-week-toolbar strong { color:#2d2247;font-size:1.05rem;font-weight:850; }
.booking-week-toolbar button { width:44px;height:44px;border-color:#dcd8e4;border-radius:10px;color:#6d3df2;background:#fff;font-size:1.2rem; }
.booking-week-toolbar button:hover:not(:disabled) { border-color:#a991ee;background:#f7f4ff; }
.booking-day-selector { grid-template-columns:repeat(5,minmax(0,1fr));gap:8px; }
.booking-day-button { min-height:88px;padding:10px 4px;border-color:#ddd9e5;border-radius:10px;color:#554c65;background:#fff; }
.booking-day-button span,.booking-day-button small { font-size:.61rem;letter-spacing:.02em; }.booking-day-button strong { color:#271d3f;font-size:1.12rem; }
.booking-day-button.is-selected { color:#fff;border-color:#6d3df2;background:#6d3df2;box-shadow:0 10px 22px rgba(109,61,242,.23); }
.booking-day-button.is-selected strong { color:#fff; }.booking-day-button:disabled { color:#aaa5b1;background:#fafafa;opacity:.55; }
.slot-day-panel h3 { margin:25px 0 13px;color:#2d2247;font-size:.9rem;font-weight:850; }
.slot-day-panel .slot-choice-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0;max-height:190px;overflow:auto; }
.slot-choice span { padding:13px 12px;border-color:#dcd8e4;border-radius:10px;color:#342a4a;background:#fff;font-size:.88rem;font-weight:800; }
.slot-choice input:checked+span { color:#fff;border-color:#6d3df2;background:#6d3df2;box-shadow:0 9px 22px rgba(109,61,242,.22); }
.public-notes { margin-top:23px;color:#302541;font-size:.86rem; }.public-notes textarea { min-height:76px;padding:13px;border:1px solid #dcd8e4;border-radius:10px;resize:vertical; }
.public-booking-submit { min-height:50px;margin-top:18px;border-radius:10px;background:#6d3df2;box-shadow:0 12px 27px rgba(109,61,242,.24);font-size:.92rem;font-weight:850; }
.public-booking-submit:hover { background:#5930cf; }
@media(max-width:1050px){.public-booking-card{grid-template-columns:270px minmax(0,1fr)}.public-booking-info{padding:25px}.public-booking-slots{padding:28px 24px}.booking-day-selector{gap:6px}.booking-day-button{min-height:88px}.public-booking-detail-list{gap:24px}}
@media(max-width:820px){.public-booking-shell{width:min(680px,calc(100% - 28px));padding:18px 0}.public-booking-card{grid-template-columns:1fr;min-height:0}.public-booking-info{border-right:0;border-bottom:1px solid #e2dfe9}.public-booking-info-divider{margin-bottom:28px}.public-booking-detail-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px!important}.public-booking-info .public-booking-detail-list>div{grid-template-columns:48px 1fr;gap:12px}.public-booking-detail-icon{width:48px;height:48px}.public-booking-detail-icon svg{width:24px;height:24px}}
@media(max-width:620px){.public-booking-info,.public-booking-slots{padding:25px 20px}.public-booking-info h1,.public-booking-slots h2{font-size:1.6rem}.public-booking-detail-list{grid-template-columns:1fr}.booking-day-selector{gap:4px}.booking-day-button{min-height:82px;padding:9px 2px}.booking-day-button span,.booking-day-button small{font-size:.52rem}.booking-day-button strong{font-size:1rem}.slot-day-panel .slot-choice-list{grid-template-columns:1fr}.booking-week-toolbar{grid-template-columns:44px 1fr 44px}.booking-week-toolbar button{width:44px;height:44px}}