/* =============================================================================
   Verion Console — shared chrome for the member workspace and the admin desk
   Loaded LAST in dashboard::layouts.workspace. Ink & Jade + gold hairlines.
   Scope: sidebar rail, console topbar, footer, KPI tiles, panels, tables,
   uniform card grids, chart frames, status pills. RTL-safe, dark-scheme aware.
   ============================================================================= */

:root {
    --vc-ink: #0b1f2a;
    --vc-ink-2: #143042;
    --vc-jade: #0f766e;
    --vc-jade-2: #14b8a6;
    --vc-mint: #5eead4;
    --vc-gold: #c9a227;
    --vc-gold-2: #e8d48b;
    --vc-paper: #f7faf8;
    --vc-surface: #ffffff;
    --vc-line: rgba(11, 31, 42, 0.08);
    --vc-muted: #5b6b73;
    --vc-radius: 1.1rem;
    --vc-radius-sm: 0.75rem;
    --vc-shadow: 0 18px 44px rgba(11, 31, 42, 0.08);
    --vc-shadow-sm: 0 6px 18px rgba(11, 31, 42, 0.06);
    --vc-topbar-h: 4.25rem;
    --vc-rail-w: 17.5rem;
}

[data-bs-theme="dark"] {
    --vc-paper: #0a151b;
    --vc-surface: #0f1c22;
    --vc-line: rgba(232, 241, 239, 0.1);
    --vc-muted: #8aa0a8;
    --vc-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
    --vc-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* -----------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
body.cos-app--workspace {
    background: var(--vc-paper);
}

body.cos-app--workspace .cos-workspace {
    --cos-sidebar-w: var(--vc-rail-w);
}

/* Visual-theme banner (themes that define one paint it; otherwise it is 0px tall) */
body.cos-app--workspace .cos-theme-banner:empty {
    min-height: 0;
}

/* -----------------------------------------------------------------------------
   Sidebar rail
   -------------------------------------------------------------------------- */
body.cos-app--workspace .cos-sidebar {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 1rem 0.85rem 1.25rem;
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(20, 184, 166, 0.16), transparent 60%),
        linear-gradient(180deg, #0b1f2a 0%, #0d2430 60%, #0f3d3a 140%) !important;
    color: #e8f1ef;
    border-inline-end: 1px solid rgba(94, 234, 212, 0.14) !important;
    box-shadow: none !important;
}

body.cos-app--workspace .cos-sidebar::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    height: 3px;
    margin: -1rem -0.85rem 0.9rem;
    background: linear-gradient(90deg, var(--vc-gold), var(--vc-jade-2), var(--vc-mint));
    z-index: 2;
}

body.cos-app--workspace .cos-sidebar__brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.cos-app--workspace .cos-sidebar__brand .cos-brand,
body.cos-app--workspace .cos-sidebar__brand .cos-brand__text {
    color: #fff;
}

body.cos-app--workspace .cos-sidebar__brand .cos-brand__mark {
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.1), 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.cos-app--workspace .cos-sidebar__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vc-gold-2);
    background: rgba(232, 212, 139, 0.1);
    border: 1px solid rgba(232, 212, 139, 0.28);
}

body.cos-app--workspace .cos-command-brand {
    padding: 0.35rem 0.5rem 0.5rem;
}

body.cos-app--workspace .cos-command-brand .small {
    color: rgba(232, 241, 239, 0.55);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
}

body.cos-app--workspace .cos-command-brand__title {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Rail search (filters the nav leaves, wired in the layout) */
.vc-rail-search {
    position: relative;
    margin: 0.35rem 0.25rem 0.85rem;
}

.vc-rail-search i {
    position: absolute;
    inset-inline-start: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(232, 241, 239, 0.55);
    pointer-events: none;
}

.vc-rail-search input {
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 2.25rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.86rem;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

[dir="rtl"] .vc-rail-search input {
    padding: 0.55rem 2.25rem 0.55rem 0.85rem;
}

.vc-rail-search input::placeholder {
    color: rgba(232, 241, 239, 0.5);
}

.vc-rail-search input:focus {
    border-color: rgba(94, 234, 212, 0.45);
    background: rgba(255, 255, 255, 0.1);
}

.vc-rail-search kbd {
    position: absolute;
    inset-inline-end: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.35rem;
    color: rgba(232, 241, 239, 0.6);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.cos-app--workspace .cos-nav-group {
    margin-bottom: 0.15rem;
    border-radius: 0.85rem;
}

body.cos-app--workspace .cos-nav-group__summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.65rem;
    border-radius: 0.85rem;
    color: rgba(232, 241, 239, 0.86);
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    list-style: none;
    transition: background 0.18s ease, color 0.18s ease;
}

body.cos-app--workspace .cos-nav-group__summary::-webkit-details-marker { display: none; }

body.cos-app--workspace .cos-nav-group__summary::after {
    content: "";
    margin-inline-start: auto;
    width: 0.45rem;
    height: 0.45rem;
    border-inline-end: 2px solid rgba(232, 241, 239, 0.5);
    border-bottom: 2px solid rgba(232, 241, 239, 0.5);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

body.cos-app--workspace .cos-nav-group[open] > .cos-nav-group__summary::after {
    transform: rotate(-135deg);
}

body.cos-app--workspace .cos-nav-group__summary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

body.cos-app--workspace .cos-nav-group[open] > .cos-nav-group__summary {
    color: #fff;
}

body.cos-app--workspace .cos-nav-group__glyph {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    background: rgba(94, 234, 212, 0.1);
    color: var(--vc-mint);
    font-size: 0.95rem;
    flex-shrink: 0;
}

body.cos-app--workspace .cos-nav-group[open] > .cos-nav-group__summary .cos-nav-group__glyph {
    background: linear-gradient(135deg, var(--vc-jade-2), var(--vc-jade));
    color: #fff;
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.3);
}

body.cos-app--workspace .cos-nav-group__children {
    position: relative;
    display: grid;
    gap: 0.1rem;
    padding: 0.2rem 0 0.45rem 0;
    margin-inline-start: 1.55rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
}

body.cos-app--workspace .cos-nav-leaf,
body.cos-app--workspace .cos-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem 0.45rem 0.8rem;
    margin-inline-start: 0.35rem;
    border-radius: 0.65rem;
    color: rgba(232, 241, 239, 0.74);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body.cos-app--workspace .cos-nav-leaf i,
body.cos-app--workspace .cos-sidebar .nav-link i {
    font-size: 0.9rem;
    color: rgba(232, 241, 239, 0.5);
    flex-shrink: 0;
    transition: color 0.16s ease;
}

body.cos-app--workspace .cos-nav-leaf:hover,
body.cos-app--workspace .cos-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    transform: translateX(var(--vc-nudge, 2px));
}

[dir="rtl"] body.cos-app--workspace { --vc-nudge: -2px; }

body.cos-app--workspace .cos-nav-leaf:hover i,
body.cos-app--workspace .cos-sidebar .nav-link:hover i {
    color: var(--vc-mint);
}

body.cos-app--workspace .cos-nav-leaf.active,
body.cos-app--workspace .cos-sidebar .nav-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.28), rgba(20, 184, 166, 0.06));
    box-shadow: inset var(--vc-active-inset, 3px) 0 0 var(--vc-mint);
}

