/*
   Shared command-center UI layer.
   Dark graphite HUD, 1700px desktop canvas, compact mobile adaptation.
*/
:root {
    --ui-page-max: 1700px;
    --ui-bg: #05070c;
    --ui-bg-2: #0a0f18;
    --ui-panel: rgba(13, 19, 31, .84);
    --ui-panel-2: rgba(21, 29, 43, .78);
    --ui-panel-3: rgba(35, 42, 55, .48);
    --ui-line: rgba(145, 174, 205, .22);
    --ui-line-2: rgba(145, 174, 205, .34);
    --ui-text: #edf4fb;
    --ui-muted: rgba(222, 232, 244, .66);
    --ui-muted-2: rgba(222, 232, 244, .42);
    --ui-cyan: #6fb7d6;
    --ui-blue: #5f8fc7;
    --ui-violet: #8b75bd;
    --ui-green: #63c99d;
    --ui-amber: #d59a45;
    --ui-red: #db626b;
    --ui-shadow: 0 24px 72px rgba(0, 0, 0, .48);
    --ui-cut: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    --ui-cut-small: polygon(0 9px, 9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scrollbar-gutter: stable;
}

body {
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    color: var(--ui-text) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px;
    line-height: 1.42;
    letter-spacing: 0 !important;
    background:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px),
        radial-gradient(circle at 13% 0%, rgba(111, 183, 214, .18), transparent 30rem),
        radial-gradient(circle at 70% 5%, rgba(139, 117, 189, .14), transparent 34rem),
        radial-gradient(circle at 92% 48%, rgba(95, 143, 199, .10), transparent 26rem),
        linear-gradient(135deg, #0b121d 0%, #080b13 44%, #020307 100%) !important;
    background-size: 42px 42px, 42px 42px, auto, auto, auto, auto !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 0 18%, rgba(255, 255, 255, .035) 18.2%, transparent 18.7% 57%, rgba(111, 183, 214, .05) 57.2%, transparent 57.7%),
        radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .06), transparent 34rem);
    opacity: .92;
}

body::selection {
    background: rgba(111, 183, 214, .32);
}

a {
    color: inherit;
}

header {
    width: 100% !important;
    position: sticky;
    top: 0;
    z-index: 30;
    background:
        linear-gradient(180deg, rgba(5, 7, 12, .94), rgba(10, 15, 24, .82)) !important;
    border-bottom: 1px solid rgba(145, 174, 205, .20) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .36);
    backdrop-filter: blur(18px) saturate(130%);
}

.admin-topbar {
    width: 100% !important;
    position: sticky;
    top: 0;
    z-index: 40;
    background:
        linear-gradient(180deg, rgba(5, 7, 12, .96), rgba(7, 11, 19, .90)) !important;
    border-bottom: 1px solid rgba(145, 174, 205, .18) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .36);
    backdrop-filter: blur(18px) saturate(130%);
}

.admin-topbar-inner {
    width: min(var(--ui-page-max), calc(100% - clamp(24px, 3vw, 64px))) !important;
    min-height: 76px;
    margin: 0 auto;
    padding: 13px 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap !important;
}

.admin-topbar-brand {
    min-width: 176px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ui-text) !important;
    text-decoration: none !important;
}

.admin-topbar-menu-toggle,
.admin-topbar-backdrop,
.admin-topbar-close,
.admin-topbar-mobile-only {
    display: none !important;
}

.admin-topbar-logo {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(145, 174, 205, .22);
}

.admin-topbar-logo img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.admin-topbar-brand strong {
    display: block;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-topbar-brand small {
    display: block;
    margin-top: 3px;
    color: rgba(237, 244, 251, .70);
    font-size: 12px;
    line-height: 1.25;
}

.admin-topbar-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

.admin-topbar-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 12px;
    color: #edf4fb !important;
    text-decoration: none !important;
    font-weight: 850;
    font-size: 13px;
    line-height: 1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035)),
        rgba(24, 32, 50, .92);
    border: 1px solid rgba(145, 174, 205, .30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 24px rgba(0, 0, 0, .26);
    white-space: nowrap;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.admin-topbar-button:hover {
    transform: translateY(-1px);
    border-color: rgba(111, 183, 214, .58);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)),
        rgba(31, 41, 63, .96);
}

.admin-topbar-button svg {
    width: 18px;
    height: 18px;
    color: #cfe0ff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-topbar-more {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.admin-topbar-more-toggle {
    cursor: pointer;
    list-style: none;
}

.admin-topbar-more-toggle::-webkit-details-marker {
    display: none;
}

.admin-topbar-more-toggle::marker {
    content: "";
}

.admin-topbar-more-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 230px;
    padding: 8px;
    display: grid;
    gap: 6px;
    border-radius: 16px;
    border: 1px solid rgba(145, 174, 205, .26);
    background:
        radial-gradient(circle at 12% 0%, rgba(111, 183, 214, .16), transparent 15rem),
        linear-gradient(180deg, rgba(13, 19, 31, .98), rgba(7, 11, 19, .98));
    box-shadow: 0 24px 58px rgba(0, 0, 0, .46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.admin-topbar-more[open] .admin-topbar-more-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.admin-topbar-more-menu .admin-topbar-button {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
    padding: 0 12px;
    box-shadow: none;
}

@media (max-width: 920px) {
    .admin-topbar-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .admin-topbar-inner {
        width: calc(100% - 28px) !important;
        min-height: 64px;
        padding: 10px 0 !important;
    }

    .admin-topbar-brand {
        min-width: 0;
    }

    .admin-topbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-topbar-button {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 760px) {
    header.admin-topbar[data-admin-topbar] .admin-topbar-actions {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: none !important;
        padding: max(22px, calc(env(safe-area-inset-top) + 12px)) 24px max(20px, calc(env(safe-area-inset-bottom) + 14px)) !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translateY(-8px) !important;
        border: 0 !important;
        background:
            radial-gradient(circle at 18% 5%, rgba(111, 183, 214, .14), transparent 24rem),
            radial-gradient(circle at 92% 16%, rgba(139, 117, 189, .16), transparent 24rem),
            linear-gradient(180deg, #080c14 0%, #050812 48%, #02040a 100%) !important;
    }

    header.admin-topbar[data-admin-topbar].is-menu-open .admin-topbar-actions {
        transform: translateY(0) !important;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-actions::before {
        content: "BILLING.DP-DEV.BY";
        display: block;
        margin: 6px 92px 12px 0;
        color: #f5f8ff;
        font-weight: 900;
        font-size: 16px;
        line-height: 1.05;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-close {
        position: absolute !important;
        top: max(22px, calc(env(safe-area-inset-top) + 14px)) !important;
        right: 22px !important;
        width: 64px !important;
        height: 64px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-close span {
        display: none !important;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 38px !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(237, 244, 251, .82) !important;
        font-size: clamp(13px, 3.6vw, 17px) !important;
        font-weight: 500 !important;
        text-align: left !important;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-button span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-more {
        display: none !important;
    }

    header.admin-topbar[data-admin-topbar] .admin-topbar-mobile-only {
        display: grid !important;
    }
}

.nav,
.container,
.page {
    width: min(var(--ui-page-max), calc(100% - clamp(24px, 3vw, 64px))) !important;
    max-width: var(--ui-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.nav {
    min-height: 76px;
    padding: 13px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
}

.container {
    padding: 26px 0 42px !important;
}

.nav-left,
.nav-right,
.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    flex-wrap: wrap;
}

.logo,
.nav-logo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 8px !important;
    display: grid !important;
    place-items: center !important;
    background:
        linear-gradient(145deg, rgba(111, 183, 214, .20), rgba(139, 117, 189, .12)),
        rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(145, 174, 205, .24);
    box-shadow: 0 0 26px rgba(111, 183, 214, .16), inset 0 1px 0 rgba(255, 255, 255, .10);
    clip-path: var(--ui-cut-small);
}

.logo img,
.nav-logo img {
    width: 29px !important;
    height: 29px !important;
    object-fit: contain;
}

.nav-title {
    font-family: "Space Grotesk", Inter, system-ui, sans-serif !important;
    font-size: clamp(21px, 1.85vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: transparent !important;
    background: linear-gradient(90deg, #a9f3df 0%, #8ed1eb 42%, #b9ace0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 22px rgba(111, 183, 214, .20);
}

.nav-sub,
.nav-subtitle {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    margin-top: 6px;
    padding: 5px 12px;
    color: rgba(237, 244, 251, .76) !important;
    background: rgba(255, 255, 255, .065);
    border: 1px solid rgba(145, 174, 205, .22);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

h1 {
    color: var(--ui-text) !important;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif !important;
    font-size: clamp(30px, 2.7vw, 50px) !important;
    line-height: .98 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .16), 0 0 24px rgba(111, 183, 214, .18);
}

h1::after {
    content: "";
    display: block;
    width: min(100%, 780px);
    height: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, transparent, rgba(139, 117, 189, .88), rgba(111, 183, 214, .78), transparent);
    box-shadow: 0 0 18px rgba(111, 183, 214, .26);
}

h2,
h3,
.panel-title,
.card-title,
.section-title,
.detail-title {
    color: var(--ui-text) !important;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif !important;
    letter-spacing: .01em !important;
}

.sub,
.helper,
.small-note,
.muted,
.section-sub,
.card-sub,
.metric-sub,
.card-subtitle,
.card-text {
    color: var(--ui-muted) !important;
}

.page-head,
.head {
    margin-bottom: 22px !important;
}

.panel,
.card,
.summary-card,
.metric,
.stat,
.box,
.info-item,
.budget-box,
.period-item,
.file-row,
.user-row,
.project-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    clip-path: var(--ui-cut);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026) 42%, rgba(111, 183, 214, .035)),
        linear-gradient(180deg, var(--ui-panel), rgba(8, 13, 23, .90)) !important;
    box-shadow: var(--ui-shadow), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(18px) saturate(130%);
}

.panel::after,
.card::after,
.summary-card::after,
.metric::after,
.stat::after,
.box::after,
.project-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 18% 82%, rgba(111, 183, 214, .10)),
        linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, .05) 7.3%, transparent 7.8% 82%, rgba(255, 255, 255, .035) 82.3%, transparent 82.8%);
    opacity: .58;
}

.panel,
.card {
    padding: clamp(18px, 1.35vw, 25px) !important;
}

.summary {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

.summary-card,
.metric {
    min-height: 118px;
    padding: 18px 18px 16px !important;
    --card-accent: var(--ui-cyan);
    border-color: color-mix(in srgb, var(--card-accent), transparent 50%) !important;
    box-shadow:
        0 18px 54px rgba(0, 0, 0, .36),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 28px color-mix(in srgb, var(--card-accent), transparent 84%) !important;
    clip-path: var(--ui-cut);
}

.summary-card:nth-child(1),
.metric:nth-child(1) { --card-accent: var(--ui-green); }
.summary-card:nth-child(2),
.metric:nth-child(2) { --card-accent: var(--ui-blue); }
.summary-card:nth-child(3),
.metric:nth-child(3) { --card-accent: var(--ui-violet); }
.summary-card:nth-child(4),
.metric:nth-child(4) { --card-accent: var(--ui-green); }
.summary-card:nth-child(5),
.metric:nth-child(5) { --card-accent: var(--ui-blue); }
.summary-card:nth-child(6),
.metric:nth-child(6) { --card-accent: var(--ui-blue); }
.summary-card:nth-child(7),
.metric:nth-child(7) { --card-accent: var(--ui-amber); }
.summary-card:nth-child(8),
.metric:nth-child(8) { --card-accent: var(--ui-red); }

.summary-card::before,
.metric::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--card-accent), transparent 70%), transparent 48%),
        linear-gradient(135deg, color-mix(in srgb, var(--card-accent), transparent 92%), transparent 62%);
    opacity: .90;
}

.summary-card > *,
.metric > * {
    position: relative;
    z-index: 1;
}

.summary-icon {
    width: 27px;
    height: 27px;
    margin-bottom: 13px;
    fill: none;
    stroke: var(--card-accent);
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--card-accent), transparent 46%));
}

.summary-k,
.metric .label,
.metric-k,
.stat-k,
.budget-box .k,
.metric-label,
th {
    color: rgba(237, 244, 251, .68) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.summary-v,
.metric .value,
.metric-v,
.stat-v,
.budget-box .v,
.metric-value {
    color: var(--ui-text) !important;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif !important;
    font-size: clamp(25px, 1.8vw, 33px) !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 18px rgba(255, 255, 255, .10);
}

.layout,
.workspace {
    display: grid;
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start;
}

body.layout,
body > .layout {
    display: block !important;
    grid-template-columns: none !important;
}

.split {
    gap: 18px !important;
}

.stats,
.budget-grid,
.info-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 14px !important;
}

.stat,
.budget-box,
.info-item {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .024)) !important;
    min-width: 0;
}

.stat {
    min-height: 88px;
}

.project-list,
.period-list,
.file-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 183, 214, .55) rgba(4, 7, 13, .3);
}