[dir="rtl"] body.cos-app--workspace { --vc-active-inset: -3px; }

body.cos-app--workspace .cos-nav-leaf.active i,
body.cos-app--workspace .cos-sidebar .nav-link.active i {
    color: var(--vc-mint);
}

body.cos-app--workspace .cos-sidebar__back {
    margin: 0 0 0.35rem;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    justify-content: center;
}

body.cos-app--workspace .cos-sidebar__group--footer {
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.cos-app--workspace .cos-sidebar__label {
    color: rgba(232, 241, 239, 0.45);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.5rem 0.65rem 0.25rem;
}

.vc-rail-hidden { display: none !important; }

/* Collapsed rail */
body.cos-app--workspace .cos-workspace.is-nav-collapsed .vc-rail-search,
body.cos-app--workspace .cos-workspace.is-nav-collapsed .cos-command-brand,
body.cos-app--workspace .cos-workspace.is-nav-collapsed .cos-nav-group__summary::after {
    display: none;
}

body.cos-app--workspace .cos-workspace.is-nav-collapsed .cos-nav-group__children {
    margin-inline-start: 0;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Console topbar (replaces the public site header inside the workspace)
   -------------------------------------------------------------------------- */
.vc-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--vc-topbar-h);
    padding: 0.55rem 1.25rem;
    background: color-mix(in srgb, var(--vc-surface) 82%, transparent);
    border-bottom: 1px solid var(--vc-line);
    backdrop-filter: blur(16px) saturate(1.2);
}

.vc-topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--vc-gold), var(--vc-jade-2), var(--vc-gold));
    opacity: 0.85;
}

.vc-topbar__lead {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.vc-topbar__title {
    min-width: 0;
}

.vc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.1rem;
    padding: 0;
    list-style: none;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--vc-muted);
}

.vc-crumbs li + li::before {
    content: "/";
    margin-inline-end: 0.3rem;
    opacity: 0.45;
}

.vc-crumbs a {
    color: var(--vc-jade);
    text-decoration: none;
}

.vc-topbar__title h1 {
    margin: 0;
    font-family: var(--cos-font-display, inherit);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-topbar__sub {
    margin: 0.1rem 0 0;
    color: var(--vc-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-topbar__tools {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.vc-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid var(--vc-line);
    background: color-mix(in srgb, var(--vc-surface) 70%, transparent);
    color: var(--cos-ink, #0b1f2a);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.vc-tool:hover {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.25);
    color: var(--cos-ink, #0b1f2a);
    transform: translateY(-1px);
}

.vc-tool--icon { padding: 0; width: 2.5rem; }

.vc-tool--search {
    min-width: 12rem;
    justify-content: flex-start;
    color: var(--vc-muted);
    font-weight: 500;
}

.vc-tool--search kbd {
    margin-inline-start: auto;
    font-size: 0.64rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.35rem;
    background: rgba(11, 31, 42, 0.06);
    border: 1px solid var(--vc-line);
    color: var(--vc-muted);
}

.vc-tool--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--vc-jade-2), var(--vc-jade));
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28);
}

.vc-tool--primary:hover { color: #fff; }

.vc-tool__dot {
    position: absolute;
    top: 0.45rem;
    inset-inline-end: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--vc-gold);
    box-shadow: 0 0 0 2px var(--vc-surface);
}

.vc-tool { position: relative; }

.vc-user {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--vc-line);
    background: color-mix(in srgb, var(--vc-surface) 70%, transparent);
    color: var(--cos-ink, #0b1f2a);
    text-decoration: none;
    cursor: pointer;
    max-width: 14rem;
}

[dir="rtl"] .vc-user { padding: 0.25rem 0.3rem 0.25rem 0.7rem; }

.vc-user img {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25);
}

.vc-user__name {
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-user__role {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vc-jade);
}

.vc-menu.dropdown-menu {
    min-width: 15rem;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--vc-line);
    background: var(--vc-surface);
    box-shadow: var(--vc-shadow);
}

.vc-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.vc-menu .dropdown-item i { color: var(--vc-jade); width: 1.1rem; text-align: center; }

.vc-menu .dropdown-item:hover,
.vc-menu .dropdown-item.active {
    background: rgba(15, 118, 110, 0.1);
    color: var(--cos-ink, #0b1f2a);
}

.vc-menu .dropdown-header {
    padding: 0.4rem 0.7rem 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vc-muted);
}

.vc-menu .dropdown-divider { border-color: var(--vc-line); margin: 0.35rem 0; }

/* Page-level action strip (page_actions) */
.vc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 0;
}

.vc-actions:empty { display: none; }

/* The page-preference form must keep working (scroll / rail state) but has no
   visible controls any more. */
.cos-page-save--silent {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Legacy topbar block is retired */
body.cos-app--workspace .cos-workspace-topbar { display: none !important; }

/* -----------------------------------------------------------------------------
   Content + footer
   -------------------------------------------------------------------------- */
body.cos-app--workspace .cos-workspace-content {
    padding: 1.35rem 1.25rem 2.5rem;
}

@media (min-width: 992px) {
    body.cos-app--workspace .cos-workspace-content {
        padding: 1.6rem 1.75rem 3rem;
    }
}

body.cos-app--workspace .cos-workspace-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.5rem 1.35rem;
    margin-top: auto;
    border-top: 1px solid var(--vc-line);
    background: color-mix(in srgb, var(--vc-surface) 70%, transparent);
    color: var(--vc-muted);
    font-size: 0.82rem;
}

body.cos-app--workspace .cos-workspace-footer__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--cos-ink, #0b1f2a);
}

body.cos-app--workspace .cos-workspace-footer__meta i { color: var(--vc-jade); }

body.cos-app--workspace .cos-workspace-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

body.cos-app--workspace .cos-workspace-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    color: var(--vc-muted);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease;
}

body.cos-app--workspace .cos-workspace-footer__links a:hover {
    background: rgba(15, 118, 110, 0.1);
    color: var(--vc-jade);
}

.vc-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(6, 118, 71, 0.1);
    color: #067647;
}

.vc-footer-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(6, 118, 71, 0.18);
}

.vc-footer-status.is-warn { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.vc-footer-status.is-warn::before { box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.2); }

/* -----------------------------------------------------------------------------
   Desk hero (page banner) — used by many admin pages via .cos-desk-hero
   -------------------------------------------------------------------------- */
body.cos-app--workspace .cos-desk-hero {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.6rem;
    border-radius: var(--vc-radius);
    color: #f7faf8;
    background:
        radial-gradient(640px 280px at 100% 0%, rgba(20, 184, 166, 0.3), transparent 60%),
        radial-gradient(420px 220px at 0% 100%, rgba(201, 162, 39, 0.18), transparent 60%),
        linear-gradient(120deg, #061218, #0b1f2a 55%, #0f3d3a);
    box-shadow: var(--vc-shadow);
}

body.cos-app--workspace .cos-desk-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(94, 234, 212, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 234, 212, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 90% at 80% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 40%, #000 20%, transparent 75%);
    pointer-events: none;
}

body.cos-app--workspace .cos-desk-hero > * { position: relative; z-index: 1; }

body.cos-app--workspace .cos-desk-hero h2 {
    margin: 0 0 0.35rem;
    font-family: var(--cos-font-display, inherit);
    font-weight: 800;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    letter-spacing: -0.03em;
}

body.cos-app--workspace .cos-desk-hero p {
    margin: 0;
    max-width: 60ch;
    color: rgba(247, 250, 248, 0.78);
    line-height: 1.6;
}

body.cos-app--workspace .cos-desk-hero--gold {
    background:
        radial-gradient(640px 280px at 100% 0%, rgba(232, 212, 139, 0.32), transparent 60%),
        linear-gradient(120deg, #1a1406, #3b2a07 55%, #0b1f2a);
}

body.cos-app--workspace .cos-desk-hero--rose {
    background:
        radial-gradient(640px 280px at 100% 0%, rgba(244, 63, 94, 0.28), transparent 60%),
        linear-gradient(120deg, #1c0a12, #3b0f1f 55%, #0b1f2a);
}

.vc-hero__grid {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

@media (min-width: 992px) {
    .vc-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

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

.vc-hero__kpi {
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.vc-hero__kpi span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247, 250, 248, 0.62);
}

.vc-hero__kpi strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.vc-hero__kpi strong small {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--vc-mint);
    margin-inline-start: 0.25rem;
}

/* -----------------------------------------------------------------------------
   KPI tiles (.cos-stat) — gradient icon, delta chip, optional sparkline
   -------------------------------------------------------------------------- */
body.cos-app--workspace .cos-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 6.25rem;
    padding: 1rem 1.1rem;
    border-radius: var(--vc-radius);
    background: var(--vc-surface);
    border: 1px solid var(--vc-line);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.cos-app--workspace .cos-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vc-jade-2), var(--vc-mint));
    opacity: 0.9;
}