.project-item {
    color: var(--ui-text) !important;
    transition: border-color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.project-item:hover,
.project-item.active {
    transform: translateY(-1px);
    border-color: rgba(111, 183, 214, .68) !important;
    background:
        linear-gradient(145deg, rgba(95, 143, 199, .18), rgba(255, 255, 255, .040)) !important;
    box-shadow: 0 0 0 1px rgba(111, 183, 214, .24), 0 18px 38px rgba(0, 0, 0, .30) !important;
}

.project-name,
.detail-title,
.info-v {
    color: var(--ui-text) !important;
}

.project-client,
.project-meta,
.info-k {
    color: var(--ui-muted) !important;
}

.dot.ok {
    background: var(--ui-green) !important;
    box-shadow: 0 0 14px rgba(99, 201, 157, .34) !important;
}

.badge,
.count-chip,
.pill,
.paid-chip,
.flag,
.status-badge {
    border-radius: 0 !important;
    clip-path: var(--ui-cut-small);
    border: 1px solid rgba(145, 174, 205, .20) !important;
    background: rgba(255, 255, 255, .070) !important;
    color: rgba(237, 244, 251, .78) !important;
}

.badge.active,
.badge.ok {
    background: rgba(99, 201, 157, .16) !important;
    border-color: rgba(99, 201, 157, .32) !important;
    color: #d7f7e9 !important;
}

.flag,
.badge.warn {
    background: rgba(213, 154, 69, .14) !important;
    border-color: rgba(213, 154, 69, .30) !important;
    color: #f2dcba !important;
}

.alert,
.flash,
.danger-note {
    border-radius: 0 !important;
    clip-path: var(--ui-cut-small);
    backdrop-filter: blur(14px);
}

.flash.success,
.alert.success {
    background: rgba(99, 201, 157, .13) !important;
    border-color: rgba(99, 201, 157, .30) !important;
    color: #d8ffef !important;
}

.flash.error,
.alert.error,
.danger-note {
    background: rgba(219, 98, 107, .14) !important;
    border-color: rgba(219, 98, 107, .34) !important;
    color: #ffd9dd !important;
}

.nav-link,
.btn,
.btn.ghost,
.btn-primary,
.btn-danger,
.btn-ghost,
button,
input,
select,
textarea {
    letter-spacing: 0 !important;
    font: inherit;
}

.nav-link,
.btn,
.btn.ghost,
.btn-danger,
.btn-ghost,
.nav-link-main,
.btn-link {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 9px 16px !important;
    border-radius: 0 !important;
    clip-path: var(--ui-cut-small);
    border: 1px solid rgba(145, 174, 205, .24) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
    color: rgba(237, 244, 251, .90) !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.nav-link:hover,
.btn:hover,
.btn.ghost:hover,
.btn-ghost:hover,
.nav-link-main:hover,
.btn-link:hover {
    transform: translateY(-1px);
    border-color: rgba(111, 183, 214, .48) !important;
    background: rgba(255, 255, 255, .105) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .26), 0 0 22px rgba(111, 183, 214, .14) !important;
}

.btn.primary,
.btn-primary,
.btn.btn-primary {
    border: 1px solid rgba(111, 183, 214, .48) !important;
    background:
        linear-gradient(135deg, rgba(111, 183, 214, .95), rgba(139, 117, 189, .88)) !important;
    color: #07111d !important;
    font-weight: 900 !important;
    box-shadow: 0 16px 38px rgba(95, 143, 199, .24), 0 0 24px rgba(111, 183, 214, .18) !important;
}

.btn.danger,
.btn-danger {
    background: rgba(219, 98, 107, .18) !important;
    color: #ffe5e8 !important;
    border-color: rgba(219, 98, 107, .34) !important;
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    border-radius: 0 !important;
    clip-path: var(--ui-cut-small);
    border: 1px solid rgba(145, 174, 205, .20) !important;
    background: rgba(255, 255, 255, .070) !important;
    color: var(--ui-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

input::placeholder,
textarea::placeholder {
    color: rgba(237, 244, 251, .40) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(111, 183, 214, .62) !important;
    box-shadow: 0 0 0 3px rgba(111, 183, 214, .10), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    outline: none !important;
}

select,
option,
input[type="date"],
input[type="month"],
input[type="time"] {
    color-scheme: dark !important;
}

select,
input[type="date"],
input[type="month"],
input[type="time"] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
        rgba(8, 13, 25, .92) !important;
    color: var(--ui-text) !important;
    border-color: rgba(145, 174, 205, .24) !important;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(237, 244, 251, .82) 50%),
        linear-gradient(135deg, rgba(237, 244, 251, .82) 50%, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%) !important;
    background-position:
        calc(100% - 21px) 50%,
        calc(100% - 15px) 50%,
        0 0 !important;
    background-size:
        6px 6px,
        6px 6px,
        100% 100% !important;
    background-repeat: no-repeat !important;
}

option,
optgroup {
    background: #0b111d !important;
    color: #edf4fb !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.65) saturate(.75);
    opacity: .86;
    cursor: pointer;
}

table {
    width: 100% !important;
    border-collapse: collapse;
}

th,
td {
    border-color: rgba(145, 174, 205, .12) !important;
}

td {
    color: rgba(237, 244, 251, .88) !important;
}

.paid-strip {
    border-radius: 0 !important;
    clip-path: var(--ui-cut-small);
    border: 1px solid rgba(145, 174, 205, .18) !important;
    background:
        linear-gradient(90deg, rgba(139, 117, 189, .08), rgba(111, 183, 214, .065), rgba(255, 255, 255, .035)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
}

@media (min-width: 1500px) {
    body {
        font-size: 15px;
    }

    .layout,
    .workspace {
        grid-template-columns: minmax(360px, 410px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 1500px) {
    .summary {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1180px) {
    .layout,
    .workspace,
    .toolbar,
    .grid,
    .grid2,
    .row2,
    .split {
        grid-template-columns: 1fr !important;
    }

    .summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --ui-cut: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
    }

    body {
        font-size: 14px;
        background-size: 32px 32px, 32px 32px, auto, auto, auto, auto !important;
    }

    .nav,
    .container,
    .page {
        width: min(100% - 24px, var(--ui-page-max)) !important;
    }

    .nav {
        min-height: 66px;
        padding: 10px 0 !important;
    }

    .container {
        padding-top: 18px !important;
        padding-bottom: 28px !important;
    }

    .nav-title {
        font-size: clamp(20px, 8vw, 28px) !important;
    }

    .nav-sub,
    .nav-subtitle {
        min-height: 0;
        font-size: 12px;
        padding: 4px 9px;
    }

    .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .summary-card,
    .metric {
        min-height: 92px;
        padding: 13px 12px !important;
    }

    .summary-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 8px;
    }

    .summary-v,
    .metric .value,
    .metric-v,
    .stat-v,
    .budget-box .v,
    .metric-value {
        font-size: 22px !important;
    }

    .panel,
    .card {
        padding: 14px !important;
    }

    .project-list {
        max-height: none !important;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block !important;
        width: 100% !important;
    }

    thead,
    tr:first-child:has(th) {
        display: none !important;
    }

    tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid rgba(145, 174, 205, .18);
        background: rgba(255, 255, 255, .040);
        clip-path: var(--ui-cut-small);
    }

    td {
        display: grid !important;
        grid-template-columns: minmax(106px, 38%) minmax(0, 1fr);
        gap: 10px;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(145, 174, 205, .10) !important;
        text-align: left !important;
    }

    td::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 800;
    }
}

@media (max-width: 520px) {
    .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .nav-links {
        width: 100%;
    }

    .nav-link,
    .btn,
    .btn-primary,
    .btn-danger {
        width: 100%;
    }

    h1 {
        font-size: 28px !important;
    }
}

/*
   HUD reference pass.
   Closer to the supplied command-panel mockup, but with muted premium colors.
*/
:root {
    --ui-page-max: 1700px;
    --hud-ink: #03050a;
    --hud-panel: rgba(9, 13, 24, .88);
    --hud-panel-strong: rgba(14, 20, 34, .92);
    --hud-cyan: #6caec9;
    --hud-blue: #668fc7;
    --hud-violet: #8a70bd;
    --hud-magenta: #9b6ec3;
    --hud-green: #65c699;
    --hud-amber: #d19b52;
    --hud-red: #d7626d;
    --hud-line: rgba(141, 171, 205, .28);
    --hud-text: #f3f7fc;
}

body {
    background:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px),
        radial-gradient(circle at 8% 0%, rgba(108, 174, 201, .18), transparent 30rem),
        radial-gradient(circle at 48% 0%, rgba(138, 112, 189, .16), transparent 34rem),
        radial-gradient(circle at 86% 10%, rgba(102, 143, 199, .13), transparent 32rem),
        linear-gradient(145deg, #070b13 0%, #05070d 48%, #010205 100%) !important;
    background-size: 34px 34px, 34px 34px, auto, auto, auto, auto !important;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 20%, rgba(255, 255, 255, .045) 20.1%, transparent 20.8% 54%, rgba(108, 174, 201, .055) 54.1%, transparent 54.8%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 18%, transparent 78%, rgba(0, 0, 0, .32));
    opacity: .85;
}

.nav,
.container,
.page {
    width: min(var(--ui-page-max), calc(100% - clamp(28px, 3.2vw, 76px))) !important;
}

header {
    background:
        linear-gradient(180deg, rgba(2, 4, 10, .96), rgba(7, 10, 18, .86)),
        linear-gradient(90deg, rgba(108, 174, 201, .12), rgba(138, 112, 189, .10), rgba(108, 174, 201, .08)) !important;
    border-bottom-color: rgba(108, 174, 201, .24) !important;
}

.nav {
    min-height: 82px;
}

.nav-title {
    font-size: clamp(24px, 2.1vw, 38px) !important;
    letter-spacing: .025em !important;
    background: linear-gradient(90deg, #d7fff4 0%, #93d3e7 38%, #a997d6 72%, #e8edf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 14px rgba(108, 174, 201, .22));
}

h1 {
    width: fit-content;
    max-width: 100%;
    margin-inline: 0;
    color: transparent !important;
    background: linear-gradient(180deg, #ffffff 0%, #c8d7e7 36%, #70829a 54%, #f7fbff 74%, #9fc2d5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(108, 174, 201, .25));
}

h1::after {
    width: 100%;
    min-width: min(74vw, 760px);
    height: 3px;
    margin-top: 12px;
    background: linear-gradient(90deg, transparent, rgba(138, 112, 189, .78), rgba(108, 174, 201, .90), transparent);
    box-shadow: 0 0 16px rgba(108, 174, 201, .35), 0 0 24px rgba(138, 112, 189, .24);
}

.panel,
.card,
.summary-card,
.metric,
.stat,
.box,
.info-item,
.budget-box,
.period-item,
.file-row,
.user-row,
.project-item,
tr {
    --hud-accent: var(--hud-cyan);
    border-color: color-mix(in srgb, var(--hud-accent), transparent 58%) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .105), transparent 13%, transparent 72%, rgba(108, 174, 201, .075)),
        linear-gradient(150deg, rgba(138, 112, 189, .08), transparent 32%),
        linear-gradient(180deg, var(--hud-panel-strong), rgba(5, 8, 15, .96)) !important;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .52),
        inset 0 0 0 1px rgba(255, 255, 255, .055),
        inset 0 0 34px rgba(108, 174, 201, .045),
        0 0 22px color-mix(in srgb, var(--hud-accent), transparent 84%) !important;
}

.panel::before,
.card::before,
.summary-card::before,
.metric::before,
.stat::before,
.box::before,
.project-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--hud-accent), transparent 18%) top left / 34% 1px no-repeat,
        linear-gradient(90deg, transparent, var(--hud-accent)) top right / 34% 1px no-repeat,
        linear-gradient(90deg, var(--hud-accent), transparent 18%) bottom left / 28% 1px no-repeat,
        linear-gradient(90deg, transparent, var(--hud-accent)) bottom right / 28% 1px no-repeat,
        linear-gradient(180deg, var(--hud-accent), transparent 30%) top left / 1px 42% no-repeat,
        linear-gradient(180deg, transparent, var(--hud-accent)) bottom right / 1px 42% no-repeat,
        repeating-linear-gradient(168deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 12px);
    opacity: .60;
}

.panel::after,
.card::after,
.summary-card::after,
.metric::after,
.stat::after,
.box::after,
.project-item::after {
    z-index: 0;
    opacity: .46;
}

.panel > *,
.card > *,
.summary-card > *,
.metric > *,
.stat > *,
.box > *,
.project-item > * {
    position: relative;
    z-index: 1;
}

.summary {
    gap: 15px !important;
}

.summary-card,
.metric {
    min-height: 108px;
    padding: 16px 17px 15px !important;
}

.summary-card:nth-child(1) { --hud-accent: var(--hud-violet); --card-accent: var(--hud-violet); }
.summary-card:nth-child(2) { --hud-accent: var(--hud-magenta); --card-accent: var(--hud-magenta); }
.summary-card:nth-child(3) { --hud-accent: var(--hud-blue); --card-accent: var(--hud-blue); }
.summary-card:nth-child(4) { --hud-accent: var(--hud-violet); --card-accent: var(--hud-violet); }
.summary-card:nth-child(5) { --hud-accent: var(--hud-blue); --card-accent: var(--hud-blue); }
.summary-card:nth-child(6) { --hud-accent: var(--hud-cyan); --card-accent: var(--hud-cyan); }
.summary-card:nth-child(7) { --hud-accent: var(--hud-cyan); --card-accent: var(--hud-cyan); }
.summary-card:nth-child(8) { --hud-accent: var(--hud-red); --card-accent: var(--hud-red); }

.summary-icon {
    width: 30px;
    height: 30px;
    opacity: .92;
}

.summary-v,
.metric .value,
.metric-v,
.stat-v,
.budget-box .v,
.metric-value {
    font-size: clamp(23px, 1.7vw, 31px) !important;
}

.layout,
.workspace {
    grid-template-columns: minmax(315px, 350px) minmax(0, 1fr) !important;
}

.project-item.active,
.project-item:hover {
    --hud-accent: var(--hud-blue);
    border-color: rgba(102, 143, 199, .82) !important;
    box-shadow:
        0 0 0 1px rgba(102, 143, 199, .28),
        0 0 28px rgba(102, 143, 199, .18),
        inset 0 0 28px rgba(102, 143, 199, .09) !important;
}

.project-item .spark,
.sparkline {
    filter: drop-shadow(0 0 7px rgba(108, 174, 201, .26));
}

.btn.primary,
.btn-primary,
.btn.btn-primary,
.nav-link-main {
    background:
        linear-gradient(135deg, rgba(108, 174, 201, .96), rgba(138, 112, 189, .92)),
        linear-gradient(180deg, rgba(255, 255, 255, .26), transparent) !important;
    color: #05070d !important;
    text-shadow: none !important;
}

.nav-link,
.btn,
.btn.ghost,
.btn-danger,
.btn-ghost,
.nav-link-main,
.btn-link,
button {
    min-height: 38px;
    font-weight: 750;
    text-transform: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .055),
        0 0 18px rgba(108, 174, 201, .08) !important;
}

.ui-btn-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .92;
}

.ui-mobile-menu-toggle {
    display: none;
}