body.cos-app--workspace .cos-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--vc-shadow);
    border-color: rgba(15, 118, 110, 0.24);
}

body.cos-app--workspace .cos-stat__icon {
    display: inline-grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.9rem;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.15rem;
    background: linear-gradient(145deg, var(--vc-jade-2), var(--vc-jade));
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.28);
}

body.cos-app--workspace .cos-stat__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

body.cos-app--workspace .cos-stat__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.cos-app--workspace .cos-stat__value {
    font-family: var(--cos-font-display, inherit);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--cos-ink, #0b1f2a);
}

body.cos-app--workspace .cos-stat--gold::before { background: linear-gradient(90deg, var(--vc-gold-2), var(--vc-gold)); }
body.cos-app--workspace .cos-stat--gold .cos-stat__icon { background: linear-gradient(145deg, var(--vc-gold-2), var(--vc-gold) 60%, #8b6914); color: #1a1406; box-shadow: 0 10px 22px rgba(139, 105, 20, 0.28); }
body.cos-app--workspace .cos-stat--accent::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
body.cos-app--workspace .cos-stat--accent .cos-stat__icon { background: linear-gradient(145deg, #60a5fa, #2563eb); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28); }
body.cos-app--workspace .cos-stat--warn::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
body.cos-app--workspace .cos-stat--warn .cos-stat__icon { background: linear-gradient(145deg, #fbbf24, #d97706); box-shadow: 0 10px 22px rgba(217, 119, 6, 0.28); }
body.cos-app--workspace .cos-stat--danger::before { background: linear-gradient(90deg, #ef4444, #f87171); }
body.cos-app--workspace .cos-stat--danger .cos-stat__icon { background: linear-gradient(145deg, #f87171, #b91c1c); box-shadow: 0 10px 22px rgba(185, 28, 28, 0.28); }

.vc-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    margin-top: 0.15rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.vc-delta.is-up { background: rgba(6, 118, 71, 0.12); color: #067647; }
.vc-delta.is-down { background: rgba(180, 35, 24, 0.12); color: #b42318; }
.vc-delta.is-flat { background: rgba(91, 107, 115, 0.12); color: var(--vc-muted); }

body.cos-app--workspace .cos-analytics__delta { composes: vc-delta; }

.vc-spark {
    position: absolute;
    inset-inline-end: 0.75rem;
    bottom: 0.5rem;
    width: 6rem;
    height: 2rem;
    opacity: 0.9;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Panels, tables, pills
   -------------------------------------------------------------------------- */
body.cos-app--workspace .cos-panel,
body.cos-app--workspace .card.border-0.shadow-sm {
    border-radius: var(--vc-radius) !important;
    background: var(--vc-surface) !important;
    border: 1px solid var(--vc-line) !important;
    box-shadow: var(--vc-shadow-sm) !important;
}

body.cos-app--workspace .cos-panel {
    padding: 1.25rem 1.35rem;
}

body.cos-app--workspace .cos-panel.p-0 { padding: 0; }

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

.vc-panel-head h2,
.vc-panel-head h3 {
    margin: 0;
    font-family: var(--cos-font-display, inherit);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.vc-panel-head h2 i,
.vc-panel-head h3 i {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    background: rgba(15, 118, 110, 0.1);
    color: var(--vc-jade);
    font-size: 0.9rem;
}

.vc-panel-head p {
    margin: 0.15rem 0 0;
    color: var(--vc-muted);
    font-size: 0.84rem;
}

body.cos-app--workspace .cos-table-wrap,
body.cos-app--workspace .table-responsive {
    border-radius: 0.9rem;
}

body.cos-app--workspace .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

body.cos-app--workspace .table thead th {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vc-muted);
    background: rgba(15, 118, 110, 0.05);
    border-bottom: 1px solid var(--vc-line);
    padding: 0.7rem 0.85rem;
    white-space: nowrap;
}

body.cos-app--workspace .table tbody td {
    padding: 0.7rem 0.85rem;
    border-color: var(--vc-line);
    vertical-align: middle;
}

body.cos-app--workspace .table-hover tbody tr:hover {
    --bs-table-hover-bg: rgba(15, 118, 110, 0.05);
}

.vc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: rgba(91, 107, 115, 0.12);
    color: var(--vc-muted);
}

.vc-pill::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.vc-pill--ok, .vc-pill--success, .vc-pill--active, .vc-pill--paid, .vc-pill--verified, .vc-pill--succeeded { background: rgba(6, 118, 71, 0.12); color: #067647; }
.vc-pill--warn, .vc-pill--pending, .vc-pill--running, .vc-pill--queued { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.vc-pill--danger, .vc-pill--failed, .vc-pill--rejected, .vc-pill--suspended, .vc-pill--error { background: rgba(180, 35, 24, 0.12); color: #b42318; }
.vc-pill--info, .vc-pill--draft { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.vc-pill--gold, .vc-pill--highlight { background: rgba(201, 162, 39, 0.16); color: #8b6914; }

body.cos-app--workspace .badge.text-bg-success { background: rgba(6, 118, 71, 0.12) !important; color: #067647 !important; }
body.cos-app--workspace .badge.text-bg-warning { background: rgba(180, 83, 9, 0.12) !important; color: #b45309 !important; }
body.cos-app--workspace .badge.text-bg-danger { background: rgba(180, 35, 24, 0.12) !important; color: #b42318 !important; }
body.cos-app--workspace .badge.text-bg-secondary { background: rgba(91, 107, 115, 0.12) !important; color: var(--vc-muted) !important; }
body.cos-app--workspace .badge.text-bg-primary { background: rgba(15, 118, 110, 0.12) !important; color: var(--vc-jade) !important; }
body.cos-app--workspace .badge { border-radius: 999px; font-weight: 800; letter-spacing: 0.03em; padding: 0.3rem 0.6rem; }

/* Tabs */
body.cos-app--workspace .cos-tabs .nav-link {
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-weight: 700;
    color: var(--vc-muted);
    border: 1px solid transparent;
}

body.cos-app--workspace .cos-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--vc-jade-2), var(--vc-jade)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.25);
}

/* Buttons inside the console keep the Verion pill language */
body.cos-app--workspace .btn { border-radius: 999px; font-weight: 700; }
body.cos-app--workspace .btn-primary { --bs-btn-bg: var(--vc-jade); --bs-btn-border-color: var(--vc-jade); --bs-btn-hover-bg: #0d5f59; --bs-btn-hover-border-color: #0d5f59; }
body.cos-app--workspace .btn-outline-primary { --bs-btn-color: var(--vc-jade); --bs-btn-border-color: rgba(15, 118, 110, 0.4); --bs-btn-hover-bg: var(--vc-jade); --bs-btn-hover-border-color: var(--vc-jade); }
body.cos-app--workspace .form-control,
body.cos-app--workspace .form-select {
    border-radius: 0.8rem;
    border-color: var(--vc-line);
    background: var(--vc-surface);
}

body.cos-app--workspace .form-control:focus,
body.cos-app--workspace .form-select:focus {
    border-color: var(--vc-jade-2);
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.14);
}

/* -----------------------------------------------------------------------------
   Uniform card grids (coupons, services, plans) — equal height & width
   -------------------------------------------------------------------------- */
.vc-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--vc-grid-min, 15.5rem), 1fr));
}

.vc-grid[hidden] { display: none; }

.vc-grid > * { min-width: 0; }

.vc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.15rem 1.15rem 1rem;
    border-radius: var(--vc-radius);
    background: var(--vc-surface);
    border: 1px solid var(--vc-line);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.vc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--vc-shadow);
    border-color: rgba(15, 118, 110, 0.24);
}

.vc-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.vc-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    color: #fff;
    font-size: 1.1rem;
    background: linear-gradient(145deg, var(--vc-jade-2), var(--vc-jade));
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.28);
    flex-shrink: 0;
}

.vc-card h3 {
    margin: 0 0 0.3rem;
    font-family: var(--cos-font-display, inherit);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.vc-card p {
    margin: 0;
    color: var(--vc-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.vc-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.75rem 0;
}

.vc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--vc-line);
}

.vc-price {
    font-family: var(--cos-font-display, inherit);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cos-ink, #0b1f2a);
}

.vc-price small {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vc-muted);
}

/* Coupon tickets — fixed visual size, perforated edge, colour themes */
.vc-coupon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 13.5rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--vc-coupon-a, #0f766e), var(--vc-coupon-b, #14b8a6));
    box-shadow: 0 16px 36px rgba(11, 31, 42, 0.18);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vc-coupon:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 24px 48px rgba(11, 31, 42, 0.26); }

.vc-coupon::before,
.vc-coupon::after {
    content: "";
    position: absolute;
    top: 58%;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--vc-paper);
    transform: translateY(-50%);
    z-index: 1;
}

.vc-coupon::before { inset-inline-start: -0.75rem; }
.vc-coupon::after { inset-inline-end: -0.75rem; }

.vc-coupon__shine {
    position: absolute;
    inset: -40% -20% auto auto;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%);
    pointer-events: none;
}

.vc-coupon__state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.vc-coupon__state.is-off { background: rgba(0, 0, 0, 0.22); }

.vc-coupon__code {
    margin-top: 0.6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    direction: ltr;
    text-align: start;
}

.vc-coupon__value {
    font-family: var(--cos-font-display, inherit);
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0.35rem 0 0.2rem;
}

.vc-coupon__value small {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.85;
    margin-inline-start: 0.2rem;
}

.vc-coupon__note {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-coupon__dash {
    margin: 0.75rem 0 0.6rem;
    border-top: 2px dashed rgba(255, 255, 255, 0.35);
}

.vc-coupon__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.8);
}

.vc-coupon__foot .btn-light {
    --bs-btn-bg: rgba(255, 255, 255, 0.92);
    --bs-btn-border-color: transparent;
    --bs-btn-color: #0b1f2a;
    font-size: 0.76rem;
    padding: 0.28rem 0.7rem;
}

.vc-coupon__foot .btn-outline-light { font-size: 0.76rem; padding: 0.28rem 0.7rem; }

.vc-coupon--jade { --vc-coupon-a: #0f766e; --vc-coupon-b: #14b8a6; }
.vc-coupon--gold { --vc-coupon-a: #8b6914; --vc-coupon-b: #e8d48b; color: #1a1406; }
.vc-coupon--gold .vc-coupon__note, .vc-coupon--gold .vc-coupon__foot { color: rgba(26, 20, 6, 0.8); }
.vc-coupon--gold .vc-coupon__state { background: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.5); }
.vc-coupon--ink { --vc-coupon-a: #061218; --vc-coupon-b: #143042; }
.vc-coupon--rose { --vc-coupon-a: #9f1239; --vc-coupon-b: #fb7185; }
.vc-coupon--violet { --vc-coupon-a: #4c1d95; --vc-coupon-b: #a78bfa; }
.vc-coupon--sky { --vc-coupon-a: #075985; --vc-coupon-b: #38bdf8; }
.vc-coupon--amber { --vc-coupon-a: #92400e; --vc-coupon-b: #fbbf24; }
.vc-coupon--emerald { --vc-coupon-a: #065f46; --vc-coupon-b: #34d399; }

/* Plans (admin + public grid share the same structure) */
.vc-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.35rem 1.25rem 1.2rem;
    border-radius: 1.25rem;
    background: var(--vc-surface);
    border: 1px solid var(--vc-line);
    box-shadow: var(--vc-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.vc-plan:hover { transform: translateY(-3px); box-shadow: var(--vc-shadow); }

.vc-plan.is-highlighted {
    border-color: rgba(15, 118, 110, 0.45);
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.25), var(--vc-shadow);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), var(--vc-surface) 40%);
}

.vc-plan__badge {
    position: absolute;
    top: -0.7rem;
    inset-inline-start: 1.1rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1406;
    background: linear-gradient(135deg, var(--vc-gold-2), var(--vc-gold));
    box-shadow: 0 8px 18px rgba(139, 105, 20, 0.28);
}

.vc-plan__name { margin: 0.2rem 0 0.15rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.vc-plan__audience { margin: 0; font-size: 0.78rem; color: var(--vc-muted); }

.vc-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.9rem 0 0.35rem;
}

.vc-plan__amount { font-family: var(--cos-font-display, inherit); font-size: 1.9rem; font-weight: 900; letter-spacing: -0.04em; }
.vc-plan__interval { font-size: 0.78rem; color: var(--vc-muted); font-weight: 700; }
.vc-plan__was { font-size: 0.8rem; color: var(--vc-muted); text-decoration: line-through; }

.vc-plan__save {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #067647;
    background: rgba(6, 118, 71, 0.12);
}

.vc-plan__features {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.vc-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.84rem;
    line-height: 1.4;
}

.vc-plan__features li i { color: var(--vc-jade); margin-top: 0.15rem; }
.vc-plan__features li.is-off { color: var(--vc-muted); }
.vc-plan__features li.is-off i { color: rgba(91, 107, 115, 0.45); }

.vc-plan__matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.9rem;
}

.vc-plan__cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.65rem;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(15, 118, 110, 0.07);
    color: var(--cos-ink, #0b1f2a);
}

.vc-plan__cell.is-off { background: rgba(91, 107, 115, 0.08); color: var(--vc-muted); text-decoration: line-through; }
.vc-plan__cell i { color: var(--vc-jade); }
.vc-plan__cell.is-off i { color: rgba(91, 107, 115, 0.5); }

.vc-plan__foot { margin-top: auto; padding-top: 1rem; display: grid; gap: 0.5rem; }

.vc-toggle {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid var(--vc-line);
}

.vc-toggle button,
.vc-toggle a {
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--vc-muted);
    font-weight: 800;
    font-size: 0.84rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.vc-toggle .is-active,
.vc-toggle [aria-pressed="true"] {
    background: linear-gradient(135deg, var(--vc-jade-2), var(--vc-jade));
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28);
}

.vc-toggle .vc-toggle__save {
    margin-inline-start: 0.35rem;
    font-size: 0.66rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.2);
    color: #8b6914;
}

/* -----------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */
.vc-chart {
    position: relative;
    height: 16rem;
}

.vc-chart--tall { height: 20rem; }
.vc-chart--short { height: 11rem; }
.vc-chart canvas { width: 100% !important; height: 100% !important; }

.vc-chart__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--vc-muted);
    font-size: 0.86rem;
}

.vc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: 0.78rem;
    color: var(--vc-muted);
}

.vc-legend span::before {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.2rem;
    margin-inline-end: 0.35rem;
    background: var(--c, var(--vc-jade));
    vertical-align: middle;
}

/* Timeline / activity feed */
.vc-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }

.vc-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: start;
    padding: 0.6rem 0.4rem;
    border-radius: 0.75rem;
}

.vc-timeline li:hover { background: rgba(15, 118, 110, 0.05); }

.vc-timeline__dot {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    background: rgba(15, 118, 110, 0.1);
    color: var(--vc-jade);
    font-size: 0.85rem;
}

.vc-timeline__time { font-size: 0.72rem; color: var(--vc-muted); white-space: nowrap; }

/* Progress meter */
.vc-meter { height: 0.55rem; border-radius: 999px; background: rgba(15, 118, 110, 0.1); overflow: hidden; }
.vc-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vc-gold), var(--vc-jade-2), var(--vc-mint)); }

/* Empty state */
.vc-empty {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2.25rem 1rem;
    color: var(--vc-muted);
}

.vc-empty i { font-size: 1.8rem; color: var(--vc-jade); opacity: 0.6; }
.vc-empty strong { color: var(--cos-ink, #0b1f2a); }

/* Reveal motion */
.cos-reveal { animation: vc-rise 0.5s ease both; }
@keyframes vc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .cos-reveal, .vc-card, .vc-coupon, .vc-plan, body.cos-app--workspace .cos-stat { animation: none !important; transition: none !important; }
}

/* Mobile */
@media (max-width: 991.98px) {
    /* Off-canvas rail on phones/tablets: the sticky desktop rule above must not win here,
       otherwise the sidebar keeps a full-viewport grid row and members see a blank screen
       above the header. */
    body.cos-app--workspace .cos-sidebar {
        position: fixed;
        top: 0;
        inset-block: 0;
        height: auto;
        max-height: none;
        width: min(var(--cos-sidebar-w), 88vw);
        max-width: 20rem;
        z-index: 1045;
    }
    body.cos-app--workspace .cos-sidebar::before { position: static; }
    /* Physical insets: the drawer parks fully off-screen on its own side and slides in on .is-open. */
    html[dir="ltr"] body.cos-app--workspace .cos-sidebar,
    html:not([dir="rtl"]) body.cos-app--workspace .cos-sidebar { left: 0; right: auto; transform: translateX(calc(-100% - 1rem)); }
    html[dir="rtl"] body.cos-app--workspace .cos-sidebar { left: auto; right: 0; transform: translateX(calc(100% + 1rem)); }
    html[dir="ltr"] body.cos-app--workspace .cos-sidebar.is-open,
    html:not([dir="rtl"]) body.cos-app--workspace .cos-sidebar.is-open,
    html[dir="rtl"] body.cos-app--workspace .cos-sidebar.is-open { transform: translateX(0); }
    body.cos-app--workspace .cos-sidebar-overlay { inset: 0; z-index: 1040; }
    body.cos-app--workspace .cos-workspace { grid-template-rows: auto; grid-template-columns: minmax(0, 1fr); }
    .vc-topbar { padding: 0.5rem 0.85rem; }
    .vc-tool--search { display: none; }
    .vc-user__name { display: none; }
    .vc-user { padding: 0.25rem; max-width: none; }
    .vc-topbar__sub { display: none; }
    body.cos-app--workspace .cos-workspace-footer { justify-content: center; text-align: center; }
}

/* -----------------------------------------------------------------------------
   Wave 3 components — avatars, steps, stacked meters, segmented filters,
   score rings, dimension bars, key/value grids, chips, QR cards, sparklines
   -------------------------------------------------------------------------- */
.vc-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(201, 162, 39, 0.16));
    color: var(--vc-jade);
    font-weight: 800;
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.vc-avatar--sm { width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; font-size: 0.9rem; }
.vc-avatar--lg { width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; font-size: 1.35rem; }
.vc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.vc-steps { counter-reset: vc-step; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vc-steps li { position: relative; padding-inline-start: 2.4rem; font-size: 0.9rem; line-height: 1.55; }
.vc-steps li::before {
    counter-increment: vc-step;
    content: counter(vc-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0.05rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--vc-ink);
    color: var(--vc-gold-2);
    font-weight: 800;
    font-size: 0.78rem;
}

.vc-stack__bar { display: flex; height: 0.7rem; border-radius: 999px; overflow: hidden; background: rgba(15, 118, 110, 0.08); }
.vc-stack__seg { display: block; height: 100%; background: var(--vc-muted); transition: width 0.5s ease; }
.vc-stack__seg--ok { background: linear-gradient(90deg, var(--vc-jade), var(--vc-jade-2)); }
.vc-stack__seg--warn { background: linear-gradient(90deg, var(--vc-gold), var(--vc-gold-2)); }
.vc-stack__seg--danger { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.vc-stack__seg--info { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }
.vc-stack__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--vc-muted); font-weight: 600; }
.vc-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--vc-muted); margin-inline-end: 0.35rem; vertical-align: middle; }
.vc-dot--ok { background: var(--vc-jade-2); }
.vc-dot--warn { background: var(--vc-gold); }
.vc-dot--danger { background: #ef4444; }
.vc-dot--info { background: #3b82f6; }

.vc-segmented { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: rgba(15, 118, 110, 0.07); }
.vc-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vc-muted);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.vc-segmented__item:hover { color: var(--vc-ink); }
.vc-segmented__item.is-active { background: var(--vc-surface); color: var(--vc-ink); box-shadow: var(--vc-shadow-sm); }
[data-bs-theme="dark"] .vc-segmented__item.is-active { color: #e8f1ef; }
.vc-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: rgba(11, 31, 42, 0.08); font-size: 0.68rem; font-weight: 800; }
.vc-segmented__item.is-active .vc-count { background: var(--vc-ink); color: var(--vc-gold-2); }

.vc-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vc-muted); font-weight: 800; border-bottom: 1px solid var(--vc-line); background: rgba(15, 118, 110, 0.04); }
.vc-table tbody td { border-color: var(--vc-line); }
.vc-table tbody tr:hover { background: rgba(15, 118, 110, 0.04); }