@media (max-width: 1500px) {
    .summary {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .nav {
        position: relative;
        min-height: 64px;
        align-items: center !important;
    }

    .nav-left {
        min-width: 0;
        flex: 1 1 auto;
    }

    .nav-title {
        font-size: clamp(21px, 7vw, 30px) !important;
        max-width: calc(100vw - 118px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ui-mobile-menu-toggle {
        width: 44px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(141, 171, 205, .32);
        color: var(--hud-text);
        background: rgba(12, 18, 30, .88);
        clip-path: var(--ui-cut-small);
    }

    .ui-mobile-menu-toggle span,
    .ui-mobile-menu-toggle span::before,
    .ui-mobile-menu-toggle span::after {
        content: "";
        width: 18px;
        height: 2px;
        display: block;
        background: currentColor;
        box-shadow: 0 0 8px rgba(108, 174, 201, .28);
    }

    .ui-mobile-menu-toggle span {
        position: relative;
    }

    .ui-mobile-menu-toggle span::before,
    .ui-mobile-menu-toggle span::after {
        position: absolute;
        left: 0;
    }

    .ui-mobile-menu-toggle span::before { top: -6px; }
    .ui-mobile-menu-toggle span::after { top: 6px; }

    .nav-links,
    .nav-right {
        display: none !important;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 40;
        grid-template-columns: 1fr;
        gap: 8px !important;
        padding: 10px;
        background: rgba(5, 8, 15, .96);
        border: 1px solid rgba(141, 171, 205, .28);
        clip-path: var(--ui-cut);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 24px rgba(108, 174, 201, .12);
        backdrop-filter: blur(18px);
    }

    .nav.is-menu-open .nav-links,
    .nav.is-menu-open .nav-right {
        display: grid !important;
    }

    .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .summary-card,
    .metric {
        min-height: 76px;
        padding: 10px 10px 9px !important;
    }

    .summary-icon {
        width: 18px;
        height: 18px;
        margin-bottom: 6px;
    }

    .summary-k,
    .metric .label,
    .metric-k,
    .stat-k,
    .budget-box .k,
    .metric-label,
    th {
        font-size: 9px !important;
        letter-spacing: .035em !important;
    }

    .summary-v,
    .metric .value,
    .metric-v,
    .stat-v,
    .budget-box .v,
    .metric-value {
        font-size: clamp(17px, 6vw, 23px) !important;
    }

    .layout,
    .workspace {
        display: block !important;
    }

    .layout > aside.panel,
    .workspace > aside.panel {
        margin-bottom: 12px;
    }

    .project-list {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(248px, 86vw);
        gap: 10px !important;
        max-height: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 8px !important;
        scroll-snap-type: x mandatory;
    }

    .project-item {
        scroll-snap-align: start;
        min-height: 112px;
    }

    .paid-strip {
        display: grid;
        gap: 8px;
    }
}

@media (max-width: 380px) {
    .summary {
        grid-template-columns: 1fr !important;
    }
}

/* Dashboard cockpit: project card mirrors the supplied reference layout. */
.dashboard-panel {
    --hud-accent: var(--hud-cyan);
    padding: 20px !important;
}

.dashboard-panel .detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 17px !important;
    padding: 0 4px 3px;
}

.dashboard-panel .detail-title {
    font-size: clamp(28px, 2.35vw, 42px) !important;
    line-height: .96 !important;
    color: var(--hud-text) !important;
    text-shadow: 0 0 18px rgba(138, 112, 189, .28);
}

.dashboard-panel .detail-sub {
    color: rgba(227, 236, 247, .72) !important;
    font-size: 15px;
}

.dashboard-panel .badges {
    justify-content: flex-end;
    gap: 9px;
}

.dashboard-panel .badge {
    min-height: 30px;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 800;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035)) !important;
    border-color: rgba(102, 143, 199, .38) !important;
    box-shadow: inset 0 0 18px rgba(102, 143, 199, .08);
}

.dashboard-panel .badge.active {
    border-color: rgba(101, 198, 153, .60) !important;
    background: rgba(101, 198, 153, .15) !important;
    color: #dff8ec !important;
}

.project-visual {
    position: relative;
    margin-bottom: 16px;
}

.project-visual::before {
    content: "";
    position: absolute;
    inset: -70px -20px auto 0;
    height: 132px;
    pointer-events: none;
    background:
        radial-gradient(circle at 6% 10%, rgba(138, 112, 189, .30), transparent 14rem),
        linear-gradient(112deg, rgba(138, 112, 189, .20), transparent 30%, rgba(108, 174, 201, .10));
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 78%);
    opacity: .62;
}

.finance-bars,
.finance-strip {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.finance-bar,
.hud-metric {
    --hud-accent: var(--hud-blue);
    position: relative;
    min-width: 0;
    min-height: 78px;
    padding: 13px 15px 12px;
    overflow: hidden;
    clip-path: var(--ui-cut-small);
    border: 1px solid color-mix(in srgb, var(--hud-accent), transparent 40%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 16% 72%, color-mix(in srgb, var(--hud-accent), transparent 89%)),
        rgba(4, 8, 17, .82);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .045),
        inset 0 0 26px color-mix(in srgb, var(--hud-accent), transparent 92%),
        0 0 20px color-mix(in srgb, var(--hud-accent), transparent 84%);
}

.finance-bar::before,
.hud-metric::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--hud-accent), transparent 42%) top left / 46% 1px no-repeat,
        linear-gradient(90deg, transparent, var(--hud-accent)) bottom right / 40% 1px no-repeat,
        repeating-linear-gradient(164deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 10px);
    opacity: .72;
}

.finance-bar::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 3px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--hud-accent), white 10%) 0 var(--bar-fill), rgba(255, 255, 255, .16) var(--bar-fill) 100%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--hud-accent), transparent 58%);
}

.finance-bar.blue,
.hud-metric.blue { --hud-accent: var(--hud-blue); }
.finance-bar.orange,
.hud-metric.orange { --hud-accent: var(--hud-amber); }
.hud-metric.violet { --hud-accent: var(--hud-violet); }
.hud-metric.cyan { --hud-accent: var(--hud-cyan); }

.finance-label,
.hud-metric-k {
    position: relative;
    z-index: 1;
    color: rgba(237, 244, 251, .70);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
}

.finance-value,
.hud-metric-v {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    color: var(--hud-text);
    font-family: "Space Grotesk", Inter, system-ui, sans-serif;
    font-size: clamp(18px, 1.25vw, 25px);
    font-weight: 900;
    line-height: 1.05;
    text-shadow: 0 0 16px rgba(255, 255, 255, .10);
}

.finance-value span,
.hud-metric-v span {
    color: rgba(237, 244, 251, .66);
    font-size: .66em;
    font-weight: 800;
}

.donut-card {
    display: none !important;
}

.dashboard-panel .split {
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(460px, 1.05fr);
    gap: 14px !important;
    margin-bottom: 12px;
}

.dashboard-panel .box {
    min-height: 154px;
}

.dashboard-panel .info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.dashboard-panel .info-item {
    min-height: 74px;
}

.dashboard-panel .counts {
    display: grid;
    grid-template-columns: repeat(6, minmax(70px, 1fr));
    align-items: center;
    gap: 12px;
}

.dashboard-panel .count-chip {
    --hud-accent: var(--hud-cyan);
    width: 76px;
    height: 76px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    padding: 8px !important;
    border-radius: 50% !important;
    clip-path: none !important;
    border-color: color-mix(in srgb, var(--hud-accent), transparent 35%) !important;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .08) 0 42%, rgba(4, 8, 17, .86) 43% 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .045),
        0 0 18px color-mix(in srgb, var(--hud-accent), transparent 72%) !important;
    color: rgba(237, 244, 251, .68) !important;
    font-size: 10px !important;
    line-height: 1.12;
    text-transform: uppercase;
}

.dashboard-panel .count-chip b {
    display: block;
    color: var(--hud-text);
    font-size: 22px;
    line-height: 1;
}

.quick-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    gap: 10px !important;
}

.quick-actions .btn {
    width: 100%;
}

@media (max-width: 1320px) {
    .finance-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-panel .split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-panel {
        padding: 14px !important;
    }

    .dashboard-panel .detail-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-panel .badges {
        justify-content: flex-start;
    }

    .finance-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .hud-metric {
        min-height: 70px;
        padding: 10px 11px;
    }

    .hud-metric-k {
        font-size: 9px;
    }

    .hud-metric-v {
        font-size: clamp(17px, 5vw, 21px);
    }

    .dashboard-panel .info-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-panel .counts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-panel .count-chip {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 430px) {
    .finance-strip {
        grid-template-columns: 1fr;
    }
}

/* Bright accent pass: same HUD shape, less gloomy surface. */
:root {
    --hud-cyan: #86e5ff;
    --hud-blue: #6aa7ff;
    --hud-violet: #a678ff;
    --hud-magenta: #c071ff;
    --hud-green: #62f0b1;
    --hud-amber: #ffbd63;
    --hud-red: #ff6e7a;
    --ui-cyan: var(--hud-cyan);
    --ui-blue: var(--hud-blue);
    --ui-violet: var(--hud-violet);
    --ui-green: var(--hud-green);
    --ui-amber: var(--hud-amber);
    --ui-red: var(--hud-red);
    --ui-panel: rgba(15, 24, 39, .90);
    --ui-panel-2: rgba(25, 36, 55, .84);
    --ui-panel-3: rgba(43, 54, 74, .58);
}

body {
    background:
        linear-gradient(rgba(134, 229, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(166, 120, 255, .018) 1px, transparent 1px),
        radial-gradient(circle at 6% 0%, rgba(134, 229, 255, .30), transparent 34rem),
        radial-gradient(circle at 45% 0%, rgba(192, 113, 255, .24), transparent 38rem),
        radial-gradient(circle at 88% 18%, rgba(106, 167, 255, .22), transparent 36rem),
        radial-gradient(circle at 58% 58%, rgba(98, 240, 177, .07), transparent 34rem),
        linear-gradient(145deg, #0a101b 0%, #070a13 42%, #02040a 100%) !important;
}

.panel,
.card,
.summary-card,
.metric,
.stat,
.box,
.info-item,
.budget-box,
.period-item,
.file-row,
.user-row,
.project-item,
tr {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 14%, transparent 70%, color-mix(in srgb, var(--hud-accent), transparent 84%)),
        linear-gradient(150deg, rgba(166, 120, 255, .13), transparent 34%),
        linear-gradient(180deg, rgba(24, 34, 53, .94), rgba(8, 13, 24, .96)) !important;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .48),
        inset 0 0 0 1px rgba(255, 255, 255, .075),
        inset 0 0 42px color-mix(in srgb, var(--hud-accent), transparent 90%),
        0 0 30px color-mix(in srgb, var(--hud-accent), transparent 78%) !important;
}

.summary-card,
.metric,
.hud-metric,
.finance-bar {
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .36),
        inset 0 0 0 1px rgba(255, 255, 255, .075),
        inset 0 0 34px color-mix(in srgb, var(--hud-accent), transparent 86%),
        0 0 34px color-mix(in srgb, var(--hud-accent), transparent 68%) !important;
}

.summary-icon {
    opacity: 1;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--card-accent), transparent 20%));
}

.summary-v,
.metric .value,
.metric-v,
.stat-v,
.budget-box .v,
.metric-value,
.hud-metric-v,
.finance-value {
    color: #fbfdff !important;
    text-shadow:
        0 0 14px rgba(255, 255, 255, .16),
        0 0 22px color-mix(in srgb, var(--hud-accent, var(--hud-cyan)), transparent 74%);
}

.summary-k,
.metric .label,
.metric-k,
.stat-k,
.budget-box .k,
.metric-label,
.hud-metric-k,
.finance-label,
th {
    color: rgba(240, 247, 255, .76) !important;
}

.project-item.active,
.project-item:hover {
    background:
        linear-gradient(135deg, rgba(106, 167, 255, .24), rgba(134, 229, 255, .08)),
        rgba(16, 25, 42, .92) !important;
    border-color: rgba(134, 229, 255, .90) !important;
    box-shadow:
        0 0 0 1px rgba(134, 229, 255, .32),
        0 0 36px rgba(106, 167, 255, .28),
        inset 0 0 34px rgba(106, 167, 255, .14) !important;
}

.badge.active,
.badge.ok {
    background: rgba(98, 240, 177, .22) !important;
    border-color: rgba(98, 240, 177, .62) !important;
    color: #edfff7 !important;
    box-shadow: 0 0 20px rgba(98, 240, 177, .22);
}

.btn.primary,
.btn-primary,
.btn.btn-primary,
.nav-link-main {
    background:
        linear-gradient(135deg, rgba(134, 229, 255, .98), rgba(166, 120, 255, .96)),
        linear-gradient(180deg, rgba(255, 255, 255, .32), transparent) !important;
    box-shadow:
        0 16px 40px rgba(106, 167, 255, .32),
        0 0 34px rgba(166, 120, 255, .26) !important;
}

.nav-link:hover,
.btn:hover,
.btn.ghost:hover,
.btn-ghost:hover,
.btn-link:hover {
    border-color: rgba(134, 229, 255, .70) !important;
    background: rgba(36, 49, 72, .84) !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .26),
        0 0 28px rgba(134, 229, 255, .22) !important;
}

.dashboard-panel .detail-title,
.nav-title {
    filter: drop-shadow(0 0 18px rgba(134, 229, 255, .34));
}

.paid-chip {
    background: rgba(98, 240, 177, .18) !important;
    border-color: rgba(98, 240, 177, .48) !important;
    color: #edfff7 !important;
}

.dashboard-panel .count-chip {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .075),
        0 0 26px color-mix(in srgb, var(--hud-accent), transparent 58%) !important;
}

/* Concept dashboard: premium command panel based on the final reference. */
body:has(.concept-shell) {
    background:
        linear-gradient(115deg, rgba(141, 92, 246, .08), transparent 28%),
        linear-gradient(245deg, rgba(41, 216, 198, .07), transparent 32%),
        linear-gradient(180deg, #050813 0%, #080b15 42%, #03050a 100%) !important;
    color: #f4f7ff !important;
}

body:has(.concept-shell) header {
    border-bottom: 0 !important;
    background: rgba(4, 7, 14, .72) !important;
    backdrop-filter: blur(22px);
}

body:has(.concept-shell) .nav {
    max-width: 1700px !important;
    padding: 18px 18px 10px !important;
}

body:has(.concept-shell) .nav-title {
    font-size: clamp(24px, 2vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: transparent !important;
    background: linear-gradient(90deg, #3ff2df 0%, #7fd1ff 48%, #a885ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(41, 216, 198, .32));
}

body:has(.concept-shell) .nav-sub {
    display: inline-flex;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(168, 177, 205, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: rgba(238, 244, 255, .72) !important;
}

body:has(.concept-shell) .nav-link {
    min-height: 45px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(174, 184, 213, .22) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
        rgba(22, 27, 41, .86) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 12px 30px rgba(0, 0, 0, .28) !important;
    clip-path: none !important;
}

.concept-dashboard {
    max-width: 1700px !important;
    width: 100% !important;
    padding: 14px 18px 18px !important;
}

.concept-dashboard > .page-head,
.concept-dashboard > .summary,
.concept-dashboard > .paid-strip,
.concept-dashboard > .layout {
    display: none !important;
}

.concept-shell {
    --concept-bg: rgba(9, 13, 23, .88);
    --concept-panel: rgba(13, 18, 31, .92);
    --concept-panel-2: rgba(19, 26, 42, .82);
    --concept-border: rgba(159, 169, 199, .22);
    --concept-soft: rgba(169, 178, 209, .72);
    --concept-violet: #9b62ff;
    --concept-teal: #26d8c7;
    --concept-blue: #4d9dff;
    --concept-amber: #f3bd4d;
    --concept-green: #58e5a8;
    --concept-red: #ff6873;
    position: relative;
    isolation: isolate;
}

.concept-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 11px),
        linear-gradient(90deg, rgba(41, 216, 198, .06), transparent 22%, rgba(155, 98, 255, .06) 74%, transparent),
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 18%);
    opacity: .62;
}

.concept-grid {
    display: grid;
    grid-template-columns: minmax(300px, 368px) minmax(0, 1fr) minmax(330px, 408px);
    gap: 14px;
    align-items: stretch;
}

.concept-left,
.concept-center,
.concept-right {
    display: grid;
    gap: 14px;
    align-content: start;
}

.concept-card {
    position: relative;
    overflow: hidden;
    border-radius: 19px !important;
    border: 1px solid var(--concept-border) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 28%),
        linear-gradient(180deg, rgba(15, 21, 35, .95), rgba(7, 11, 20, .95)) !important;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .46),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
    clip-path: none !important;
}

.concept-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 10px),
        linear-gradient(120deg, rgba(155, 98, 255, .08), transparent 38%, rgba(41, 216, 198, .07));
    opacity: .45;
}

.concept-card > * {
    position: relative;
    z-index: 1;
}

.analytics-dashboard {
    display: none !important;
    gap: 18px;
    margin-bottom: 14px;
}

.analytics-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.analytics-head h1 {
    margin: 0;
    color: #f8fbff;
    font-size: clamp(38px, 4.2vw, 68px);
    line-height: .95;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 28px rgba(117, 172, 255, .20);
}

.analytics-head p {
    max-width: 740px;
    margin: 12px 0 0;
    color: rgba(210, 219, 246, .72);
    font-size: 15px;
}

.analytics-period {
    min-width: 238px;
    min-height: 58px;
    align-items: center;
    padding-inline: 16px;
    border-color: rgba(38, 216, 199, .65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 26px rgba(38, 216, 199, .20);
}

.period-calendar {
    width: 24px;
    height: 24px;
    color: #26d8c7;
}

.period-calendar svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analytics-period input {
    min-width: 145px;
    height: 56px;
    font-size: 18px;
    font-weight: 800;
}

.month-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    min-height: 112px;
    padding: 0 10px 8px;
}

.month-rail::before {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    bottom: 28px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #26d8c7 8%, #4d9dff 42%, #ff4bc5 67%, #8e57ff 86%, transparent);
    box-shadow: 0 0 20px rgba(38, 216, 199, .28);
}

.month-node {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    color: rgba(238, 244, 255, .86);
    font-weight: 800;
    text-transform: uppercase;
}

.month-node span {
    position: relative;
    z-index: 1;
    font-size: 15px;
}

.month-node i {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #0b1020;
    border: 3px solid #4d9dff;
    box-shadow: 0 0 16px rgba(77, 157, 255, .75);
}

.month-node.is-current span {
    color: #26d8c7;
}

.month-node.is-selected span {
    color: #fff;
    font-size: 18px;
}

.month-node.is-selected i {
    width: 48px;
    height: 48px;
    border: 0;
    background:
        radial-gradient(circle, #fff 0 20%, rgba(255, 75, 197, .95) 22% 42%, rgba(255, 75, 197, .18) 43% 100%);
    box-shadow:
        0 0 0 1px rgba(255, 75, 197, .62),
        0 0 44px rgba(255, 75, 197, .82),
        0 0 80px rgba(255, 75, 197, .36);
}

.analytics-stage {
    display: grid;
    grid-template-columns: minmax(390px, 1fr) minmax(360px, 430px) minmax(360px, 448px);
    gap: 18px;
    align-items: stretch;
}

.income-panel,
.paid-orbit-panel,
.analytics-mini-card,
.month-summary-strip {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(159, 169, 199, .22);
    border-radius: 18px;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, rgba(255, 255, 255, .075), transparent 30%),
        rgba(9, 14, 26, .88);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.income-panel {
    min-height: 386px;
    padding: 26px 30px 22px;
}

.income-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
}

.income-copy span,
.analytics-mini-card span {
    color: rgba(229, 235, 255, .80);
    font-size: 15px;
    font-weight: 800;
}

.income-copy strong {
    color: #ff95df;
    font-size: clamp(44px, 4.4vw, 72px);
    line-height: .98;
    font-weight: 900;
    text-shadow: 0 0 32px rgba(255, 75, 197, .28);
}

.income-copy strong em,
.analytics-mini-card strong em {
    color: rgba(234, 241, 255, .76);
    font-size: .42em;
    font-style: normal;
}

.delta {
    width: fit-content;
    color: #45ffe1;
    font-size: 15px;
    font-weight: 800;
}

.delta.down {
    color: #ff74c9;
}

.income-spark {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 42px;
    width: calc(100% - 52px);
    height: 190px;
}

.spark-fill {
    fill: url(#incomeFill);
}

.spark-line {
    fill: none;
    stroke: url(#incomeSpark);
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 12px rgba(255, 75, 197, .70));
}

.analytics-summary-pills {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 2;
}

.analytics-summary-pills span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 11px;
    border-radius: 999px;
    color: rgba(224, 232, 255, .82);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(159, 169, 199, .16);
}

.analytics-summary-pills b {
    color: #fff;
}

.paid-orbit-panel {
    min-height: 386px;
    display: grid;
    place-items: center;
}

.paid-orbit-panel::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px dashed rgba(77, 157, 255, .28);
    border-radius: 50%;
}

.paid-orbit {
    position: relative;
    width: 274px;
    height: 274px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(9, 14, 26, .96) 0 49%, transparent 50%),
        conic-gradient(#26d8c7 0 var(--paid-ratio), #8e57ff var(--paid-ratio) 76%, #ff4bc5 76% 100%);
    box-shadow:
        0 0 52px rgba(77, 157, 255, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.paid-orbit span {
    color: rgba(218, 226, 250, .84);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 900;
}

.paid-orbit strong {
    color: #fff;
    font-size: 44px;
    line-height: 1;
    font-weight: 900;
}

.paid-orbit em {
    color: rgba(232, 238, 255, .82);
    font-style: normal;
    font-weight: 800;
}

.paid-orbit b {
    color: #26d8c7;
    font-size: 22px;
}

.orbit-chip {
    position: absolute;
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 104px;
    min-height: 104px;
    padding: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 23, 39, .96), rgba(7, 10, 18, .94));
    border: 1px solid rgba(77, 157, 255, .32);
    box-shadow: 0 0 26px rgba(77, 157, 255, .22);
}

.orbit-chip span {
    color: rgba(218, 226, 250, .72);
    font-size: 12px;
    text-transform: uppercase;
}

.orbit-chip b {
    color: #fff;
    font-size: 22px;
}

.orbit-a { top: 18px; left: 28px; }
.orbit-b { left: 10px; bottom: 26px; border-color: rgba(155, 98, 255, .42); box-shadow: 0 0 26px rgba(155, 98, 255, .22); }
.orbit-c { right: 10px; bottom: 26px; border-color: rgba(255, 75, 197, .38); box-shadow: 0 0 26px rgba(255, 75, 197, .18); }

.analytics-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.analytics-mini-card {
    --mini: #26d8c7;
    min-height: 186px;
    padding: 18px;
    border-color: color-mix(in srgb, var(--mini), transparent 60%);
}

.analytics-mini-card.accent-violet { --mini: #9b62ff; }
.analytics-mini-card.accent-magenta { --mini: #ff4bc5; }
.analytics-mini-card.accent-blue { --mini: #4d9dff; }
.analytics-mini-card.accent-cyan { --mini: #26d8c7; }
.analytics-mini-card.accent-teal { --mini: #29d8c6; }

.analytics-mini-card strong {
    display: block;
    margin-top: 14px;
    color: #fff;
    font-size: clamp(27px, 2vw, 38px);
    line-height: 1;
    font-weight: 900;
}

.analytics-mini-card svg {
    width: 100%;
    height: 54px;
    margin-top: 10px;
}

.analytics-mini-card svg path {
    fill: none;
    stroke: var(--mini);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mini), transparent 35%));
}

.analytics-mini-card .delta {
    margin-top: 6px;
    display: block;
    font-size: 13px;
}

.month-summary-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
}

.month-summary-strip span {
    color: rgba(213, 222, 248, .76);
}

.month-summary-strip b {
    padding: 7px 11px;
    border-radius: 999px;
    color: #efffff;
    background: rgba(38, 216, 199, .12);
    border: 1px solid rgba(38, 216, 199, .28);
}

.month-summary-strip em {
    margin-left: auto;
    color: #ffbce9;
    font-style: normal;
    font-weight: 900;
}

.concept-card-title {
    font-size: 18px;
    line-height: 1.15;
    font-weight: 800;
    color: #f7f9ff;
}

.muted-title {
    color: rgba(202, 207, 230, .72);
}

.concept-picker,
.concept-base,
.concept-payments,
.concept-accruals,
.concept-related {
    padding: 22px 14px 16px;
}

.concept-project-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.concept-project-card {
    --pc: var(--concept-violet);
    min-height: 84px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 10px;
    color: #f8fbff;
    border: 1px solid color-mix(in srgb, var(--pc), transparent 46%);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pc), transparent 44%), transparent 68%),
        rgba(13, 20, 34, .90);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 14px 34px rgba(0, 0, 0, .30),
        0 0 32px color-mix(in srgb, var(--pc), transparent 82%);
}

.concept-project-card.theme-teal { --pc: var(--concept-teal); }
.concept-project-card.theme-amber { --pc: var(--concept-amber); }
.concept-project-card.theme-blue { --pc: var(--concept-blue); }

.concept-project-card.is-active {
    border-color: color-mix(in srgb, var(--pc), transparent 18%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 18px 42px rgba(0, 0, 0, .34),
        0 0 34px color-mix(in srgb, var(--pc), transparent 65%);
}

.concept-project-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--pc);
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.concept-letter-icon {
    color: #fff;
    font-family: "Space Grotesk", Inter, system-ui, sans-serif;
    font-size: 23px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 18px color-mix(in srgb, var(--pc), transparent 25%);
    background:
        radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--pc), transparent 45%), transparent 48%),
        rgba(0, 0, 0, .22);
    border: 1px solid color-mix(in srgb, var(--pc), transparent 52%);
}

.concept-project-icon svg,
.concept-token-icon svg,
.concept-related-item svg,
.concept-action svg,
.concept-hex-logo svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-project-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.concept-project-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
}

.concept-project-copy em {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc), transparent 72%);
    color: #f8fbff;
    font-size: 12px;
    font-style: normal;
}

.concept-chevron {
    display: none;
}

.concept-create-project {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 10px;
    border: 1px solid rgba(172, 181, 210, .18);
    background: rgba(255, 255, 255, .045);
    color: rgba(238, 242, 255, .82);
    font-weight: 700;
}

.concept-create-project span {
    color: #b69cff;
    font-size: 22px;
    line-height: 1;
}

.concept-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.concept-info-dot {
    position: relative;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(168, 177, 205, .45);
    background: rgba(10, 18, 34, .72);
    color: rgba(220, 227, 249, .82);
    font-size: 13px;
    font-weight: 900;
    cursor: help;
}

.concept-info-dot::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(280px, 72vw);
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(41, 216, 198, .28);
    background: rgba(5, 10, 20, .96);
    color: #e8efff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .46);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
    z-index: 8;
}

.concept-info-dot:hover::after,
.concept-info-dot:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.concept-token-box {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(168, 177, 205, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
}

.concept-token-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #a56cff;
    background: rgba(155, 98, 255, .18);
}

.concept-token-icon img,
.concept-related-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(141, 92, 246, .30));
}

.concept-token-box small,
.concept-info-list span,
.concept-tariff span,
.concept-kpi-block em,
.concept-legend-row span,
.concept-legend-row em,
.concept-related-item em {
    color: var(--concept-soft);
}

.concept-token-box strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.concept-info-list {
    margin-top: 10px;
    border: 1px solid rgba(168, 177, 205, .12);
    border-radius: 10px;
    overflow: hidden;
}

.concept-info-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-top: 1px solid rgba(168, 177, 205, .10);
}

.concept-info-list div:first-child {
    border-top: 0;
}

.concept-info-list b {
    color: #38f1d8;
}

.concept-kpis {
    min-height: 0;
    padding: 24px 28px 26px;
}

.concept-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 26px;
}

.concept-period {
    display: flex;
    min-height: 50px;
    border: 1px solid rgba(38, 216, 199, .46);
    border-radius: 15px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(38, 216, 199, .12), rgba(155, 98, 255, .08)),
        rgba(255, 255, 255, .055);
    box-shadow: 0 0 22px rgba(38, 216, 199, .10), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.concept-period input,
.concept-period button {
    border: 0;
    background: transparent;
    color: #f5f8ff;
    outline: 0;
}

.concept-period input {
    min-width: 162px;
    padding: 0 14px;
    font-weight: 900;
}

.concept-period button {
    width: 44px;
    font-size: 20px;
    cursor: pointer;
    border-left: 1px solid rgba(171, 181, 211, .16);
}

.concept-kpi-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.concept-divider {
    height: 154px;
    background: linear-gradient(180deg, transparent, rgba(171, 181, 211, .32), transparent);
}

.concept-kpi-block {
    --line: var(--concept-violet);
    display: grid;
    min-width: 0;
}

.concept-kpi-block.accent-teal { --line: var(--concept-teal); }

.concept-kpi-block span {
    color: var(--line);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
}

.concept-kpi-block strong {
    margin-top: 12px;
    color: #fff;
    font-size: clamp(56px, 5.2vw, 90px);
    line-height: .92;
    font-weight: 900;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, .18),
        0 22px 44px rgba(0, 0, 0, .45);
    white-space: nowrap;
}

.concept-kpi-block em {
    margin-top: 12px;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.concept-kpi-block i {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 28px;
    border-radius: 999px;
    background: var(--line);
    box-shadow: 0 0 20px color-mix(in srgb, var(--line), transparent 35%);
}

.concept-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.concept-overview-item {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(171, 181, 211, .14);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 54%),
        rgba(255, 255, 255, .035);
}

.concept-overview-item span,
.concept-paid-inline span {
    display: block;
    color: rgba(220, 228, 250, .64);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.concept-overview-item strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: clamp(18px, 1.35vw, 24px);
    line-height: 1.05;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.concept-overview-item em {
    color: rgba(229, 237, 255, .68);
    font-size: .62em;
    font-style: normal;
}

.concept-paid-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(171, 181, 211, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.concept-paid-inline b {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #d7fff7;
    background: rgba(38, 216, 199, .12);
    border: 1px solid rgba(38, 216, 199, .20);
    font-size: 12px;
}

.concept-attention-strip {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(245, 158, 11, .20);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(245, 158, 11, .12), transparent 45%),
        rgba(255, 255, 255, .026);
    scrollbar-width: thin;
}

.concept-attention-title {
    flex: 0 0 auto;
    color: #ffe0a3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.concept-attention-chip {
    flex: 1 1 0;
    min-width: 220px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 11px;
    color: #fff7df;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .14);
}

.concept-attention-chip + .concept-attention-chip {
    margin-top: 0;
}

.concept-attention-chip strong,
.concept-attention-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.concept-attention-chip strong {
    font-size: 12px;
}

.concept-attention-chip span {
    color: rgba(255, 235, 194, .78);
    font-size: 11px;
}

.concept-project-hero {
    min-height: 370px;
    padding: 24px 26px 30px;
}

.concept-hero-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 24px;
}