/* Score ring: set --v (0-100) and optional --ring-color */
.vc-ring {
    --v: 0;
    --ring-color: var(--vc-jade-2);
    --ring-size: 7.5rem;
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--v) * 1%), rgba(15, 118, 110, 0.1) 0);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.vc-ring::before { content: ""; position: absolute; inset: 0.6rem; border-radius: 50%; background: var(--vc-surface); }
.vc-ring__value { position: relative; font-family: var(--cos-font-display, inherit); font-weight: 900; font-size: calc(var(--ring-size) * 0.27); line-height: 1; color: var(--vc-ink); }
.vc-ring__value small { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-muted); margin-top: 0.25rem; }
[data-bs-theme="dark"] .vc-ring__value { color: #e8f1ef; }
.vc-ring--gold { --ring-color: var(--vc-gold); }
.vc-ring--danger { --ring-color: #ef4444; }
.vc-ring--info { --ring-color: #3b82f6; }
.vc-ring--lg { --ring-size: 10rem; }

.vc-dim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px dashed var(--vc-line); }
.vc-dim:last-child { border-bottom: 0; }
.vc-dim__label { font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 0.45rem; }
.vc-dim__label i { color: var(--vc-jade); }
.vc-dim__value { font-weight: 800; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.vc-dim__bar { grid-column: 1 / -1; height: 0.45rem; border-radius: 999px; background: rgba(15, 118, 110, 0.08); overflow: hidden; }
.vc-dim__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vc-jade), var(--vc-jade-2)); transition: width 0.6s ease; }
.vc-dim--gold .vc-dim__bar > span { background: linear-gradient(90deg, var(--vc-gold), var(--vc-gold-2)); }
.vc-dim--danger .vc-dim__bar > span { background: linear-gradient(90deg, #b91c1c, #f87171); }
.vc-dim--info .vc-dim__bar > span { background: linear-gradient(90deg, #1d4ed8, #60a5fa); }

.vc-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; margin: 0; }
.vc-kv > div { padding: 0.7rem 0.85rem; border: 1px solid var(--vc-line); border-radius: var(--vc-radius-sm); background: rgba(15, 118, 110, 0.03); min-width: 0; }
.vc-kv dt { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-muted); margin-bottom: 0.2rem; }
.vc-kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.vc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.65rem; border-radius: 999px; border: 1px solid var(--vc-line); background: var(--vc-surface); font-size: 0.76rem; font-weight: 700; color: var(--vc-ink); }
[data-bs-theme="dark"] .vc-chip { color: #e8f1ef; }
.vc-chip--jade { background: rgba(15, 118, 110, 0.1); border-color: transparent; color: var(--vc-jade); }
.vc-chip--gold { background: rgba(201, 162, 39, 0.16); border-color: transparent; color: #8a6a0f; }
.vc-chip--ink { background: var(--vc-ink); border-color: transparent; color: var(--vc-gold-2); }
.vc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.vc-feature { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.85rem; align-items: start; padding: 1rem; border: 1px solid var(--vc-line); border-radius: var(--vc-radius-sm); background: var(--vc-surface); height: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.vc-feature:hover { transform: translateY(-2px); box-shadow: var(--vc-shadow-sm); }
.vc-feature__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(201, 162, 39, 0.16)); color: var(--vc-jade); font-size: 1.15rem; }
.vc-feature strong { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.vc-feature p { margin: 0; font-size: 0.8rem; color: var(--vc-muted); line-height: 1.5; }
a.vc-feature { color: inherit; text-decoration: none; }

.vc-qr { display: grid; place-items: center; gap: 0.75rem; padding: 1.1rem; border-radius: var(--vc-radius); background: var(--vc-surface); border: 1px solid var(--vc-line); box-shadow: var(--vc-shadow-sm); text-align: center; }
.vc-qr__frame { padding: 0.65rem; border-radius: 0.9rem; background: #fff; border: 1px solid rgba(11, 31, 42, 0.12); }
.vc-qr__frame svg, .vc-qr__frame img { display: block; width: 11rem; height: 11rem; }
.vc-qr__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: 0.18em; font-size: 1.05rem; color: var(--vc-ink); }
[data-bs-theme="dark"] .vc-qr__code { color: #e8f1ef; }

.vc-spark { width: 100%; height: 3.2rem; display: block; }
.vc-spark path { fill: none; stroke: var(--vc-jade-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vc-spark .vc-spark__area { fill: rgba(20, 184, 166, 0.14); stroke: none; }

.vc-tip { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--vc-radius-sm); background: rgba(201, 162, 39, 0.1); border: 1px solid rgba(201, 162, 39, 0.25); font-size: 0.85rem; }
.vc-tip i { color: #8a6a0f; font-size: 1.1rem; }

.vc-hero-score { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.vc-hero-score .vc-ring::before { background: var(--vc-ink-2); }
.vc-hero-score .vc-ring__value { color: #fff; }
.vc-hero-score .vc-ring__value small { color: var(--vc-gold-2); }

.vc-result { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; padding: 0.85rem 1rem; border-bottom: 1px solid var(--vc-line); color: inherit; text-decoration: none; transition: background 0.15s ease; }
.vc-result:last-child { border-bottom: 0; }
.vc-result:hover { background: rgba(15, 118, 110, 0.05); color: inherit; }
.vc-result strong { display: block; font-size: 0.95rem; }
.vc-result p { margin: 0; font-size: 0.8rem; color: var(--vc-muted); }
.vc-result mark { background: rgba(201, 162, 39, 0.35); padding: 0 0.1em; border-radius: 0.2em; color: inherit; }
.vc-search-hero { display: grid; gap: 0.75rem; }
.vc-search-hero .form-control { height: 3.4rem; font-size: 1.05rem; border-radius: 1rem; padding-inline: 1.1rem; }