.concept-hex-logo {
    width: 82px;
    height: 92px;
    color: #b07cff;
    filter: drop-shadow(0 0 22px rgba(155, 98, 255, .38));
}

.concept-hex-logo svg {
    stroke-width: 2.3;
}

.concept-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(171, 181, 211, .16);
}

.concept-hero-top h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 3vw, 48px);
    line-height: 1;
    font-weight: 900;
}

.concept-hero-top p {
    margin: 10px 0 0;
    color: rgba(214, 221, 242, .78);
    font-size: 14px;
}

.concept-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.concept-badges span {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 12px;
    color: #dfebff;
    background: rgba(86, 105, 145, .18);
    border: 1px solid rgba(123, 155, 231, .26);
    font-size: 13px;
    font-weight: 800;
}

.concept-badges span.ok {
    color: #9cffc6;
    background: rgba(38, 216, 135, .13);
    border-color: rgba(88, 229, 168, .42);
}

.concept-tariff {
    margin-top: 22px;
    display: grid;
    gap: 7px;
}

.concept-tariff span {
    text-transform: uppercase;
    font-weight: 800;
}

.concept-tariff em {
    color: rgba(220, 227, 249, .86);
    font-style: normal;
    font-size: 21px;
    font-weight: 800;
}

.concept-tariff strong {
    color: #fff;
    font-size: clamp(58px, 5.5vw, 92px);
    line-height: .94;
    font-weight: 900;
}

.concept-tariff small {
    color: #a675ff;
    font-size: 22px;
}

.concept-project-settings {
    max-width: min(690px, 82%);
    margin-top: 10px;
}

.concept-settings-title {
    margin-bottom: 7px;
    color: rgba(237, 244, 251, .68);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.concept-tariff-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}

.concept-tariff-chip {
    --settings-accent: var(--concept-cyan);
    position: relative;
    min-height: 62px;
    border: 1px solid rgba(171, 181, 211, .20);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.024)),
        rgba(5, 10, 19, .72);
    padding: 9px 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
}

.concept-tariff-chip::before {
    content: "";
    position: absolute;
    inset: -1px auto -1px -1px;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--settings-accent), transparent);
    opacity: .9;
}

.concept-tariff-chip.theme-1 { --settings-accent: var(--concept-cyan); }
.concept-tariff-chip.theme-2 { --settings-accent: var(--concept-blue); }
.concept-tariff-chip.theme-3 { --settings-accent: var(--concept-violet); }
.concept-tariff-chip.theme-4 { --settings-accent: var(--concept-magenta); }

.concept-tariff-chip span {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(214, 221, 242, .68);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.concept-tariff-chip b {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.concept-wave {
    position: absolute;
    right: 28px;
    bottom: 0;
    width: 55%;
    height: 72%;
    color: var(--concept-violet);
    opacity: .92;
}

.concept-wave .wave-grid {
    fill: none;
    stroke: rgba(126, 88, 250, .16);
    stroke-width: 1;
}

.concept-wave .wave-main {
    fill: none;
    stroke: url(#conceptWave);
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 13px rgba(155, 98, 255, .72));
}

.concept-wave circle {
    fill: #b781ff;
    filter: drop-shadow(0 0 10px rgba(155, 98, 255, .90));
}

.concept-donut-wrap {
    display: grid;
    place-items: center;
    padding: 16px 0 8px;
}

.concept-donut {
    position: relative;
    width: 248px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--donut-gradient));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        0 0 32px rgba(41, 216, 198, .15),
        0 0 26px rgba(155, 98, 255, .12);
}

.concept-donut::before {
    content: "";
    position: absolute;
    width: 154px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(12, 17, 29, .92), #060a13 72%);
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(168, 177, 205, .15);
}

.concept-donut div {
    position: relative;
    z-index: 1;
    text-align: center;
    display: grid;
    gap: 4px;
}

.concept-donut span,
.concept-donut em {
    color: var(--concept-soft);
    font-style: normal;
    text-transform: uppercase;
}

.concept-donut strong {
    color: #fff;
    font-size: 31px;
    line-height: 1;
    font-weight: 900;
}

.concept-donut-wrap-compact {
    padding: 12px 0 7px;
}

.concept-donut-compact {
    width: 190px;
}

.concept-donut-compact::before {
    width: 118px;
}

.concept-donut-compact strong {
    font-size: 24px;
}

.concept-accruals .concept-card-title {
    color: #dffdf9;
}

.concept-legend-compact {
    gap: 8px;
}

.concept-legend-compact .concept-legend-row {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    gap: 8px;
    font-size: 12px;
}

.concept-legend {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.concept-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 52px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.concept-legend-row span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.concept-legend-row span i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 12px var(--c);
    flex: 0 0 auto;
}

.concept-legend-row b,
.concept-legend-total b {
    color: #fff;
    white-space: nowrap;
}

.concept-legend-row em {
    text-align: right;
    font-style: normal;
}

.concept-legend-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    padding-top: 13px;
    border-top: 1px solid rgba(171, 181, 211, .15);
    font-weight: 900;
}

.concept-related {
    min-height: 258px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px;
}

.concept-related-item {
    --ri: var(--concept-violet);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 112px;
    border-left: 1px solid rgba(171, 181, 211, .14);
    border-top: 1px solid rgba(171, 181, 211, .14);
}

.concept-related-item:nth-child(-n+3) { border-top: 0; }
.concept-related-item:nth-child(3n+1) { border-left: 0; }
.concept-related-item.theme-teal { --ri: var(--concept-teal); }
.concept-related-item.theme-amber { --ri: var(--concept-amber); }
.concept-related-item.theme-blue { --ri: var(--concept-blue); }

.concept-related-item span {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ri);
    border: 1px solid color-mix(in srgb, var(--ri), transparent 20%);
    background: rgba(0, 0, 0, .23);
    box-shadow: 0 0 22px color-mix(in srgb, var(--ri), transparent 70%);
}

.concept-related-item svg {
    width: 30px;
    height: 30px;
}

.concept-related-item strong {
    color: #fff;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
}

.concept-action-rail {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1.25fr 1fr 1fr 1fr 1fr 44px;
    gap: 16px;
    margin-top: 14px;
    padding: 16px 24px;
    border-radius: 19px;
    border: 1px solid var(--concept-border);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 30%),
        rgba(12, 17, 29, .92);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.concept-action-rail.concept-action-rail-wide {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
}

.concept-action-rail-wide .concept-action {
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    gap: 10px;
    text-align: center;
    line-height: 1.12;
    font-size: 15px;
}

.concept-action-rail-wide .concept-action svg {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
}

.concept-action,
.concept-action-more {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 17px;
    border: 1px solid rgba(171, 181, 211, .18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent),
        rgba(11, 17, 30, .88);
    color: #f6f8ff;
    font-weight: 900;
    font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.concept-action svg {
    width: 32px;
    height: 32px;
    color: #4d9dff;
}

.concept-action.active {
    color: #f6edff;
    border-color: rgba(155, 98, 255, .45);
    background:
        linear-gradient(135deg, rgba(155, 98, 255, .36), rgba(155, 98, 255, .08)),
        rgba(15, 18, 36, .92);
    box-shadow:
        0 0 28px rgba(155, 98, 255, .22),
        inset 0 1px 0 rgba(255, 255, 255, .10);
}

.concept-action.active svg {
    color: #b57cff;
}

.concept-action-more {
    font-size: 36px;
    color: rgba(216, 224, 248, .58);
}

.concept-empty {
    padding: 22px;
    color: var(--concept-soft);
}

@media (max-width: 1420px) {
    .analytics-stage {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    }

    .analytics-card-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .concept-grid {
        grid-template-columns: 330px minmax(0, 1fr);
    }

    .concept-right {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    body:has(.concept-shell) .nav {
        padding-inline: 14px !important;
    }

    .analytics-head {
        display: grid;
    }

    .analytics-stage {
        grid-template-columns: 1fr;
    }

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

    .paid-orbit-panel {
        min-height: 350px;
    }

    .concept-dashboard {
        padding-inline: 14px !important;
    }

    .concept-grid {
        grid-template-columns: 1fr;
    }

    .concept-right {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .concept-action-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .concept-action-more {
        display: none;
    }
}

@media (max-width: 760px) {
    body:has(.concept-shell) .nav {
        display: grid !important;
        gap: 12px;
    }

    body:has(.concept-shell) .nav-links {
        display: none !important;
    }

    .concept-dashboard {
        padding: 10px 10px 14px !important;
    }

    .analytics-dashboard {
        gap: 12px;
    }

    .analytics-head h1 {
        font-size: clamp(32px, 11vw, 48px);
    }

    .analytics-period {
        min-width: 0;
        width: 100%;
    }

    .month-rail {
        display: flex;
        min-height: 78px;
        gap: 26px;
        overflow-x: auto;
        padding: 0 12px 10px;
        scroll-snap-type: x mandatory;
    }

    .month-rail::before {
        left: 0;
        right: auto;
        width: 760px;
    }

    .month-node {
        min-width: 62px;
        scroll-snap-align: center;
    }

    .month-node.is-selected i {
        width: 38px;
        height: 38px;
    }

    .income-panel {
        min-height: 320px;
        padding: 18px;
    }

    .income-copy strong {
        font-size: clamp(36px, 13vw, 54px);
    }

    .income-spark {
        left: 18px;
        right: 18px;
        width: calc(100% - 36px);
        height: 150px;
        bottom: 58px;
    }

    .analytics-summary-pills {
        left: 18px;
        right: 18px;
        bottom: 14px;
    }

    .paid-orbit-panel {
        min-height: 300px;
    }

    .paid-orbit {
        width: 224px;
        height: 224px;
    }

    .paid-orbit strong {
        font-size: 34px;
    }

    .orbit-chip {
        display: none;
    }

    .analytics-card-grid {
        grid-template-columns: 1fr;
    }

    .analytics-mini-card {
        min-height: 142px;
    }

    .month-summary-strip {
        display: grid;
    }

    .month-summary-strip em {
        margin-left: 0;
    }

    .concept-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .concept-left,
    .concept-center,
    .concept-right {
        display: contents;
    }

    .concept-kpis { order: 1; }
    .concept-picker { order: 2; }
    .concept-project-hero { order: 3; }
    .concept-payments { order: 4; }
    .concept-accruals { order: 5; }
    .concept-related { order: 6; }
    .concept-base { order: 7; }
    .concept-action-rail { order: 8; }

    .concept-card {
        border-radius: 17px !important;
    }

    .concept-picker,
    .concept-base,
    .concept-payments,
    .concept-accruals,
    .concept-project-hero,
    .concept-kpis {
        padding: 16px 14px;
    }

    .concept-kpis {
        min-height: 0;
    }

    .concept-kpi-head {
        margin-bottom: 18px;
        align-items: center;
    }

    .concept-kpi-split {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .concept-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    .concept-paid-inline {
        align-items: stretch;
    }

    .concept-attention-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .concept-attention-chip {
        flex: none;
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .concept-divider {
        display: none;
    }

    .concept-kpi-block strong {
        font-size: clamp(42px, 15vw, 58px);
        white-space: normal;
    }

    .concept-kpi-block i {
        margin-top: 15px;
    }

    .concept-project-list {
        margin-top: 13px;
        gap: 9px;
    }

    .concept-project-card {
        min-height: 70px;
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 10px 11px;
        gap: 10px;
    }

    .concept-project-icon {
        width: 39px;
        height: 39px;
        border-radius: 13px;
        font-size: 19px;
    }

    .concept-hero-main {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .concept-hex-logo {
        display: none;
    }

    .concept-hero-top {
        display: grid;
        padding-bottom: 15px;
    }

    .concept-hero-top h2 {
        font-size: 32px;
    }

    .concept-badges {
        justify-content: flex-start;
        gap: 7px;
    }

    .concept-badges span {
        min-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .concept-tariff strong {
        font-size: clamp(50px, 17vw, 68px);
    }

    .concept-wave {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 130px;
        margin-top: -14px;
    }

    .concept-donut {
        width: min(240px, 72vw);
    }

    .concept-legend-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .concept-legend-row em {
        display: none;
    }

    .concept-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    .concept-related-item {
        min-height: 96px;
    }

    .concept-related-item:nth-child(-n+3),
    .concept-related-item:nth-child(3n+1) {
        border-left: 1px solid rgba(171, 181, 211, .14);
        border-top: 1px solid rgba(171, 181, 211, .14);
    }

    .concept-related-item:nth-child(-n+2) { border-top: 0; }
    .concept-related-item:nth-child(2n+1) { border-left: 0; }

    .concept-action-rail {
        display: flex;
        overflow-x: auto;
        padding: 12px;
        gap: 10px;
        scroll-snap-type: x mandatory;
    }

    .concept-action {
        flex: 0 0 180px;
        min-height: 62px;
        font-size: 15px;
        scroll-snap-align: start;
    }
}

@media (max-width: 430px) {
    .concept-kpi-head {
        display: grid;
    }

    .concept-period {
        width: 100%;
    }

    .concept-period input {
        width: 100%;
    }

    .concept-project-copy strong {
        font-size: 15px;
    }

    .concept-hero-top h2 {
        font-size: 28px;
    }
}

/* Same visual material for the rest of the product while each page gets its own layout pass. */
body:not(:has(.concept-shell)) {
    background:
        linear-gradient(115deg, rgba(141, 92, 246, .08), transparent 30%),
        linear-gradient(245deg, rgba(41, 216, 198, .07), transparent 34%),
        linear-gradient(180deg, #050813 0%, #080b15 44%, #03050a 100%) !important;
}

body:not(:has(.concept-shell)) .container,
body:not(:has(.concept-shell)) .nav {
    max-width: 1700px !important;
    width: 100% !important;
}

body:not(:has(.concept-shell)) .panel,
body:not(:has(.concept-shell)) .card,
body:not(:has(.concept-shell)) .summary-card,
body:not(:has(.concept-shell)) .metric,
body:not(:has(.concept-shell)) .stat,
body:not(:has(.concept-shell)) .box,
body:not(:has(.concept-shell)) .info-item,
body:not(:has(.concept-shell)) .budget-box,
body:not(:has(.concept-shell)) .period-item,
body:not(:has(.concept-shell)) .file-row,
body:not(:has(.concept-shell)) .user-row,
body:not(:has(.concept-shell)) .project-item {
    border-radius: 18px !important;
    clip-path: none !important;
    border-color: rgba(159, 169, 199, .22) !important;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 11px),
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 30%),
        linear-gradient(180deg, rgba(15, 21, 35, .94), rgba(7, 11, 20, .95)) !important;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body:not(:has(.concept-shell)) .btn,
body:not(:has(.concept-shell)) .nav-link,
body:not(:has(.concept-shell)) button,
body:not(:has(.concept-shell)) input,
body:not(:has(.concept-shell)) select,
body:not(:has(.concept-shell)) textarea {
    border-radius: 12px !important;
    clip-path: none !important;
}

body:not(:has(.concept-shell)) table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body:not(:has(.concept-shell)) thead th {
    padding: 10px 12px !important;
    color: rgba(218, 226, 250, .70) !important;
    font-size: 11px !important;
    text-transform: uppercase;
}

body:not(:has(.concept-shell)) tbody tr {
    border-radius: 16px !important;
}

body:not(:has(.concept-shell)) tbody td {
    padding: 14px 12px !important;
    border-top: 1px solid rgba(159, 169, 199, .12);
    border-bottom: 1px solid rgba(159, 169, 199, .12);
}

body:not(:has(.concept-shell)) tbody td:first-child {
    border-left: 1px solid rgba(159, 169, 199, .12);
    border-radius: 16px 0 0 16px;
}

body:not(:has(.concept-shell)) tbody td:last-child {
    border-right: 1px solid rgba(159, 169, 199, .12);
    border-radius: 0 16px 16px 0;
}

body:not(:has(.concept-shell)) label,
body:not(:has(.concept-shell)) .field label {
    color: rgba(218, 226, 250, .72) !important;
    font-weight: 800;
}

body:not(:has(.concept-shell)) input,
body:not(:has(.concept-shell)) select,
body:not(:has(.concept-shell)) textarea {
    border-color: rgba(159, 169, 199, .22) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 44%),
        rgba(14, 20, 34, .88) !important;
    color: #f8fbff !important;
}

body:not(:has(.concept-shell)) .page-head h1,
body:not(:has(.concept-shell)) h1 {
    color: #f8fbff;
    text-shadow: 0 0 28px rgba(117, 172, 255, .18);
}

@media (max-width: 760px) {
    body:not(:has(.concept-shell)) table,
    body:not(:has(.concept-shell)) thead,
    body:not(:has(.concept-shell)) tbody,
    body:not(:has(.concept-shell)) tr,
    body:not(:has(.concept-shell)) td {
        display: block;
        width: 100%;
    }

    body:not(:has(.concept-shell)) thead {
        display: none;
    }

    body:not(:has(.concept-shell)) tbody tr {
        margin-bottom: 10px;
        padding: 12px;
    }

    body:not(:has(.concept-shell)) tbody td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 8px 0 !important;
    }

    body:not(:has(.concept-shell)) tbody td::before {
        content: attr(data-label);
        color: rgba(218, 226, 250, .60);
        font-weight: 800;
    }
}

/* Product-wide redesign pass: make every module feel like the dashboard, not a legacy page. */
body:not(:has(.concept-shell)),
body.admin-login-page {
    --product-panel: rgba(12, 17, 30, .90);
    --product-panel-soft: rgba(19, 27, 43, .76);
    --product-border: rgba(162, 177, 215, .18);
    --product-border-strong: rgba(111, 183, 214, .36);
    --product-text: #f6f9ff;
    --product-muted: rgba(217, 226, 250, .66);
    --product-cyan: #29d8c6;
    --product-blue: #5aa6ff;
    --product-violet: #9b62ff;
    --product-pink: #f26bc8;
    --product-amber: #f3bd4d;
    background:
        radial-gradient(circle at 18% 0%, rgba(41, 216, 198, .14), transparent 34rem),
        radial-gradient(circle at 86% 9%, rgba(155, 98, 255, .12), transparent 32rem),
        linear-gradient(135deg, #07101a 0%, #070a12 42%, #020309 100%) !important;
}

body:not(:has(.concept-shell))::after,
body.admin-login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 10px),
        linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .038) 18.2%, transparent 18.75% 62%, rgba(41, 216, 198, .045) 62.2%, transparent 62.85%);
    opacity: .72;
}

body:not(:has(.concept-shell)) .container {
    max-width: 1700px !important;
    padding-top: clamp(18px, 2.2vw, 34px) !important;
    padding-bottom: 52px !important;
}

body:not(:has(.concept-shell)) .head,
body:not(:has(.concept-shell)) .page-head {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px !important;
    padding: clamp(18px, 2vw, 28px) !important;
    border: 1px solid var(--product-border) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .075), transparent 44%),
        linear-gradient(180deg, rgba(16, 23, 38, .90), rgba(7, 11, 20, .88)) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body:not(:has(.concept-shell)) .head::before,
body:not(:has(.concept-shell)) .page-head::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(41, 216, 198, .88), rgba(155, 98, 255, .72), transparent);
    box-shadow: 0 0 22px rgba(41, 216, 198, .26);
}

body:not(:has(.concept-shell)) h1 {
    margin: 0 !important;
    font-size: clamp(30px, 2.8vw, 54px) !important;
    line-height: .96 !important;
    text-transform: none !important;
}

body:not(:has(.concept-shell)) h1::after {
    display: none !important;
}

body:not(:has(.concept-shell)) .sub {
    max-width: 880px !important;
    margin-top: 10px !important;
    color: var(--product-muted) !important;
    font-size: 15px !important;
}

body:not(:has(.concept-shell)) .toolbar,
body:not(:has(.concept-shell)) .grid,
body:not(:has(.concept-shell)) .grid2,
body:not(:has(.concept-shell)) .summary,
body:not(:has(.concept-shell)) .stats,
body:not(:has(.concept-shell)) .budget-grid,
body:not(:has(.concept-shell)) .info-grid {
    gap: 14px !important;
}

body:not(:has(.concept-shell)) .toolbar {
    display: grid !important;
    grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr) !important;
    align-items: stretch !important;
}

body:not(:has(.concept-shell)) .grid,
body:not(:has(.concept-shell)) .summary {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

body:not(:has(.concept-shell)) .grid2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr) !important;
}

body:not(:has(.concept-shell)) .layout,
body:not(:has(.concept-shell)) .workspace {
    display: grid !important;
    grid-template-columns: minmax(330px, 400px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

body:not(:has(.concept-shell)) .card,
body:not(:has(.concept-shell)) .panel,
body:not(:has(.concept-shell)) .metric,
body:not(:has(.concept-shell)) .summary-card,
body:not(:has(.concept-shell)) .stat,
body:not(:has(.concept-shell)) .box,
body:not(:has(.concept-shell)) .budget-box,
body:not(:has(.concept-shell)) .info-item,
body:not(:has(.concept-shell)) .period-item,
body:not(:has(.concept-shell)) .file-row,
body:not(:has(.concept-shell)) .project-item,
body:not(:has(.concept-shell)) .user-row {
    border-radius: 20px !important;
    clip-path: none !important;
    border: 1px solid var(--product-border) !important;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 10px),
        linear-gradient(135deg, rgba(255, 255, 255, .078), transparent 32%),
        linear-gradient(180deg, var(--product-panel), rgba(7, 11, 20, .94)) !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, .40),
        inset 0 1px 0 rgba(255, 255, 255, .085),
        inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
}

body:not(:has(.concept-shell)) .card::before,
body:not(:has(.concept-shell)) .panel::before,
body:not(:has(.concept-shell)) .metric::before,
body:not(:has(.concept-shell)) .summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgba(41, 216, 198, .10), transparent 44%),
        radial-gradient(circle at 100% 18%, rgba(155, 98, 255, .10), transparent 42%);
    opacity: .85;
}

body:not(:has(.concept-shell)) .card > *,
body:not(:has(.concept-shell)) .panel > *,
body:not(:has(.concept-shell)) .metric > *,
body:not(:has(.concept-shell)) .summary-card > * {
    position: relative;
    z-index: 1;
}

body:not(:has(.concept-shell)) .metric,
body:not(:has(.concept-shell)) .summary-card,
body:not(:has(.concept-shell)) .stat,
body:not(:has(.concept-shell)) .budget-box {
    min-height: 112px !important;
    padding: 16px 18px !important;
}

body:not(:has(.concept-shell)) .metric:nth-child(4n+1),
body:not(:has(.concept-shell)) .summary-card:nth-child(4n+1) { border-color: rgba(41, 216, 198, .32) !important; }
body:not(:has(.concept-shell)) .metric:nth-child(4n+2),
body:not(:has(.concept-shell)) .summary-card:nth-child(4n+2) { border-color: rgba(90, 166, 255, .32) !important; }
body:not(:has(.concept-shell)) .metric:nth-child(4n+3),
body:not(:has(.concept-shell)) .summary-card:nth-child(4n+3) { border-color: rgba(155, 98, 255, .32) !important; }
body:not(:has(.concept-shell)) .metric:nth-child(4n+4),
body:not(:has(.concept-shell)) .summary-card:nth-child(4n+4) { border-color: rgba(242, 107, 200, .30) !important; }

body:not(:has(.concept-shell)) .metric-label,
body:not(:has(.concept-shell)) .metric-k,
body:not(:has(.concept-shell)) .summary-k,
body:not(:has(.concept-shell)) .stat-k,
body:not(:has(.concept-shell)) .budget-box .k,
body:not(:has(.concept-shell)) th {
    color: rgba(220, 228, 250, .62) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
}

body:not(:has(.concept-shell)) .metric-value,
body:not(:has(.concept-shell)) .metric-v,
body:not(:has(.concept-shell)) .summary-v,
body:not(:has(.concept-shell)) .stat-v,
body:not(:has(.concept-shell)) .budget-box .v {
    color: #fff !important;
    font-size: clamp(24px, 1.85vw, 36px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
}

body:not(:has(.concept-shell)) input,
body:not(:has(.concept-shell)) select,
body:not(:has(.concept-shell)) textarea,
body.admin-login-page input {
    min-height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(162, 177, 215, .22) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 48%),
        rgba(14, 20, 34, .90) !important;
    color: #f8fbff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body:not(:has(.concept-shell)) input:focus,
body:not(:has(.concept-shell)) select:focus,
body:not(:has(.concept-shell)) textarea:focus,
body.admin-login-page input:focus {
    border-color: rgba(41, 216, 198, .58) !important;
    box-shadow: 0 0 0 3px rgba(41, 216, 198, .10), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body:not(:has(.concept-shell)) .btn,
body:not(:has(.concept-shell)) .btn-primary,
body:not(:has(.concept-shell)) .btn.ghost,
body:not(:has(.concept-shell)) .nav-link,
body:not(:has(.concept-shell)) button,
body.admin-login-page .btn-primary {
    min-height: 42px !important;
    border-radius: 14px !important;
    clip-path: none !important;
    border: 1px solid rgba(162, 177, 215, .22) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .085), transparent 54%),
        rgba(24, 31, 48, .88) !important;
    color: #f6f9ff !important;
    font-weight: 850 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 28px rgba(0, 0, 0, .26) !important;
}

body:not(:has(.concept-shell)) .btn.primary,
body:not(:has(.concept-shell)) .btn-primary,
body:not(:has(.concept-shell)) button[type="submit"]:not(.btn-danger):not(.danger),
body.admin-login-page .btn-primary {
    border-color: rgba(41, 216, 198, .40) !important;
    background:
        linear-gradient(135deg, rgba(41, 216, 198, .95), rgba(155, 98, 255, .86)) !important;
    color: #040711 !important;
    text-shadow: none !important;
}

body:not(:has(.concept-shell)) table {
    border-collapse: separate !important;
    border-spacing: 0 9px !important;
}

body:not(:has(.concept-shell)) tbody tr {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .052), transparent 34%),
        rgba(11, 17, 30, .74) !important;
}

body:not(:has(.concept-shell)) tbody td {
    background: transparent !important;
    border-top: 1px solid rgba(162, 177, 215, .12) !important;
    border-bottom: 1px solid rgba(162, 177, 215, .12) !important;
}

body:not(:has(.concept-shell)) tbody td:first-child {
    border-left: 1px solid rgba(162, 177, 215, .12) !important;
    border-radius: 16px 0 0 16px !important;
}

body:not(:has(.concept-shell)) tbody td:last-child {
    border-right: 1px solid rgba(162, 177, 215, .12) !important;
    border-radius: 0 16px 16px 0 !important;
}

body:not(:has(.concept-shell)) .period-item,
body:not(:has(.concept-shell)) .file-row,
body:not(:has(.concept-shell)) .project-item {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:not(:has(.concept-shell)) .period-item:hover,
body:not(:has(.concept-shell)) .file-row:hover,
body:not(:has(.concept-shell)) .project-item:hover {
    transform: translateY(-1px);
    border-color: var(--product-border-strong) !important;
    box-shadow: 0 0 0 1px rgba(41, 216, 198, .16), 0 20px 48px rgba(0, 0, 0, .34) !important;
}

body:not(:has(.concept-shell)) .badge,
body:not(:has(.concept-shell)) .pill,
body:not(:has(.concept-shell)) .paid-chip,
body:not(:has(.concept-shell)) .cat-chip,
body:not(:has(.concept-shell)) .count-chip {
    border-radius: 999px !important;
    clip-path: none !important;
    background: rgba(255, 255, 255, .065) !important;
}

body.admin-login-page {
    display: grid !important;
    place-items: center !important;
    min-height: 100vh !important;
    padding: 24px !important;
}

body.admin-login-page .card {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    padding: 30px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(162, 177, 215, .20) !important;
    background:
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 10px),
        radial-gradient(circle at 20% 0%, rgba(41, 216, 198, .18), transparent 44%),
        radial-gradient(circle at 100% 10%, rgba(155, 98, 255, .17), transparent 42%),
        rgba(10, 15, 27, .94) !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

body.admin-login-page .title {
    color: transparent !important;
    background: linear-gradient(90deg, #7fffe8, #95c8ff, #c6a8ff);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 22px !important;
    letter-spacing: .04em !important;
}

body.admin-login-page h1 {
    margin-top: 22px !important;
    font-size: 34px !important;
    line-height: 1 !important;
}

body.admin-login-page p.desc {
    margin: 10px 0 22px !important;
    color: var(--product-muted) !important;
}

body.admin-login-page .footer {
    color: rgba(217, 226, 250, .46) !important;
}

@media (max-width: 1100px) {
    body:not(:has(.concept-shell)) .toolbar,
    body:not(:has(.concept-shell)) .grid2,
    body:not(:has(.concept-shell)) .layout,
    body:not(:has(.concept-shell)) .workspace {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    body:not(:has(.concept-shell)) .head,
    body:not(:has(.concept-shell)) .page-head {
        padding: 16px !important;
    }

    body:not(:has(.concept-shell)) .summary,
    body:not(:has(.concept-shell)) .grid,
    body:not(:has(.concept-shell)) .stats,
    body:not(:has(.concept-shell)) .budget-grid,
    body:not(:has(.concept-shell)) .info-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(:has(.concept-shell)) table,
    body:not(:has(.concept-shell)) thead,
    body:not(:has(.concept-shell)) tbody,
    body:not(:has(.concept-shell)) tr,
    body:not(:has(.concept-shell)) td {
        display: block !important;
        width: 100% !important;
    }

    body:not(:has(.concept-shell)) thead,
    body:not(:has(.concept-shell)) table tr:first-child:has(th) {
        display: none !important;
    }

    body:not(:has(.concept-shell)) tbody tr,
    body:not(:has(.concept-shell)) table tr:not(:first-child) {
        margin-bottom: 10px !important;
        padding: 12px !important;
        border: 1px solid rgba(162, 177, 215, .14) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 42%),
            rgba(11, 17, 30, .82) !important;
    }

    body:not(:has(.concept-shell)) tbody td,
    body:not(:has(.concept-shell)) table tr:not(:first-child) td {
        display: grid !important;
        grid-template-columns: minmax(96px, .42fr) minmax(0, 1fr);
        gap: 10px;
        padding: 8px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    body:not(:has(.concept-shell)) tbody td::before,
    body:not(:has(.concept-shell)) table tr:not(:first-child) td::before {
        content: attr(data-label);
        color: rgba(217, 226, 250, .58);
        font-weight: 900;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: .04em;
    }

body.admin-login-page .card {
        padding: 22px !important;
    }
}

/* Final module unification: payments, works, files, tasks, users, contracts and login. */
body:not(:has(.concept-shell)) {
    overflow-x: hidden !important;
    font-size: 14px !important;
}

body:not(:has(.concept-shell)) header {
    border-bottom: 1px solid rgba(147, 164, 204, .16) !important;
    background:
        linear-gradient(90deg, rgba(41, 216, 198, .055), transparent 32%),
        linear-gradient(180deg, rgba(6, 9, 18, .96), rgba(7, 10, 18, .88)) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
}

body:not(:has(.concept-shell)) .nav {
    max-width: 1700px !important;
    min-height: 74px !important;
    padding: 12px clamp(16px, 2vw, 44px) !important;
    display: flex !important;
    align-items: center !important;
}

body:not(:has(.concept-shell)) .nav-title,
body.admin-login-page .title {
    color: transparent !important;
    background: linear-gradient(90deg, #92fff0 0%, #a9ccff 52%, #d0b7ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-shadow: 0 0 34px rgba(80, 198, 255, .18) !important;
}

body:not(:has(.concept-shell)) .nav-sub,
body:not(:has(.concept-shell)) .sub,
body:not(:has(.concept-shell)) .card-sub,
body:not(:has(.concept-shell)) .section-sub,
body:not(:has(.concept-shell)) .helper,
body:not(:has(.concept-shell)) .small-note,
body:not(:has(.concept-shell)) .muted {
    color: rgba(219, 228, 250, .66) !important;
}

body:not(:has(.concept-shell)) .container {
    max-width: 1700px !important;
    width: 100% !important;
    padding-left: clamp(16px, 2vw, 44px) !important;
    padding-right: clamp(16px, 2vw, 44px) !important;
}

body:not(:has(.concept-shell)) .head,
body:not(:has(.concept-shell)) .page-head {
    min-height: 0 !important;
}

body:not(:has(.concept-shell)) .head h1,
body:not(:has(.concept-shell)) .page-head h1,
body:not(:has(.concept-shell)) main > h1,
body.admin-login-page h1 {
    font-size: clamp(30px, 3vw, 52px) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
}

body:not(:has(.concept-shell)) .head .sub,
body:not(:has(.concept-shell)) .page-head .sub {
    max-width: 920px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body:not(:has(.concept-shell)) .toolbar {
    align-items: stretch !important;
}

body:not(:has(.concept-shell)) .toolbar > *,
body:not(:has(.concept-shell)) .toolbar form,
body:not(:has(.concept-shell)) .period-controls,
body:not(:has(.concept-shell)) .btn-row,
body:not(:has(.concept-shell)) .btns,
body:not(:has(.concept-shell)) .actions {
    gap: 10px !important;
}

body:not(:has(.concept-shell)) .grid,
body:not(:has(.concept-shell)) .summary,
body:not(:has(.concept-shell)) .stats,
body:not(:has(.concept-shell)) .budget-grid,
body:not(:has(.concept-shell)) .info-grid {
    gap: 14px !important;
}

body:not(:has(.concept-shell)) .layout,
body:not(:has(.concept-shell)) .workspace,
body:not(:has(.concept-shell)) .grid2 {
    gap: 16px !important;
}

body:not(:has(.concept-shell)) .card,
body:not(:has(.concept-shell)) .panel,
body:not(:has(.concept-shell)) .metric,
body:not(:has(.concept-shell)) .summary-card,
body:not(:has(.concept-shell)) .stat,
body:not(:has(.concept-shell)) .box,
body:not(:has(.concept-shell)) .period-item,
body:not(:has(.concept-shell)) .file-row,
body:not(:has(.concept-shell)) .project-item,
body:not(:has(.concept-shell)) .user-row {
    position: relative !important;
    overflow: hidden !important;
}

body:not(:has(.concept-shell)) .card::after,
body:not(:has(.concept-shell)) .panel::after,
body:not(:has(.concept-shell)) .metric::after,
body:not(:has(.concept-shell)) .summary-card::after,
body:not(:has(.concept-shell)) .stat::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 18% 72%, rgba(41, 216, 198, .045)),
        repeating-linear-gradient(157deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 10px) !important;
    opacity: .64 !important;
}

body:not(:has(.concept-shell)) .card > *,
body:not(:has(.concept-shell)) .panel > *,
body:not(:has(.concept-shell)) .metric > *,
body:not(:has(.concept-shell)) .summary-card > *,
body:not(:has(.concept-shell)) .stat > * {
    position: relative !important;
    z-index: 1 !important;
}

body:not(:has(.concept-shell)) .card-title,
body:not(:has(.concept-shell)) .section-title,
body:not(:has(.concept-shell)) .table-head h3,
body:not(:has(.concept-shell)) .card h3 {
    color: #f8fbff !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

body:not(:has(.concept-shell)) .metric-value,
body:not(:has(.concept-shell)) .metric-v,
body:not(:has(.concept-shell)) .summary-v,
body:not(:has(.concept-shell)) .stat-v,
body:not(:has(.concept-shell)) .budget-box .v,
body:not(:has(.concept-shell)) .kpi b {
    color: #fff !important;
    text-shadow: 0 10px 36px rgba(0, 0, 0, .45), 0 0 22px rgba(143, 177, 255, .12) !important;
}

body:not(:has(.concept-shell)) .field {
    margin-bottom: 12px !important;
}

body:not(:has(.concept-shell)) input,
body:not(:has(.concept-shell)) select,
body:not(:has(.concept-shell)) textarea,
body.admin-login-page input {
    font-size: 14px !important;
}

body:not(:has(.concept-shell)) textarea {
    min-height: 88px !important;
    line-height: 1.45 !important;
}

body:not(:has(.concept-shell)) input[type="checkbox"],
body:not(:has(.concept-shell)) input[type="radio"] {
    width: 18px !important;
    min-height: 18px !important;
    height: 18px !important;
    accent-color: var(--product-cyan) !important;
}

body:not(:has(.concept-shell)) .checks label {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 38px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(162, 177, 215, .12) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .035) !important;
}

body:not(:has(.concept-shell)) .btn,
body:not(:has(.concept-shell)) .btn-primary,
body:not(:has(.concept-shell)) .btn-ghost,
body:not(:has(.concept-shell)) .nav-link,
body:not(:has(.concept-shell)) button,
body.admin-login-page .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

body:not(:has(.concept-shell)) .btn.primary,
body:not(:has(.concept-shell)) .btn-primary,
body:not(:has(.concept-shell)) button[type="submit"]:not(.btn-danger):not(.danger),
body.admin-login-page .btn-primary {
    box-shadow:
        0 18px 46px rgba(41, 216, 198, .18),
        0 0 28px rgba(155, 98, 255, .16),
        inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

body:not(:has(.concept-shell)) table {
    table-layout: auto !important;
    min-width: 0 !important;
}

body:not(:has(.concept-shell)) th,
body:not(:has(.concept-shell)) td {
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

body:not(:has(.concept-shell)) .work-desc {
    max-width: 72ch !important;
}

body:not(:has(.concept-shell)) .actions,
body:not(:has(.concept-shell)) td.actions,
body:not(:has(.concept-shell)) td:last-child {
    white-space: nowrap !important;
}

body:not(:has(.concept-shell)) .right {
    text-align: right !important;
}

body:not(:has(.concept-shell)) .period-list {
    max-height: min(420px, 52vh) !important;
}

body:not(:has(.concept-shell)) .period-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
}

body:not(:has(.concept-shell)) .badge.ok,
body:not(:has(.concept-shell)) .pill.ok,
body:not(:has(.concept-shell)) .status-active {
    color: #7fffe8 !important;
    border-color: rgba(41, 216, 198, .34) !important;
    background: rgba(41, 216, 198, .10) !important;
}

body:not(:has(.concept-shell)) .badge.warn,
body:not(:has(.concept-shell)) .pill.warn {
    color: #ffe09a !important;
    border-color: rgba(243, 189, 77, .34) !important;
    background: rgba(243, 189, 77, .10) !important;
}

body:not(:has(.concept-shell)) .badge.bad,
body:not(:has(.concept-shell)) .pill.bad,
body:not(:has(.concept-shell)) .alert.error {
    color: #ffc3c3 !important;
    border-color: rgba(255, 102, 122, .34) !important;
    background: rgba(130, 30, 48, .26) !important;
}

body:not(:has(.concept-shell)) .empty {
    border-radius: 16px !important;
    border: 1px dashed rgba(162, 177, 215, .22) !important;
    background: rgba(255, 255, 255, .035) !important;
    color: rgba(219, 228, 250, .62) !important;
}

body.admin-login-page {
    background:
        radial-gradient(circle at 24% 16%, rgba(41, 216, 198, .18), transparent 32rem),
        radial-gradient(circle at 78% 20%, rgba(155, 98, 255, .18), transparent 34rem),
        linear-gradient(135deg, #08101a 0%, #060911 48%, #020309 100%) !important;
}

body.admin-login-page .logo-row {
    margin-bottom: 22px !important;
}

body.admin-login-page .subtitle,
body.admin-login-page p.desc {
    color: rgba(219, 228, 250, .64) !important;
    line-height: 1.5 !important;
}

body.admin-login-page .error {
    padding: 11px 13px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 102, 122, .30) !important;
    background: rgba(130, 30, 48, .24) !important;
}

@media (max-width: 900px) {
    body:not(:has(.concept-shell)) .nav {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    body:not(:has(.concept-shell)) .head h1,
    body:not(:has(.concept-shell)) .page-head h1,
    body:not(:has(.concept-shell)) main > h1,
    body.admin-login-page h1 {
        font-size: clamp(26px, 8vw, 38px) !important;
    }

    body:not(:has(.concept-shell)) .metric-value,
    body:not(:has(.concept-shell)) .metric-v,
    body:not(:has(.concept-shell)) .summary-v,
    body:not(:has(.concept-shell)) .stat-v,
    body:not(:has(.concept-shell)) .budget-box .v {
        font-size: clamp(22px, 7vw, 31px) !important;
    }
}

@media (max-width: 760px) {
    body:not(:has(.concept-shell)) .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 14px !important;
    }

    body:not(:has(.concept-shell)) .nav-title {
        font-size: clamp(20px, 7vw, 28px) !important;
    }

    body:not(:has(.concept-shell)) .nav-sub {
        max-width: calc(100vw - 128px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body:not(:has(.concept-shell)) .nav-links,
    body:not(:has(.concept-shell)) .nav-right {
        border-radius: 18px !important;
        clip-path: none !important;
        max-height: calc(100vh - 92px) !important;
        overflow: auto !important;
    }

    body:not(:has(.concept-shell)) .nav-link {
        width: 100% !important;
        min-height: 44px !important;
    }

    body:not(:has(.concept-shell)) .head,
    body:not(:has(.concept-shell)) .page-head,
    body:not(:has(.concept-shell)) .card,
    body:not(:has(.concept-shell)) .panel {
        border-radius: 18px !important;
    }

    body:not(:has(.concept-shell)) .card,
    body:not(:has(.concept-shell)) .panel {
        padding: 14px !important;
    }

    body:not(:has(.concept-shell)) .metric,
    body:not(:has(.concept-shell)) .summary-card,
    body:not(:has(.concept-shell)) .stat,
    body:not(:has(.concept-shell)) .budget-box {
        min-height: 86px !important;
        padding: 12px !important;
    }

    body:not(:has(.concept-shell)) .period-item {
        grid-template-columns: 1fr !important;
    }

    body:not(:has(.concept-shell)) .right {
        text-align: left !important;
    }

    body:not(:has(.concept-shell)) table {
        border-spacing: 0 !important;
    }

    body:not(:has(.concept-shell)) tbody td,
    body:not(:has(.concept-shell)) table tr:not(:first-child) td {
        align-items: start !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body:not(:has(.concept-shell)) tbody td::before,
    body:not(:has(.concept-shell)) table tr:not(:first-child) td::before {
        line-height: 1.35 !important;
    }

    body:not(:has(.concept-shell)) .actions,
    body:not(:has(.concept-shell)) td.actions,
    body:not(:has(.concept-shell)) td:last-child {
        white-space: normal !important;
    }

    body:not(:has(.concept-shell)) .actions a,
    body:not(:has(.concept-shell)) .actions button {
        width: 100% !important;
    }

    body:not(:has(.concept-shell)) .btn,
    body:not(:has(.concept-shell)) .btn-primary,
    body:not(:has(.concept-shell)) .btn-ghost,
    body:not(:has(.concept-shell)) button,
    body.admin-login-page .btn-primary {
        min-height: 44px !important;
    }
}

/* Compact typography pass: denser product UI, aligned dashboard blocks. */
body,
body:not(:has(.concept-shell)),
body:has(.concept-shell) {
    font-size: 13px !important;
    line-height: 1.36 !important;
}

body:not(:has(.concept-shell)) .nav-title,
body:has(.concept-shell) .nav-title {
    font-size: clamp(20px, 1.55vw, 30px) !important;
}

body:not(:has(.concept-shell)) .nav-sub,
body:has(.concept-shell) .nav-sub {
    font-size: 11px !important;
}

body:not(:has(.concept-shell)) .head h1,
body:not(:has(.concept-shell)) .page-head h1,
body:not(:has(.concept-shell)) main > h1,
body.admin-login-page h1 {
    font-size: clamp(26px, 2.2vw, 42px) !important;
}

body:not(:has(.concept-shell)) .head .sub,
body:not(:has(.concept-shell)) .page-head .sub,
body:not(:has(.concept-shell)) .sub {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body:not(:has(.concept-shell)) .card-title,
body:not(:has(.concept-shell)) .section-title,
body:not(:has(.concept-shell)) .table-head h3,
body:not(:has(.concept-shell)) .card h3 {
    font-size: 16px !important;
}

body:not(:has(.concept-shell)) .metric-value,
body:not(:has(.concept-shell)) .metric-v,
body:not(:has(.concept-shell)) .summary-v,
body:not(:has(.concept-shell)) .stat-v,
body:not(:has(.concept-shell)) .budget-box .v,
body:not(:has(.concept-shell)) .kpi b {
    font-size: clamp(18px, 1.45vw, 28px) !important;
}

body:not(:has(.concept-shell)) input,
body:not(:has(.concept-shell)) select,
body:not(:has(.concept-shell)) textarea,
body:not(:has(.concept-shell)) button,
body:not(:has(.concept-shell)) .btn,
body:not(:has(.concept-shell)) .nav-link,
body.admin-login-page input {
    font-size: 13px !important;
}

body:has(.concept-shell) .concept-dashboard {
    padding-top: 12px !important;
}

body:has(.concept-shell) .concept-card-title {
    font-size: 16px !important;
}

body:has(.concept-shell) .concept-grid {
    grid-template-columns: minmax(290px, 366px) minmax(0, 1fr) minmax(320px, 408px);
    gap: 12px;
}

body:has(.concept-shell) .concept-left,
body:has(.concept-shell) .concept-center,
body:has(.concept-shell) .concept-right {
    gap: 12px;
}

body:has(.concept-shell) .concept-picker,
body:has(.concept-shell) .concept-base,
body:has(.concept-shell) .concept-payments,
body:has(.concept-shell) .concept-accruals,
body:has(.concept-shell) .concept-related {
    padding: 18px 14px 14px !important;
}

body:has(.concept-shell) .concept-project-card {
    min-height: 74px;
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 10px 12px;
    gap: 11px;
}

body:has(.concept-shell) .concept-project-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 20px;
}

body:has(.concept-shell) .concept-project-copy strong {
    font-size: 14px;
}

body:has(.concept-shell) .concept-project-copy em {
    font-size: 10px;
}

body:has(.concept-shell) .concept-kpis {
    padding: 20px 28px 22px !important;
}

body:has(.concept-shell) .concept-kpi-head {
    align-items: center;
    margin-bottom: 18px;
}

body:has(.concept-shell) .concept-period {
    min-height: 42px;
    border-radius: 13px;
}

body:has(.concept-shell) .concept-period input {
    min-width: 144px;
    padding: 0 12px;
    font-size: 13px;
}

body:has(.concept-shell) .concept-period button {
    width: 58px;
    min-height: 42px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body:has(.concept-shell) .concept-kpi-split {
    gap: 24px;
    align-items: stretch;
}

body:has(.concept-shell) .concept-divider {
    height: auto;
    min-height: 116px;
}

body:has(.concept-shell) .concept-kpi-block {
    grid-template-rows: auto auto auto 1fr;
    align-content: stretch;
}

body:has(.concept-shell) .concept-kpi-block span {
    font-size: 14px;
}

body:has(.concept-shell) .concept-kpi-block strong {
    margin-top: 8px;
    font-size: clamp(34px, 3.15vw, 54px);
    line-height: .98;
    letter-spacing: 0;
}

body:has(.concept-shell) .concept-kpi-block em {
    margin-top: 6px;
    font-size: 15px;
}

body:has(.concept-shell) .concept-kpi-block i {
    align-self: end;
    height: 4px;
    margin-top: 16px;
}

body:has(.concept-shell) .concept-overview-grid {
    margin-top: 16px;
}

body:has(.concept-shell) .concept-overview-item {
    min-height: 76px;
    padding: 10px 11px;
}

body:has(.concept-shell) .concept-overview-item span,
body:has(.concept-shell) .concept-paid-inline span {
    font-size: 10px;
}

body:has(.concept-shell) .concept-overview-item strong {
    font-size: clamp(16px, 1.05vw, 21px);
}

body:has(.concept-shell) .concept-project-hero {
    min-height: 260px;
    padding: 20px 24px 22px !important;
}

body:has(.concept-shell) .concept-hero-main {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 20px;
}

body:has(.concept-shell) .concept-hex-logo {
    width: 66px;
    height: 76px;
}

body:has(.concept-shell) .concept-hero-top {
    padding-bottom: 18px;
}

body:has(.concept-shell) .concept-hero-top h2 {
    font-size: clamp(28px, 2.35vw, 40px);
}

body:has(.concept-shell) .concept-hero-top p {
    margin-top: 7px;
    font-size: 12px;
}

body:has(.concept-shell) .concept-badges span {
    min-height: 30px;
    padding: 0 11px;
    font-size: 11px;
}

body:has(.concept-shell) .concept-tariff {
    margin-top: 16px;
    gap: 5px;
}

body:has(.concept-shell) .concept-tariff span {
    font-size: 11px;
}

body:has(.concept-shell) .concept-tariff em {
    font-size: 15px;
}

body:has(.concept-shell) .concept-tariff strong {
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: 1;
}

body:has(.concept-shell) .concept-tariff small {
    font-size: 15px;
}

body:has(.concept-shell) .concept-project-settings {
    max-width: min(720px, 82%);
}

body:has(.concept-shell) .concept-wave {
    width: 50%;
    height: 62%;
}

body:has(.concept-shell) .concept-donut {
    width: 208px;
}

body:has(.concept-shell) .concept-donut::before {
    width: 130px;
}

body:has(.concept-shell) .concept-donut strong {
    font-size: 25px;
}

body:has(.concept-shell) .concept-legend-row {
    font-size: 12px;
}

body:has(.concept-shell) .concept-related-item strong {
    font-size: 21px;
}

body:has(.concept-shell) .concept-action {
    min-height: 56px;
    font-size: 14px;
}

body:has(.concept-shell) .concept-action svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 760px) {
    body:has(.concept-shell) .concept-kpi-block strong {
        font-size: clamp(32px, 10vw, 46px);
    }

    body:has(.concept-shell) .concept-kpi-block span {
        font-size: 12px;
    }

    body:has(.concept-shell) .concept-period {
        width: 100%;
    }

    body:has(.concept-shell) .concept-period input {
        flex: 1 1 auto;
        min-width: 0;
    }

    body:has(.concept-shell) .concept-project-hero {
        min-height: 0;
    }

    body:has(.concept-shell) .concept-tariff strong {
        font-size: clamp(34px, 12vw, 48px);
    }

    body:has(.concept-shell) .concept-project-settings {
        max-width: 100%;
    }
}

/* Dashboard structural alignment: shared grid rows and controlled project list. */
body:has(.concept-shell) .concept-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1.55fr) minmax(280px, 380px) !important;
    grid-template-areas:
        "accruals kpis payments"
        "picker picker picker"
        "base hero related"
        "delete delete delete" !important;
    align-items: stretch !important;
    gap: 12px !important;
}

body:has(.concept-shell) .concept-left,
body:has(.concept-shell) .concept-center,
body:has(.concept-shell) .concept-right {
    display: contents !important;
}

body:has(.concept-shell) .concept-picker { grid-area: picker; }
body:has(.concept-shell) .concept-kpis { grid-area: kpis; }
body:has(.concept-shell) .concept-payments { grid-area: payments; }
body:has(.concept-shell) .concept-accruals { grid-area: accruals; }
body:has(.concept-shell) .concept-base { grid-area: base; }
body:has(.concept-shell) .concept-project-hero { grid-area: hero; }
body:has(.concept-shell) .concept-related { grid-area: related; }
body:has(.concept-shell) .concept-delete-zone { grid-area: delete; }

body:has(.concept-shell) .concept-card {
    height: 100%;
}

body:has(.concept-shell) .concept-picker .concept-project-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
}

body:has(.concept-shell) .concept-project-list.is-collapsed .concept-project-card.is-extra-project {
    display: none;
}

body:has(.concept-shell) .concept-project-card {
    min-height: 68px;
    padding-right: 88px;
}

body:has(.concept-shell) .concept-project-card.is-active {
    position: relative;
    border-color: color-mix(in srgb, var(--pc), white 18%);
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--pc), transparent 54%), transparent 44%),
        linear-gradient(135deg, color-mix(in srgb, var(--pc), transparent 72%), rgba(8, 15, 29, .92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 0 1px color-mix(in srgb, var(--pc), transparent 34%),
        0 18px 42px color-mix(in srgb, var(--pc), transparent 78%);
}

body:has(.concept-shell) .concept-project-card.is-active::after {
    content: "Выбран";
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #061018;
    background: color-mix(in srgb, var(--pc), white 34%);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body:has(.concept-shell) .concept-project-toggle {
    min-height: 38px;
    width: 100%;
    border: 1px solid rgba(171, 181, 211, .22);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 58%),
        rgba(255, 255, 255, .035);
    color: #d9e2ff;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

body:has(.concept-shell) .concept-project-toggle:hover {
    border-color: rgba(38, 216, 199, .36);
    color: #ffffff;
}

body:has(.concept-shell) .concept-payments,
body:has(.concept-shell) .concept-accruals {
    align-self: start;
    height: auto !important;
    min-height: 0;
}

body:has(.concept-shell) .concept-payments .concept-donut,
body:has(.concept-shell) .concept-accruals .concept-donut {
    width: 176px;
}

body:has(.concept-shell) .concept-payments .concept-donut::before,
body:has(.concept-shell) .concept-accruals .concept-donut::before {
    width: 108px;
}

body:has(.concept-shell) .concept-payments .concept-donut strong,
body:has(.concept-shell) .concept-accruals .concept-donut strong {
    font-size: 22px;
}

body:has(.concept-shell) .concept-payments .concept-donut-wrap,
body:has(.concept-shell) .concept-accruals .concept-donut-wrap {
    padding: 10px 0 6px;
}

body:has(.concept-shell) .concept-project-hero {
    min-height: 232px;
    padding: 18px 22px 20px !important;
}

body:has(.concept-shell) .concept-hero-main {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
}

body:has(.concept-shell) .concept-hex-logo {
    width: 54px;
    height: 62px;
}

body:has(.concept-shell) .concept-hero-top {
    padding-bottom: 12px;
}

body:has(.concept-shell) .concept-hero-top h2 {
    font-size: clamp(26px, 2.05vw, 38px);
}

body:has(.concept-shell) .concept-tariff {
    margin-top: 12px;
}

body:has(.concept-shell) .concept-tariff strong {
    font-size: clamp(30px, 2.7vw, 46px);
}

body:has(.concept-shell) .concept-project-settings {
    max-width: min(690px, 78%);
}

body:has(.concept-shell) .concept-tariff-chips {
    gap: 8px;
}

body:has(.concept-shell) .concept-tariff-chip {
    min-height: 58px;
    padding: 8px 10px;
}

body:has(.concept-shell) .concept-wave {
    width: 42%;
    height: 54%;
    opacity: .54;
}

body:has(.concept-shell) .concept-token-box {
    padding: 12px;
}

body:has(.concept-shell) .concept-info-list div {
    min-height: 36px;
    padding: 8px 10px;
}

body:has(.concept-shell) .concept-related {
    min-height: 0;
    padding: 10px !important;
}

body:has(.concept-shell) .concept-related-item {
    min-height: 72px;
    gap: 5px;
}

body:has(.concept-shell) .concept-related-item span {
    width: 42px;
    height: 42px;
}

body:has(.concept-shell) .concept-related-item svg {
    width: 22px;
    height: 22px;
}

body:has(.concept-shell) .concept-related-item strong {
    font-size: 18px;
}

body:has(.concept-shell) .concept-related-item em {
    font-size: 11px;
    line-height: 1.15;
}

body:has(.concept-shell) .concept-delete-zone {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 94px;
    margin-top: 0;
    padding: 14px 18px;
    border-radius: 19px;
    border: 1px solid rgba(255, 104, 115, .36);
    background:
        linear-gradient(135deg, rgba(255, 104, 115, .18), transparent 38%),
        rgba(32, 10, 16, .76);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body:has(.concept-shell) .concept-delete-zone.is-available {
    border-color: rgba(243, 189, 77, .36);
    background:
        linear-gradient(135deg, rgba(243, 189, 77, .16), transparent 38%),
        rgba(30, 21, 9, .74);
}

body:has(.concept-shell) .concept-delete-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #ffccd1;
    border: 1px solid rgba(255, 104, 115, .42);
    background: rgba(255, 104, 115, .12);
    font-weight: 900;
    font-size: 22px;
}

body:has(.concept-shell) .concept-delete-zone.is-available .concept-delete-icon {
    color: #ffe4a6;
    border-color: rgba(243, 189, 77, .44);
    background: rgba(243, 189, 77, .12);
}

body:has(.concept-shell) .concept-delete-copy {
    display: grid;
    gap: 4px;
}

body:has(.concept-shell) .concept-delete-copy strong {
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
}

body:has(.concept-shell) .concept-delete-copy span {
    color: rgba(230, 236, 255, .72);
    font-size: 12px;
    line-height: 1.45;
}

body:has(.concept-shell) .concept-delete-zone form {
    margin: 0;
}

body:has(.concept-shell) .concept-delete-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 104, 115, .46);
    color: #ffe8ea;
    background:
        linear-gradient(135deg, rgba(255, 104, 115, .28), rgba(255, 104, 115, .10));
    font-weight: 900;
    cursor: pointer;
}

body:has(.concept-shell) .concept-delete-button[disabled] {
    opacity: .48;
    cursor: not-allowed;
    filter: saturate(.65);
}

@media (max-width: 1420px) {
    body:has(.concept-shell) .concept-grid {
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
        grid-template-areas:
            "accruals payments"
            "kpis kpis"
            "picker picker"
            "base hero"
            "related hero"
            "related delete" !important;
    }
}

@media (max-width: 1100px) {
    body:has(.concept-shell) .concept-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "accruals"
            "kpis"
            "payments"
            "picker"
            "hero"
            "base"
            "related"
            "delete" !important;
    }
}

@media (max-width: 760px) {
    body:has(.concept-shell) .concept-grid {
        display: grid !important;
    }

    body:has(.concept-shell) .concept-delete-zone {
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
        padding: 13px;
    }

    body:has(.concept-shell) .concept-delete-zone form {
        grid-column: 1 / -1;
    }

    body:has(.concept-shell) .concept-delete-button {
        width: 100%;
    }
}

/* Work log chips: keep short type labels readable in compact tables. */
body:not(:has(.concept-shell)) .pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1 !important;
    font-size: 11px !important;
}