:root {
    --link-accent: #5147f5;
    --link-accent-soft: #efefff;
    --link-background: #f7f8fc;
    --link-surface: #ffffff;
    --link-surface-soft: #fafbfe;
    --link-text: #171923;
    --link-muted: #697386;
    --link-border: #e7e9ef;
    --link-sidebar-width: 260px;
    --link-topbar-height: 64px;
}

html {
    background: var(--link-background);
}

body.link-app-shell {
    margin: 0;
    min-height: 100dvh;
    background: var(--link-background);
    color: var(--link-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.link-app-shell * {
    box-sizing: border-box;
}

.link-app-shell__main {
    min-height: 100dvh;
}

.link-app {
    min-height: 100dvh;
    background: var(--link-background);
}

.link-app__sidebar {
    display: none;
}

.link-app__workspace {
    min-width: 0;
    min-height: 100dvh;
}

.link-app__topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: var(--link-topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding:
        max(8px, env(safe-area-inset-top))
        18px
        8px;
    border-bottom: 1px solid var(--link-border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
}

.link-app__mobile-brand,
.link-app__brand {
    color: var(--link-text);
    text-decoration: none;
}

.link-app__mobile-brand {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
}

.link-app__mobile-brand strong {
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.link-app__brand {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 11px;
}

.link-app__brand-mark {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: var(--link-accent);
    color: #ffffff;
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
}

.link-app__brand-copy,
.link-app__account-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.link-app__brand-copy strong {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.link-app__brand-copy small,
.link-app__account-copy small {
    color: var(--link-muted);
    font-size: 11px;
    line-height: 1.3;
}

.link-app__topbar-account {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.link-app__topbar-name {
    display: none;
    max-width: 150px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__avatar {
    display: inline-grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--link-border);
    border-radius: 14px;
    background: var(--link-accent-soft);
    color: var(--link-accent);
    font-size: 14px;
    font-weight: 850;
}

.link-app__avatar--small {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.link-app__content {
    width: min(100% - 32px, 1120px);
    margin: 0 auto;
    padding:
        26px
        0
        calc(
            104px
            + env(safe-area-inset-bottom)
        );
}

.link-app__view[hidden] {
    display: none !important;
}

.link-app__view {
    min-width: 0;
}

.link-app__view-header {
    max-width: 760px;
}

.link-app__eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--link-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.link-app__view-header h1 {
    margin: 0;
    color: var(--link-text);
    font-size: clamp(30px, 8vw, 46px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.link-app__view-header h1:focus {
    outline: none;
}

.link-app__view-header p {
    max-width: 620px;
    margin: 13px 0 0;
    color: var(--link-muted);
    font-size: 15px;
    line-height: 1.65;
}

.link-app__view-placeholder {
    display: flex;
    min-height: 160px;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 24px;
    border: 1px solid var(--link-border);
    border-radius: 22px;
    background: var(--link-surface);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.02),
        0 12px 32px rgba(15, 23, 42, 0.035);
}

.link-app__placeholder-mark {
    display: inline-grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 15px;
    background: var(--link-accent-soft);
    color: var(--link-accent);
    font-size: 18px;
    font-weight: 850;
}

.link-app__view-placeholder strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.link-app__view-placeholder p {
    margin: 0;
    color: var(--link-muted);
    font-size: 13px;
    line-height: 1.55;
}

.link-app__mobile-nav {
    position: fixed;
    right: 10px;
    bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        );
    left: 10px;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--link-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 16px 44px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(20px);
}

.link-app__nav {
    display: grid;
    gap: 4px;
}

.link-app__nav-item {
    display: flex;
    min-width: 0;
    color: var(--link-muted);
    font-weight: 700;
    text-decoration: none;
}

.link-app__mobile-nav .link-app__nav-item {
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border-radius: 14px;
    font-size: 9px;
    text-align: center;
}

.link-app__nav-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.link-app__nav-label {
    min-width: 0;
}

.link-app__mobile-nav .link-app__nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__nav-item.is-active {
    background: var(--link-accent-soft);
    color: var(--link-accent);
}

.link-app__live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.link-app--state {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 20px;
    background: var(--link-background);
}

.link-app__state {
    width: min(100%, 440px);
    padding: 32px 26px;
    border: 1px solid var(--link-border);
    border-radius: 26px;
    background: var(--link-surface);
    box-shadow:
        0 22px 60px rgba(15, 23, 42, 0.08);
}

.link-app__state h1 {
    margin: 18px 0 8px;
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.link-app__state p {
    margin: 0;
    color: var(--link-muted);
    font-size: 15px;
    line-height: 1.6;
}

.link-app__button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--link-accent);
    color: #ffffff;
    font-weight: 750;
    text-decoration: none;
}

.link-app a:focus-visible,
.link-app button:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--link-accent) 32%,
            transparent
        );
    outline-offset: 3px;
}

@media (min-width: 520px) {
    .link-app__topbar-name {
        display: block;
    }

    .link-app__content {
        width: min(100% - 44px, 1120px);
        padding-top: 34px;
    }

    .link-app__view-placeholder {
        padding: 28px;
    }
}

@media (min-width: 900px) {
    .link-app {
        display: grid;
        grid-template-columns:
            var(--link-sidebar-width)
            minmax(0, 1fr);
    }

    .link-app__sidebar {
        position: sticky;
        top: 0;
        display: flex;
        height: 100dvh;
        flex-direction: column;
        padding: 22px 16px 18px;
        border-right: 1px solid var(--link-border);
        background: var(--link-surface);
    }

    .link-app__sidebar .link-app__brand {
        margin: 0 8px 30px;
    }

    .link-app__nav {
        flex: 1;
        align-content: start;
    }

    .link-app__nav .link-app__nav-item {
        min-height: 48px;
        align-items: center;
        gap: 11px;
        padding: 0 13px;
        border-radius: 14px;
        font-size: 14px;
    }

    .link-app__nav .link-app__nav-icon {
        font-size: 20px;
    }

    .link-app__sidebar-account {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        padding: 12px 9px 0;
        border-top: 1px solid var(--link-border);
    }

    .link-app__account-copy {
        overflow: hidden;
    }

    .link-app__account-copy strong {
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .link-app__topbar {
        display: none;
    }

    .link-app__content {
        width: min(100% - 64px, 1120px);
        padding:
            48px
            0
            64px;
    }

    .link-app__mobile-nav {
        display: none;
    }

    .link-app__view-placeholder {
        min-height: 190px;
        margin-top: 34px;
        padding: 32px;
    }
}

@media (min-width: 1200px) {
    :root {
        --link-sidebar-width: 280px;
    }

    .link-app__content {
        width: min(100% - 88px, 1180px);
        padding-top: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================
   LINK DESIGN SYSTEM
   ========================================================== */

.link-app {
    --link-accent-strong: #4037dc;
    --link-accent-contrast: #ffffff;

    --link-success: #17875d;
    --link-success-soft: #eaf8f2;

    --link-warning: #a45b09;
    --link-warning-soft: #fff6e7;

    --link-danger: #c33c48;
    --link-danger-soft: #fff0f1;

    --link-info: #3157c8;
    --link-info-soft: #eef3ff;

    --link-radius-xs: 8px;
    --link-radius-sm: 12px;
    --link-radius-md: 16px;
    --link-radius-lg: 22px;
    --link-radius-xl: 28px;

    --link-shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --link-shadow-sm:
        0 4px 14px rgba(15, 23, 42, 0.05);

    --link-shadow-md:
        0 12px 32px rgba(15, 23, 42, 0.07);

    --link-shadow-lg:
        0 24px 64px rgba(15, 23, 42, 0.1);

    --link-space-1: 4px;
    --link-space-2: 8px;
    --link-space-3: 12px;
    --link-space-4: 16px;
    --link-space-5: 20px;
    --link-space-6: 24px;
    --link-space-8: 32px;
    --link-space-10: 40px;
    --link-space-12: 48px;

    --link-control-sm: 38px;
    --link-control-md: 44px;
    --link-control-lg: 50px;

    --link-transition:
        160ms ease;
}

/* Typography */

.link-app__title {
    margin: 0;
    color: var(--link-text);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.link-app__subtitle {
    margin: 0;
    color: var(--link-muted);
    font-size: 15px;
    line-height: 1.65;
}

.link-app__section-title {
    margin: 0;
    color: var(--link-text);
    font-size: 18px;
    font-weight: 780;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.link-app__section-description {
    margin: 5px 0 0;
    color: var(--link-muted);
    font-size: 13px;
    line-height: 1.55;
}

.link-app__meta {
    color: var(--link-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* Layout helpers */

.link-app__stack {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__stack--sm {
    gap: var(--link-space-2);
}

.link-app__stack--lg {
    gap: var(--link-space-6);
}

.link-app__cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--link-space-3);
}

.link-app__cluster--between {
    justify-content: space-between;
}

.link-app__grid {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__grid--2,
.link-app__grid--3,
.link-app__grid--4 {
    grid-template-columns: minmax(0, 1fr);
}

/* Surfaces */

.link-app__card {
    min-width: 0;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-lg);
    background: var(--link-surface);
    box-shadow: var(--link-shadow-xs);
}

.link-app__card--soft {
    background: var(--link-surface-soft);
    box-shadow: none;
}

.link-app__card--interactive {
    transition:
        transform var(--link-transition),
        box-shadow var(--link-transition),
        border-color var(--link-transition);
}

.link-app__card-body {
    padding: var(--link-space-5);
}

.link-app__panel {
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-md);
    background: var(--link-surface);
    padding: var(--link-space-4);
}

.link-app__divider {
    height: 1px;
    margin: var(--link-space-4) 0;
    border: 0;
    background: var(--link-border);
}

/* Buttons */

.link-app__button,
.link-app__button-secondary,
.link-app__button-ghost,
.link-app__icon-button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition:
        background-color var(--link-transition),
        border-color var(--link-transition),
        color var(--link-transition),
        transform var(--link-transition),
        box-shadow var(--link-transition);
}

.link-app__button,
.link-app__button-secondary,
.link-app__button-ghost {
    display: inline-flex;
    min-height: var(--link-control-lg);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--link-radius-sm);
    font-size: 14px;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
}

.link-app__button {
    border: 1px solid var(--link-accent);
    background: var(--link-accent);
    color: var(--link-accent-contrast);
    box-shadow:
        0 6px 18px
        color-mix(
            in srgb,
            var(--link-accent) 20%,
            transparent
        );
}

.link-app__button-secondary {
    border: 1px solid var(--link-border);
    background: var(--link-surface);
    color: var(--link-text);
    box-shadow: var(--link-shadow-xs);
}

.link-app__button-ghost {
    border: 1px solid transparent;
    background: transparent;
    color: var(--link-muted);
}

.link-app__button--small {
    min-height: var(--link-control-md);
    padding: 0 14px;
    font-size: 13px;
}

.link-app__button--full {
    width: 100%;
}

.link-app__button:hover {
    border-color: var(--link-accent-strong);
    background: var(--link-accent-strong);
}

.link-app__button-secondary:hover {
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 25%,
            var(--link-border)
        );
    color: var(--link-accent);
}

.link-app__button-ghost:hover {
    background: var(--link-accent-soft);
    color: var(--link-accent);
}

.link-app__button:active,
.link-app__button-secondary:active,
.link-app__button-ghost:active {
    transform: translateY(1px);
}

.link-app__icon-button {
    display: inline-grid;
    width: var(--link-control-md);
    height: var(--link-control-md);
    place-items: center;
    padding: 0;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-sm);
    background: var(--link-surface);
    color: var(--link-text);
}

.link-app__icon-button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 30%,
            var(--link-border)
        );
    background: var(--link-accent-soft);
    color: var(--link-accent);
}

/* Badges */

.link-app__badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--link-accent-soft);
    color: var(--link-accent);
    font-size: 11px;
    font-weight: 760;
    line-height: 1;
}

.link-app__badge--success {
    background: var(--link-success-soft);
    color: var(--link-success);
}

.link-app__badge--warning {
    background: var(--link-warning-soft);
    color: var(--link-warning);
}

.link-app__badge--danger {
    background: var(--link-danger-soft);
    color: var(--link-danger);
}

.link-app__badge--neutral {
    background: #f1f3f7;
    color: var(--link-muted);
}

/* Status dots */

.link-app__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--link-muted);
    font-size: 12px;
    font-weight: 700;
}

.link-app__status::before {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.link-app__status--success {
    color: var(--link-success);
}

.link-app__status--warning {
    color: var(--link-warning);
}

.link-app__status--danger {
    color: var(--link-danger);
}

/* Stat cards */

.link-app__stat {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: var(--link-space-5);
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-md);
    background: var(--link-surface);
    box-shadow: var(--link-shadow-xs);
}

.link-app__stat-label {
    color: var(--link-muted);
    font-size: 12px;
    font-weight: 700;
}

.link-app__stat-value {
    color: var(--link-text);
    font-size: 28px;
    font-weight: 820;
    line-height: 1;
    letter-spacing: -0.04em;
}

.link-app__stat-detail {
    color: var(--link-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* Empty / loading / error states */

.link-app__empty,
.link-app__loading,
.link-app__error {
    display: grid;
    min-height: 160px;
    place-items: center;
    padding: var(--link-space-6);
    border: 1px dashed var(--link-border);
    border-radius: var(--link-radius-lg);
    text-align: center;
}

.link-app__empty {
    background: var(--link-surface-soft);
}

.link-app__loading {
    background: var(--link-surface);
    color: var(--link-muted);
}

.link-app__error {
    border-color:
        color-mix(
            in srgb,
            var(--link-danger) 24%,
            var(--link-border)
        );
    background: var(--link-danger-soft);
    color: var(--link-danger);
}

.link-app__empty strong,
.link-app__loading strong,
.link-app__error strong {
    display: block;
    margin-bottom: 4px;
    color: inherit;
    font-size: 14px;
}

.link-app__empty p,
.link-app__loading p,
.link-app__error p {
    max-width: 440px;
    margin: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.55;
}

/* Lists */

.link-app__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-app__list-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--link-space-3);
    padding: var(--link-space-4) 0;
    border-bottom: 1px solid var(--link-border);
}

.link-app__list-item:first-child {
    padding-top: 0;
}

.link-app__list-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.link-app__list-content {
    min-width: 0;
    flex: 1;
}

.link-app__list-title {
    overflow: hidden;
    margin: 0;
    color: var(--link-text);
    font-size: 13px;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__list-description {
    overflow: hidden;
    margin: 3px 0 0;
    color: var(--link-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inputs */

.link-app__field {
    display: grid;
    gap: 7px;
}

.link-app__label {
    color: var(--link-text);
    font-size: 12px;
    font-weight: 740;
}

.link-app__input,
.link-app__select,
.link-app__textarea {
    width: 100%;
    min-height: var(--link-control-lg);
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-sm);
    background: var(--link-surface);
    color: var(--link-text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color var(--link-transition),
        box-shadow var(--link-transition);
}

.link-app__input,
.link-app__select {
    padding: 0 13px;
}

.link-app__textarea {
    min-height: 110px;
    padding: 12px 13px;
    resize: vertical;
}

.link-app__input:focus,
.link-app__select:focus,
.link-app__textarea:focus {
    border-color: var(--link-accent);
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--link-accent) 15%,
            transparent
        );
}

/* Skeleton */

.link-app__skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--link-radius-xs);
    background: #eef0f4;
}

.link-app__skeleton::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.72),
            transparent
        );
    content: "";
    transform: translateX(-100%);
    animation: link-skeleton 1.4s infinite;
}

@keyframes link-skeleton {
    to {
        transform: translateX(100%);
    }
}

/* Desktop enhancement */

@media (min-width: 700px) {
    .link-app__grid--2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .link-app__grid--3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .link-app__grid--4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .link-app__card-body {
        padding: var(--link-space-6);
    }
}

@media (min-width: 1000px) {
    .link-app__grid--3 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .link-app__grid--4 {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .link-app__card--interactive:hover {
        border-color:
            color-mix(
                in srgb,
                var(--link-accent) 22%,
                var(--link-border)
            );
        box-shadow: var(--link-shadow-md);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__skeleton::after {
        animation: none;
    }

    .link-app__card--interactive,
    .link-app__button,
    .link-app__button-secondary,
    .link-app__button-ghost,
    .link-app__icon-button {
        transition: none;
    }
}

/* LINK DASHBOARD */

.link-app__dashboard {
    display: grid;
    gap: var(--link-space-6);
}

.link-app__dashboard-hero {
    display: flex;
    flex-direction: column;
    gap: var(--link-space-5);
    padding: var(--link-space-6);
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-xl);
    background:
        linear-gradient(
            135deg,
            var(--link-accent-soft),
            var(--link-surface) 64%
        );
    box-shadow: var(--link-shadow-sm);
}

.link-app__dashboard-hero-copy {
    display: grid;
    gap: var(--link-space-2);
}

.link-app__dashboard-hero h1 {
    margin: 0;
    color: var(--link-text);
    font-size: clamp(2rem, 8vw, 3.35rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.link-app__dashboard-status {
    margin: var(--link-space-1) 0 0;
}

.link-app__dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--link-space-3);
}

.link-app__dashboard-stats {
    gap: var(--link-space-3);
}

.link-app__dashboard-stats .link-app__stat {
    min-height: 136px;
}

.link-app__dashboard-columns {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__dashboard-card-summary,
.link-app__dashboard-encounters {
    min-width: 0;
}

.link-app__card-preview {
    display: flex;
    align-items: center;
    gap: var(--link-space-4);
    min-height: 104px;
    margin-top: var(--link-space-5);
    padding: var(--link-space-4);
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-lg);
    background:
        linear-gradient(
            145deg,
            var(--link-accent-soft),
            var(--link-surface)
        );
}

.link-app__card-preview-mark {
    width: 56px;
    height: 56px;
    display: grid;
    flex: 0 0 56px;
    place-items: center;
    border-radius: var(--link-radius-md);
    background: var(--link-accent);
    color: var(--link-accent-contrast);
    font-size: 1.3rem;
    font-weight: 850;
    box-shadow: var(--link-shadow-xs);
}

.link-app__card-preview > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.link-app__card-preview strong {
    overflow: hidden;
    color: var(--link-text);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__card-preview span:not(.link-app__card-preview-mark) {
    overflow: hidden;
    color: var(--link-muted);
    font-size: .86rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__dashboard-card-actions {
    margin-top: var(--link-space-4);
}

.link-app__dashboard-card-actions .link-app__button {
    flex: 1 1 auto;
}

.link-app__text-link {
    color: var(--link-accent-strong);
    font-size: .86rem;
    font-weight: 750;
    text-decoration: none;
}

.link-app__text-link:hover,
.link-app__text-link:focus-visible {
    text-decoration: underline;
}

.link-app__dashboard-encounters .link-app__list {
    margin-top: var(--link-space-4);
}

.link-app__encounter-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--link-accent-soft);
    color: var(--link-accent-strong);
    font-size: .82rem;
    font-weight: 850;
}

.link-app__dashboard-empty {
    margin-top: var(--link-space-4);
    padding-block: var(--link-space-8);
}

@media (min-width: 700px) {
    .link-app__dashboard-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--link-space-8);
    }

    .link-app__dashboard-hero-actions {
        justify-content: flex-end;
    }

    .link-app__dashboard-card-actions .link-app__button {
        flex: 0 1 auto;
    }
}

@media (min-width: 1100px) {
    .link-app__dashboard-columns {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(320px, .92fr);
    }
}

/* LINK CARD EDITOR */

.link-app__card-editor {
    display: grid;
    gap: var(--link-space-6);
}

.link-app__editor-layout {
    display: grid;
    gap: var(--link-space-5);
}

.link-app__editor-form {
    display: grid;
    gap: var(--link-space-4);
    min-width: 0;
}

.link-app__editor-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--link-space-4);
    margin-bottom: var(--link-space-5);
}

.link-app__form-grid {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__form-grid--2 {
    grid-template-columns: minmax(0, 1fr);
}

.link-app__field {
    display: grid;
    gap: 8px;
    margin-bottom: var(--link-space-4);
    color: var(--link-text);
    font-size: .88rem;
    font-weight: 700;
}

.link-app__field:last-child {
    margin-bottom: 0;
}

.link-app__field > span:first-child {
    line-height: 1.35;
}

.link-app__field small {
    color: var(--link-muted);
    font-size: .75rem;
    font-weight: 500;
}

.link-app__field input,
.link-app__field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-md);
    outline: 0;
    background: var(--link-surface);
    color: var(--link-text);
    font: inherit;
    font-weight: 500;
    transition:
        border-color var(--link-transition),
        box-shadow var(--link-transition);
}

.link-app__field input:focus,
.link-app__field select:focus {
    border-color: var(--link-accent);
    box-shadow:
        0 0 0 3px var(--link-accent-soft);
}

.link-app__field input[type="color"] {
    width: 48px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    cursor: pointer;
}

.link-app__color-field {
    display: flex;
    align-items: center;
    gap: var(--link-space-3);
}

.link-app__color-field code {
    color: var(--link-muted);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: .8rem;
    font-weight: 600;
}

.link-app__slug-field {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-md);
    background: var(--link-surface);
}

.link-app__slug-field:focus-within {
    border-color: var(--link-accent);
    box-shadow:
        0 0 0 3px var(--link-accent-soft);
}

.link-app__slug-field > span {
    display: flex;
    align-items: center;
    padding-inline: 12px;
    border-right: 1px solid var(--link-border);
    background: var(--link-background);
    color: var(--link-muted);
    font-size: .82rem;
    font-weight: 700;
}

.link-app__slug-field input {
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

.link-app__editor-feedback {
    min-height: 24px;
    padding-inline: 2px;
    color: var(--link-muted);
    font-size: .84rem;
    font-weight: 650;
}

.link-app__editor-feedback[data-tone="loading"] {
    color: var(--link-info);
}

.link-app__editor-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__editor-feedback[data-tone="error"] {
    color: var(--link-danger);
}

.link-app__editor-sticky-actions {
    position: sticky;
    z-index: 8;
    bottom: calc(76px + env(safe-area-inset-bottom));
    display: flex;
    padding: 10px;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-lg);
    background:
        color-mix(
            in srgb,
            var(--link-surface) 94%,
            transparent
        );
    box-shadow: var(--link-shadow-md);
    backdrop-filter: blur(12px);
}

.link-app__editor-sticky-actions .link-app__button {
    width: 100%;
}

.link-app__editor-preview-column {
    min-width: 0;
}

.link-app__editor-preview-sticky {
    display: grid;
    gap: var(--link-space-3);
}

.link-app__editor-preview-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--link-space-3);
}

.link-app__editor-preview-heading strong {
    color: var(--link-text);
    font-size: .88rem;
}

.link-app__live-card {
    --link-preview-primary: #5147f5;
    --link-preview-secondary: #ffffff;

    display: grid;
    justify-items: center;
    gap: var(--link-space-4);
    min-height: 390px;
    padding: 34px 24px;
    overflow: hidden;
    border: 1px solid
        color-mix(
            in srgb,
            var(--link-preview-primary) 18%,
            var(--link-border)
        );
    border-radius: 28px;
    background:
        radial-gradient(
            circle at top,
            color-mix(
                in srgb,
                var(--link-preview-primary) 18%,
                var(--link-preview-secondary)
            ),
            var(--link-preview-secondary) 52%
        );
    box-shadow: var(--link-shadow-lg);
    color: #111827;
    text-align: center;
}

.link-app__live-card[data-theme="minimal"] {
    border-radius: 16px;
    background: var(--link-preview-secondary);
    box-shadow: var(--link-shadow-sm);
}

.link-app__live-card[data-theme="bold"] {
    border-color: var(--link-preview-primary);
    background:
        linear-gradient(
            155deg,
            var(--link-preview-primary),
            var(--link-preview-secondary) 80%
        );
}

.link-app__live-card-avatar {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--link-preview-primary);
    color: white;
    font-size: 1.65rem;
    font-weight: 900;
    box-shadow:
        0 12px 32px
        color-mix(
            in srgb,
            var(--link-preview-primary) 30%,
            transparent
        );
}

.link-app__live-card-copy {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.link-app__live-card-copy h3 {
    margin: 0;
    color: inherit;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.link-app__live-card-copy p {
    margin: 0;
    color: inherit;
    font-size: .92rem;
    font-weight: 650;
    opacity: .76;
}

.link-app__live-card-copy span {
    max-width: 280px;
    margin-top: 5px;
    color: inherit;
    font-size: .83rem;
    line-height: 1.5;
    opacity: .7;
}

.link-app__live-card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
}

.link-app__live-card-actions span {
    display: grid;
    min-height: 42px;
    place-items: center;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--link-preview-primary);
    color: white;
    font-size: .78rem;
    font-weight: 800;
}

.link-app__live-card[data-button-style="pill"]
.link-app__live-card-actions span {
    border-radius: 999px;
}

.link-app__live-card[data-button-style="square"]
.link-app__live-card-actions span {
    border-radius: 2px;
}

@media (min-width: 700px) {
    .link-app__form-grid--2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .link-app__editor-sticky-actions {
        position: static;
        justify-content: flex-end;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .link-app__editor-sticky-actions .link-app__button {
        width: auto;
        min-width: 180px;
    }
}

@media (min-width: 1100px) {
    .link-app__editor-layout {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(300px, .75fr);
        align-items: start;
    }

    .link-app__editor-preview-sticky {
        position: sticky;
        top: 24px;
    }
}

/* LINK CARD MEDIA */

.link-app__media-grid {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__media-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: var(--link-space-4);
    padding: var(--link-space-4);
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-lg);
    background: var(--link-background);
}

.link-app__media-preview {
    position: relative;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border: 1px solid var(--link-border);
    border-radius: 50%;
    background: var(--link-surface);
}

.link-app__media-preview--logo {
    border-radius: var(--link-radius-md);
}

.link-app__media-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.link-app__media-preview--logo img {
    padding: 8px;
    object-fit: contain;
}

.link-app__media-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            var(--link-accent-soft),
            var(--link-surface)
        );
    color: var(--link-accent-strong);
    font-size: 1.35rem;
    font-weight: 900;
}

.link-app__media-copy {
    min-width: 0;
    display: grid;
    gap: var(--link-space-3);
}

.link-app__media-copy > div:first-child {
    display: grid;
    gap: 3px;
}

.link-app__media-copy strong {
    color: var(--link-text);
    font-size: .92rem;
}

.link-app__media-copy span {
    color: var(--link-muted);
    font-size: .78rem;
}

.link-app__media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.link-app__media-actions .link-app__button {
    min-height: 38px;
    padding: 7px 11px;
    font-size: .78rem;
    cursor: pointer;
}

.link-app__media-actions input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.link-app__media-feedback {
    min-height: 22px;
    margin-top: var(--link-space-3);
    color: var(--link-muted);
    font-size: .78rem;
    font-weight: 600;
}

.link-app__media-feedback[data-tone="loading"] {
    color: var(--link-info);
}

.link-app__media-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__media-feedback[data-tone="error"] {
    color: var(--link-danger);
}

.link-app__live-card-avatar[data-has-media="1"] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 480px) {
    .link-app__media-item {
        grid-template-columns: 72px minmax(0, 1fr);
        padding: var(--link-space-3);
    }

    .link-app__media-preview {
        width: 72px;
        height: 72px;
    }
}

@media (min-width: 700px) {
    .link-app__media-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .link-app__media-item {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .link-app__media-preview {
        width: 84px;
        height: 84px;
    }
}

/* LINK CARD LIFECYCLE */

.link-app__lifecycle-card {
    border-color: color-mix(
        in srgb,
        var(--link-accent) 22%,
        var(--link-border)
    );
}

.link-app__lifecycle-layout {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__lifecycle-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.link-app__lifecycle-copy strong {
    color: var(--link-text);
    font-size: 1rem;
    line-height: 1.3;
}

.link-app__lifecycle-copy p {
    max-width: 62ch;
    margin: 0;
    color: var(--link-muted);
    font-size: .84rem;
    line-height: 1.55;
}

.link-app__lifecycle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.link-app__lifecycle-feedback {
    min-height: 20px;
    margin-top: 4px;
    color: var(--link-muted);
    font-size: .78rem;
    font-weight: 650;
}

.link-app__lifecycle-feedback[data-tone="loading"] {
    color: var(--link-info);
}

.link-app__lifecycle-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__lifecycle-feedback[data-tone="error"] {
    color: var(--link-danger);
}

.link-app__button-danger {
    border-color: var(--link-danger);
    background: transparent;
    color: var(--link-danger);
}

.link-app__button-danger:hover,
.link-app__button-danger:focus-visible {
    background: var(--link-danger-soft);
}

@media (min-width: 700px) {
    .link-app__lifecycle-layout {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        align-items: center;
    }

    .link-app__lifecycle-actions {
        justify-content: flex-end;
    }
}

/* LINK ENCOUNTERS */

.link-app__encounters-header {
    display: flex;
    flex-direction: column;
    gap: var(--link-space-4);
}

.link-app__encounters-header > div:first-child {
    min-width: 0;
}

.link-app__encounters-summary {
    display: flex;
    min-width: 110px;
    align-items: center;
    justify-content: space-between;
    gap: var(--link-space-3);
    padding: var(--link-space-3) var(--link-space-4);
    border: 1px solid
        color-mix(
            in srgb,
            var(--link-accent) 18%,
            var(--link-border)
        );
    border-radius: var(--link-radius-md);
    background: var(--link-accent-soft);
}

.link-app__encounters-summary-label {
    color: var(--link-accent-strong);
    font-size: .78rem;
    font-weight: 750;
}

.link-app__encounters-summary strong {
    color: var(--link-accent-strong);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1;
}

.link-app__encounters-toolbar {
    display: grid;
    gap: var(--link-space-3);
    margin-bottom: var(--link-space-5);
}

.link-app__encounters-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
}

.link-app__encounters-filters::-webkit-scrollbar {
    display: none;
}

.link-app__encounters-filter {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--link-border);
    border-radius: 999px;
    background: var(--link-surface);
    color: var(--link-muted);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 750;
    transition:
        border-color var(--link-transition),
        background var(--link-transition),
        color var(--link-transition),
        box-shadow var(--link-transition);
}

.link-app__encounters-filter:hover:not(:disabled) {
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 28%,
            var(--link-border)
        );
    color: var(--link-accent-strong);
}

.link-app__encounters-filter.is-active {
    border-color: var(--link-accent);
    background: var(--link-accent);
    color: var(--link-accent-contrast);
    box-shadow: var(--link-shadow-xs);
}

.link-app__encounters-filter:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px var(--link-accent-soft);
}

.link-app__encounters-filter:disabled {
    cursor: wait;
    opacity: .65;
}

.link-app__encounters-feedback {
    min-height: 22px;
    color: var(--link-muted);
    font-size: .8rem;
    font-weight: 650;
}

.link-app__encounters-feedback[data-tone="loading"] {
    color: var(--link-info);
}

.link-app__encounters-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__encounters-feedback[data-tone="error"] {
    color: var(--link-danger);
}

.link-app__encounters-list {
    display: grid;
    gap: var(--link-space-4);
}

.link-app__encounter-card {
    overflow: hidden;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-lg);
    background: var(--link-surface);
    box-shadow: var(--link-shadow-xs);
}

.link-app__encounter-main {
    display: flex;
    align-items: flex-start;
    gap: var(--link-space-4);
    padding: var(--link-space-5);
}

.link-app__encounter-copy {
    min-width: 0;
    flex: 1;
}

.link-app__encounter-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--link-space-3);
}

.link-app__encounter-heading > div {
    min-width: 0;
}

.link-app__encounter-heading h2 {
    overflow: hidden;
    margin: 0;
    color: var(--link-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.link-app__encounter-company {
    overflow: hidden;
    margin: 4px 0 0;
    color: var(--link-muted);
    font-size: .82rem;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.link-app__encounter-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: var(--link-space-4);
}

.link-app__encounter-contact {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: var(--link-accent-strong);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.link-app__encounter-contact span:last-child {
    overflow-wrap: anywhere;
}

.link-app__encounter-contact:hover,
.link-app__encounter-contact:focus-visible {
    text-decoration: underline;
}

.link-app__encounter-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: var(--link-space-3);
    color: var(--link-muted);
    font-size: .74rem;
    font-weight: 600;
}

.link-app__encounter-source {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--link-background);
    color: var(--link-muted);
    font-weight: 750;
}

.link-app__encounter-note {
    display: grid;
    gap: 8px;
    padding: var(--link-space-4) var(--link-space-5);
    border-top: 1px solid var(--link-border);
    background:
        color-mix(
            in srgb,
            var(--link-background) 70%,
            var(--link-surface)
        );
}

.link-app__encounter-note > label {
    color: var(--link-text);
    font-size: .8rem;
    font-weight: 750;
}

.link-app__encounter-note .link-app__textarea {
    min-height: 84px;
    background: var(--link-surface);
    line-height: 1.5;
}

.link-app__encounter-note-footer {
    display: flex;
    flex-direction: column;
    gap: var(--link-space-3);
}

.link-app__encounter-note-feedback {
    min-height: 20px;
    color: var(--link-muted);
    font-size: .76rem;
    font-weight: 650;
}

.link-app__encounter-note-feedback[data-tone="loading"] {
    color: var(--link-info);
}

.link-app__encounter-note-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__encounter-note-feedback[data-tone="error"] {
    color: var(--link-danger);
}

.link-app__encounter-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.link-app__encounter-actions .link-app__button {
    width: 100%;
}

.link-app__encounter-ignore {
    color: var(--link-muted);
}

.link-app__encounters-more {
    display: flex;
    justify-content: center;
    margin-top: var(--link-space-5);
}

.link-app__encounters-more .link-app__button {
    width: 100%;
}

@media (min-width: 700px) {
    .link-app__encounters-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .link-app__encounters-summary {
        flex-direction: column;
        align-items: flex-end;
    }

    .link-app__encounter-note-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .link-app__encounter-note-feedback {
        flex: 1;
    }

    .link-app__encounter-actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .link-app__encounter-actions .link-app__button {
        width: auto;
    }

    .link-app__encounters-more .link-app__button {
        width: auto;
    }
}

@media (min-width: 1000px) {
    .link-app__encounter-card {
        transition:
            border-color var(--link-transition),
            box-shadow var(--link-transition),
            transform var(--link-transition);
    }

    .link-app__encounter-card:hover {
        border-color:
            color-mix(
                in srgb,
                var(--link-accent) 18%,
                var(--link-border)
            );
        box-shadow: var(--link-shadow-sm);
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__encounter-card {
        transition: none;
    }

    .link-app__encounter-card:hover {
        transform: none;
    }
}

/* ==========================================================
   LINK — QR & NFC
   ========================================================== */

.link-app__qr-view {
    display: grid;
    gap: var(--link-space-5);
}

.link-app__qr-state .link-app__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--link-space-4);
}

.link-app__qr-state-copy {
    display: grid;
    gap: 8px;
}

.link-app__qr-state-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--link-muted);
    line-height: 1.55;
}

.link-app__qr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--link-space-5);
}

.link-app__qr-layout > .link-app__card {
    min-width: 0;
}

.link-app__qr-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--link-space-4);
    margin-bottom: var(--link-space-5);
}

.link-app__qr-frame {
    width: min(100%, 300px);
    margin: 0 auto;
    padding: 14px;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-lg);
    background: #fff;
    box-shadow: var(--link-shadow-sm);
}

.link-app__qr-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.link-app__qr-empty {
    min-height: 180px;
}

.link-app__qr-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: var(--link-space-5);
}

.link-app__qr-actions .link-app__button {
    width: 100%;
}

.link-app__qr-nfc-icon {
    display: inline-grid;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    background: var(--link-accent-soft);
    color: var(--link-accent-strong);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: -0.08em;
    transform: rotate(-90deg);
}

.link-app__qr-help {
    margin: 0 0 var(--link-space-5);
    color: var(--link-muted);
    line-height: 1.6;
}

.link-app__qr-url {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--link-border);
    border-radius: var(--link-radius-md);
    background: var(--link-background);
}

.link-app__qr-url code {
    min-width: 0;
    overflow: hidden;
    color: var(--link-text);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.link-app__qr-url .link-app__icon-button {
    flex: none;
}

.link-app__qr-steps {
    display: grid;
    gap: 12px;
    margin: var(--link-space-5) 0 0;
    padding: 0;
    counter-reset: link-nfc-step;
    list-style: none;
}

.link-app__qr-steps li {
    position: relative;
    min-height: 34px;
    padding-left: 46px;
    color: var(--link-muted);
    font-size: .86rem;
    line-height: 1.5;
    counter-increment: link-nfc-step;
}

.link-app__qr-steps li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    background: var(--link-accent-soft);
    color: var(--link-accent-strong);
    content: counter(link-nfc-step);
    font-size: .75rem;
    font-weight: 850;
}

.link-app__qr-steps strong {
    color: var(--link-text);
}

.link-app__qr-feedback {
    min-height: 20px;
    margin-top: var(--link-space-4);
    color: var(--link-muted);
    font-size: .78rem;
    font-weight: 650;
}

.link-app__qr-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__qr-feedback[data-tone="error"] {
    color: var(--link-danger);
}

@media (min-width: 620px) {
    .link-app__qr-state .link-app__card-body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .link-app__qr-state .link-app__button {
        flex: none;
    }

    .link-app__qr-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .link-app__qr-layout {
        grid-template-columns:
            minmax(300px, .82fr)
            minmax(0, 1.18fr);
        align-items: stretch;
    }

    .link-app__qr-layout > .link-app__card {
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__qr-nfc-icon {
        transform: rotate(-90deg);
    }
}

/* ==========================================================
   LINK — MOBILE HARDENING 320–480
   ========================================================== */

@media (max-width: 480px) {
    .link-app {
        overflow-x: clip;
    }

    .link-app__topbar {
        gap: 10px;
        padding:
            max(7px, env(safe-area-inset-top))
            12px
            7px;
    }

    .link-app__mobile-brand {
        min-width: 0;
    }

    .link-app__mobile-brand strong {
        font-size: 16px;
    }

    .link-app__topbar-account {
        flex: 0 0 auto;
    }

    .link-app__content {
        width: calc(100% - 24px);
        max-width: 100%;
        padding-top: 20px;
        padding-bottom:
            calc(
                116px
                + env(safe-area-inset-bottom)
            );
    }

    .link-app__view,
    .link-app__dashboard,
    .link-app__card-editor,
    .link-app__editor-layout,
    .link-app__editor-form,
    .link-app__editor-preview-column,
    .link-app__encounters-list,
    .link-app__qr-view,
    .link-app__qr-layout {
        min-width: 0;
        max-width: 100%;
    }

    .link-app__view-header h1 {
        font-size: clamp(28px, 9vw, 36px);
        line-height: 1.04;
    }

    .link-app__view-header p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    .link-app__mobile-nav {
        right: 6px;
        bottom:
            max(
                6px,
                env(safe-area-inset-bottom)
            );
        left: 6px;
        gap: 1px;
        padding: 4px;
        border-radius: 18px;
    }

    .link-app__mobile-nav .link-app__nav-item {
        min-height: 54px;
        gap: 2px;
        padding: 4px 1px;
        border-radius: 13px;
        font-size: 8.5px;
    }

    .link-app__mobile-nav .link-app__nav-icon {
        width: 22px;
        height: 22px;
        font-size: 18px;
    }

    .link-app__mobile-nav .link-app__nav-label {
        width: 100%;
        max-width: 100%;
    }

    .link-app__dashboard {
        gap: var(--link-space-5);
    }

    .link-app__dashboard-hero {
        gap: var(--link-space-4);
        padding: var(--link-space-5);
        border-radius: var(--link-radius-lg);
    }

    .link-app__dashboard-hero h1 {
        font-size: clamp(2rem, 11vw, 2.65rem);
    }

    .link-app__dashboard-hero-actions,
    .link-app__dashboard-card-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .link-app__dashboard-hero-actions .link-app__button,
    .link-app__dashboard-card-actions .link-app__button {
        width: 100%;
    }

    .link-app__card-preview {
        gap: var(--link-space-3);
        min-height: 92px;
        padding: var(--link-space-3);
    }

    .link-app__card-preview-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .link-app__editor-section-heading {
        flex-direction: column;
        gap: var(--link-space-2);
    }

    .link-app__slug-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .link-app__slug-field > span {
        min-width: 0;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--link-border);
        overflow: hidden;
        font-size: .75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .link-app__slug-field input {
        width: 100%;
    }

    .link-app__editor-sticky-actions {
        bottom:
            calc(
                88px
                + env(safe-area-inset-bottom)
            );
        padding: 8px;
        border-radius: var(--link-radius-md);
    }

    .link-app__lifecycle-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .link-app__lifecycle-actions .link-app__button {
        width: 100%;
    }

    .link-app__encounters-summary {
        width: 100%;
    }

    .link-app__encounters-filters {
        margin-right: -12px;
        padding-right: 12px;
    }

    .link-app__encounters-filter {
        min-height: 44px;
    }

    .link-app__encounter-main {
        gap: var(--link-space-3);
        padding: var(--link-space-4);
    }

    .link-app__encounter-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .link-app__encounter-note {
        padding:
            var(--link-space-4)
            var(--link-space-4);
    }

    .link-app__encounter-actions {
        gap: 8px;
    }

    .link-app__qr-state .link-app__card-body {
        gap: var(--link-space-3);
    }

    .link-app__qr-heading {
        gap: var(--link-space-3);
        margin-bottom: var(--link-space-4);
    }

    .link-app__qr-frame {
        width: min(100%, 260px);
        padding: 10px;
    }

    .link-app__qr-actions {
        margin-top: var(--link-space-4);
    }

    .link-app__qr-url {
        padding-left: 10px;
    }

    .link-app__qr-url code {
        font-size: .72rem;
    }

    .link-app__qr-steps {
        gap: 10px;
        margin-top: var(--link-space-4);
    }

    .link-app__qr-steps li {
        padding-left: 42px;
        font-size: .82rem;
    }
}

@media (max-width: 360px) {
    .link-app__content {
        width: calc(100% - 20px);
    }

    .link-app__mobile-nav {
        right: 4px;
        left: 4px;
    }

    .link-app__mobile-nav .link-app__nav-item {
        font-size: 8px;
    }

    .link-app__dashboard-hero {
        padding: var(--link-space-4);
    }

    .link-app__media-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .link-app__media-preview {
        width: 68px;
        height: 68px;
    }

    .link-app__media-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .link-app__media-actions .link-app__button {
        width: 100%;
    }

    .link-app__encounter-main {
        padding: var(--link-space-3);
    }

    .link-app__qr-frame {
        width: min(100%, 240px);
    }
}

/* ==========================================================
   C14B4 — CRM READ-ONLY
   ========================================================== */

.link-app__crm {
    min-width: 0;
}

.link-app__crm-pipeline {
    display: grid;
    grid-auto-columns: minmax(260px, 82vw);
    grid-auto-flow: column;
    gap: 16px;
    margin-top: 24px;
    overflow-x: auto;
    padding: 0 0 18px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.link-app__crm-stage {
    align-self: start;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--link-border);
    border-radius: 18px;
    background: var(--link-surface-soft);
    scroll-snap-align: start;
}

.link-app__crm-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.link-app__crm-stage-header > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.link-app__crm-stage-header strong {
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__crm-stage-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--link-accent);
}

.link-app__crm-stage-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--link-surface);
    color: var(--link-text-muted);
    font-size: .78rem;
    font-weight: 800;
}

.link-app__crm-stage-list {
    display: grid;
    gap: 10px;
}

.link-app__crm-stage-empty {
    padding: 18px 12px;
    border: 1px dashed var(--link-border);
    border-radius: 14px;
    color: var(--link-text-muted);
    font-size: .82rem;
    text-align: center;
}

.link-app__crm-prospect {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--link-border);
    border-radius: 15px;
    background: var(--link-surface);
    box-shadow: 0 8px 24px rgba(18, 20, 39, .04);
}

.link-app__crm-prospect-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.link-app__crm-prospect-heading > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.link-app__crm-prospect-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__crm-prospect-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--link-accent-soft);
    color: var(--link-accent-strong);
    font-size: .88rem;
    font-weight: 850;
}

.link-app__crm-prospect-contact,
.link-app__crm-prospect-date {
    color: var(--link-text-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.link-app__crm-prospect-contact {
    overflow-wrap: anywhere;
}

.link-app__crm-prospect-date {
    padding-top: 10px;
    border-top: 1px solid var(--link-border);
}

.link-app__crm-empty {
    margin-top: 24px;
}

@media (min-width: 700px) {
    .link-app__crm-pipeline {
        grid-auto-columns: minmax(280px, 320px);
    }
}

/* ==========================================================
   C14B5 — CRM PIPELINE MUTATIONS
   ========================================================== */

.link-app__crm-stage-field {
    display: grid;
    gap: 6px;
}

.link-app__crm-stage-field > span {
    color: var(--link-text-muted);
    font-size: .72rem;
    font-weight: 750;
}

.link-app__crm-stage-select {
    width: 100%;
    min-height: 42px;
    padding: 9px 34px 9px 11px;
    border: 1px solid var(--link-border);
    border-radius: 11px;
    background: var(--link-surface);
    color: var(--link-text);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
}

.link-app__crm-stage-select:focus {
    border-color: var(--link-accent);
    outline: 2px solid var(--link-accent-soft);
    outline-offset: 1px;
}

.link-app__crm-stage-select:disabled {
    cursor: progress;
    opacity: .65;
}

.link-app__crm-prospect-feedback {
    min-height: 1.15em;
    color: var(--link-text-muted);
    font-size: .75rem;
    font-weight: 700;
}

.link-app__crm-prospect-feedback.is-error {
    color: var(--link-danger);
}

.link-app__crm-prospect-feedback.is-success {
    color: var(--link-success);
}

/* ==========================================================
   LINK CRM DRAWER V1
   ========================================================== */

.link-app__crm-prospect {
    cursor: pointer;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.link-app__crm-prospect:hover {
    border-color: var(--link-accent);
    box-shadow: 0 12px 30px rgba(18, 20, 39, .09);
    transform: translateY(-1px);
}

.link-app__crm-prospect:focus-visible {
    border-color: var(--link-accent);
    outline: 3px solid var(--link-accent-soft);
    outline-offset: 2px;
}

.link-crm-drawer-open {
    overflow: hidden;
}

.link-app__crm-drawer-overlay {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(18, 20, 39, .32);
    opacity: 0;
    transition: opacity .18s ease;
}

.link-app__crm-drawer-overlay[hidden] {
    display: none;
}

.link-app__crm-drawer-overlay.is-open {
    opacity: 1;
}

.link-app__crm-drawer {
    display: flex;
    flex-direction: column;
    width: min(100%, 520px);
    height: 100%;
    background: var(--link-surface);
    box-shadow: -20px 0 60px rgba(18, 20, 39, .16);
    transform: translateX(100%);
    transition: transform .18s ease;
    outline: none;
}

.link-app__crm-drawer-overlay.is-open .link-app__crm-drawer {
    transform: translateX(0);
}

.link-app__crm-drawer-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid var(--link-border);
}

.link-app__crm-drawer-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.link-app__crm-drawer-identity > div {
    min-width: 0;
}

.link-app__crm-drawer-identity h2 {
    margin: 3px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.35rem;
}

.link-app__crm-drawer-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--link-accent-soft);
    color: var(--link-accent-strong);
    font-size: 1rem;
    font-weight: 850;
}

.link-app__crm-drawer-stage-label {
    color: var(--link-text-muted);
    font-size: .82rem;
    font-weight: 700;
}

.link-app__crm-drawer-close {
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
}

.link-app__crm-drawer-body {
    display: grid;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.link-app__crm-drawer-section {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-bottom: 1px solid var(--link-border);
}

.link-app__crm-drawer-section-title {
    margin: 3px 0 0;
    font-size: 1.05rem;
}

.link-app__crm-drawer-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.link-app__crm-drawer-feedback {
    min-height: 1.15em;
    color: var(--link-text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.link-app__crm-drawer-feedback.is-error {
    color: var(--link-danger);
}

.link-app__crm-drawer-feedback.is-success {
    color: var(--link-success);
}

.link-app__crm-note-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--link-border);
    border-radius: 15px;
    background: var(--link-surface-soft, var(--link-surface));
}

.link-app__crm-note-form textarea {
    width: 100%;
    resize: vertical;
}

.link-app__crm-note-form-actions {
    display: flex;
    justify-content: flex-end;
}

.link-app__crm-notes {
    display: grid;
    gap: 10px;
}

.link-app__crm-note {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--link-border);
    border-radius: 14px;
    background: var(--link-surface);
}

.link-app__crm-note.is-pinned {
    border-color: var(--link-accent);
    background: var(--link-accent-soft);
}

.link-app__crm-note-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: var(--link-text-muted);
    font-size: .72rem;
    font-weight: 700;
}

.link-app__crm-note p {
    margin: 0;
    color: var(--link-text);
    font-size: .88rem;
    line-height: 1.55;
}

@media (max-width: 699px) {
    .link-app__crm-drawer {
        width: 100%;
    }

    .link-app__crm-drawer-header,
    .link-app__crm-drawer-section {
        padding: 18px;
    }

    .link-app__crm-drawer-contact-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .link-app__crm-drawer-contact-actions .link-app__button {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__crm-drawer-overlay,
    .link-app__crm-drawer,
    .link-app__crm-prospect {
        transition: none;
    }
}

/* ==========================================================
   LINK CRM DRAWER V2 — PREMIUM UX + DYNAMIC BRANDING
   ========================================================== */

.link-app {
    --link-secondary: var(--link-accent);
    --link-secondary-soft: var(--link-accent-soft);
    --link-on-accent: #fff;
}

.link-app__crm-prospect {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(
        in srgb,
        var(--link-accent) 10%,
        var(--link-border)
    );
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--link-accent) 3%,
                var(--link-surface)
            ),
            var(--link-surface) 58%
        );
}

.link-app__crm-prospect::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--link-accent);
    content: "";
    opacity: .75;
}

.link-app__crm-prospect:hover {
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 45%,
            var(--link-border)
        );
    box-shadow:
        0 18px 42px
        color-mix(
            in srgb,
            var(--link-accent) 12%,
            transparent
        );
}

.link-app__crm-prospect-avatar,
.link-app__crm-drawer-avatar {
    background:
        linear-gradient(
            145deg,
            var(--link-accent-soft),
            var(--link-secondary-soft)
        );
    color: var(--link-accent-strong);
}

.link-app__crm-drawer-overlay {
    background:
        rgba(13, 18, 28, .48);
    backdrop-filter:
        blur(4px);
    -webkit-backdrop-filter:
        blur(4px);
}

.link-app__crm-drawer {
    width:
        min(
            calc(100vw - 32px),
            560px
        );
    border-left:
        1px solid
        color-mix(
            in srgb,
            var(--link-accent) 16%,
            var(--link-border)
        );
    background:
        #fff;
    box-shadow:
        -24px 0 80px
        rgba(12, 18, 30, .18);
}

.link-app__crm-drawer-header {
    position: relative;
    padding: 28px 30px 25px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--link-accent) 10%,
                #fff
            ),
            color-mix(
                in srgb,
                var(--link-secondary) 5%,
                #fff
            )
        );
}

.link-app__crm-drawer-header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--link-accent),
            var(--link-secondary)
        );
    content: "";
    opacity: .8;
}

.link-app__crm-drawer-avatar {
    width: 56px;
    height: 56px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--link-accent) 20%,
            transparent
        );
    border-radius: 18px;
    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--link-accent) 15%,
            transparent
        );
    font-size: 1.08rem;
}

.link-app__crm-drawer-identity h2 {
    margin: 4px 0 5px;
    color: var(--link-text);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.link-app__crm-drawer-stage-label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background:
        var(--link-accent-soft);
    color:
        var(--link-accent-strong);
    font-size: .76rem;
    font-weight: 800;
}

.link-app__crm-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--link-accent) 14%,
            var(--link-border)
        );
    border-radius: 12px;
    background:
        rgba(255, 255, 255, .82);
    color: var(--link-text);
    font-size: 1.35rem;
    font-weight: 400;
    cursor: pointer;
    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.link-app__crm-drawer-close:hover {
    border-color: var(--link-accent);
    background: #fff;
    transform: scale(1.04);
}

.link-app__crm-drawer-section {
    gap: 16px;
    padding: 25px 30px;
}

.link-app__crm-drawer-section .link-app__meta {
    color: var(--link-text-muted);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.link-app__crm-drawer-contact-actions {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 10px;
}

.link-app__crm-drawer-contact-actions
.link-app__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--link-accent) 24%,
            var(--link-border)
        );
    border-radius: 13px;
    background:
        color-mix(
            in srgb,
            var(--link-accent) 5%,
            #fff
        );
    color: var(--link-accent-strong);
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: none;
}

.link-app__crm-drawer-contact-actions
.link-app__button:hover {
    border-color: var(--link-accent);
    background: var(--link-accent-soft);
}

.link-app__crm-drawer
select,
.link-app__crm-drawer
textarea {
    width: 100%;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--link-accent) 12%,
            var(--link-border)
        );
    border-radius: 13px;
    background: #fff;
    color: var(--link-text);
    box-shadow:
        0 1px 2px
        rgba(16, 24, 40, .03);
    font: inherit;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.link-app__crm-drawer select {
    min-height: 50px;
    padding:
        0 42px
        0 15px;
}

.link-app__crm-drawer textarea {
    min-height: 108px;
    padding: 13px 14px;
    line-height: 1.5;
}

.link-app__crm-drawer
select:focus,
.link-app__crm-drawer
textarea:focus {
    border-color: var(--link-accent);
    outline: none;
    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--link-accent) 13%,
            transparent
        );
}

.link-app__crm-note-form {
    gap: 13px;
    padding: 18px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--link-accent) 12%,
            var(--link-border)
        );
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--link-accent) 3%,
                #fff
            ),
            #fff
        );
}

.link-app__crm-note-form-actions {
    justify-content: flex-start;
}

.link-app__crm-note-form-actions
.link-app__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            var(--link-accent),
            color-mix(
                in srgb,
                var(--link-accent) 72%,
                var(--link-secondary)
            )
        );
    color: var(--link-on-accent);
    font-size: .84rem;
    font-weight: 800;
    box-shadow:
        0 8px 20px
        color-mix(
            in srgb,
            var(--link-accent) 22%,
            transparent
        );
    cursor: pointer;
}

.link-app__crm-note-form-actions
.link-app__button:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
}

.link-app__crm-note-form-actions
.link-app__button:disabled {
    cursor: progress;
    opacity: .55;
    transform: none;
}

.link-app__crm-note {
    padding: 16px 17px;
    border-radius: 15px;
}

.link-app__crm-note.is-pinned {
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 34%,
            var(--link-border)
        );
    background:
        var(--link-accent-soft);
}

.link-app__crm-drawer-feedback {
    padding-top: 2px;
}

.link-app__crm-drawer-feedback.is-error {
    color: var(--link-danger);
}

.link-app__crm-drawer-feedback.is-success {
    color: var(--link-success);
}

@media (max-width: 699px) {
    .link-app__crm-drawer {
        width: 100vw;
        max-width: none;
        border-left: 0;
    }

    .link-app__crm-drawer-header {
        padding:
            max(
                18px,
                env(safe-area-inset-top)
            )
            18px
            18px;
    }

    .link-app__crm-drawer-section {
        padding: 20px 18px;
    }

    .link-app__crm-drawer-contact-actions {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   LINK APP — CARD THEME PROPAGATION V1
   Les couleurs du CRM reprennent la carte LINK.
   ========================================================== */

[data-link-app] {
    --link-secondary: #ffffff;

    --link-accent-soft:
        color-mix(
            in srgb,
            var(--link-accent) 14%,
            white
        );

    --link-accent-softer:
        color-mix(
            in srgb,
            var(--link-accent) 7%,
            white
        );

    --link-accent-strong:
        color-mix(
            in srgb,
            var(--link-accent) 82%,
            black
        );

    --link-secondary-soft:
        color-mix(
            in srgb,
            var(--link-secondary) 82%,
            white
        );
}

.link-app__crm-drawer-header {
    background:
        linear-gradient(
            135deg,
            var(--link-accent),
            var(--link-accent-strong)
        );
}

.link-app__crm-drawer-avatar {
    background:
        var(--link-accent);

    color:
        #ffffff;
}

.link-app__crm-drawer button[type="submit"],
.link-app__crm-drawer .link-app__crm-note-submit {
    background:
        var(--link-accent);
}

.link-app__crm-drawer button[type="submit"]:hover,
.link-app__crm-drawer .link-app__crm-note-submit:hover {
    background:
        var(--link-accent-strong);
}

.link-app__crm-drawer select:focus,
.link-app__crm-drawer textarea:focus {
    border-color:
        var(--link-accent);

    box-shadow:
        0 0 0 3px
        var(--link-accent-soft);
}

/* ==========================================================
 * LINK APP — CRM PIPELINE V3
 * Desktop : pipeline complet sans scroll horizontal.
 * Mobile/tablette : navigation horizontale avec snap.
 * ========================================================== */

@media (min-width: 1100px) {
    .link-app__crm-pipeline {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        min-width: 0;
        overflow: visible;
        align-items: start;
    }

    .link-app__crm-stage {
        min-width: 0;
        width: auto;
        padding: 10px;
        border-radius: 16px;
    }

    .link-app__crm-stage-header {
        gap: 6px;
        min-width: 0;
        margin-bottom: 9px;
    }

    .link-app__crm-stage-header > div {
        min-width: 0;
        gap: 6px;
    }

    .link-app__crm-stage-header strong {
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .link-app__crm-stage-dot {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
    }

    .link-app__crm-stage-count {
        min-width: 24px;
        height: 24px;
        padding: 0 7px;
        font-size: 11px;
    }

    .link-app__crm-stage-list {
        gap: 8px;
    }

    .link-app__crm-stage-empty {
        min-height: 62px;
        padding: 10px 6px;
        display: grid;
        place-items: center;
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
    }

    .link-app__crm-prospect {
        min-width: 0;
        padding: 10px;
        border-radius: 13px;
        gap: 8px;
    }

    .link-app__crm-prospect-heading {
        gap: 7px;
        align-items: flex-start;
    }

    .link-app__crm-prospect-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 11px;
    }

    .link-app__crm-prospect-heading strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .link-app__crm-prospect-contact {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .link-app__crm-prospect-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        padding-top: 7px;
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }

    .link-app__crm-prospect-stage {
        display: inline-flex;
        min-width: 0;
        padding: 3px 6px;
        border-radius: 999px;
        background: var(--link-accent-soft);
        color: var(--link-accent-strong);
        font-size: 9px;
        font-weight: 700;
        line-height: 1.2;
    }

    .link-app__crm-prospect-date {
        margin: 0;
        font-size: 9px;
        line-height: 1.2;
        white-space: nowrap;
    }
}

@media (max-width: 1099px) {
    .link-app__crm-pipeline {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(250px, 82vw);
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-width: thin;
        padding-bottom: 10px;
    }

    .link-app__crm-stage {
        scroll-snap-align: start;
        min-width: 0;
    }

    .link-app__crm-prospect-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }

    .link-app__crm-prospect-stage {
        display: inline-flex;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--link-accent-soft);
        color: var(--link-accent-strong);
        font-size: 11px;
        font-weight: 700;
    }
}

/* ==========================================================
 * LINK APP — CRM PIPELINE V3A2
 * Cartes premium + select compact intégré.
 * ========================================================== */

.link-app__crm-stage {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(248, 250, 252, 0.92) 100%
        );
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.02),
        0 8px 24px rgba(15, 23, 42, 0.025);
}

.link-app__crm-prospect {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.94) 100%
        );
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.025),
        0 6px 18px rgba(15, 23, 42, 0.035);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.link-app__crm-prospect::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background:
        linear-gradient(
            180deg,
            var(--link-accent) 0%,
            var(--link-accent-strong) 100%
        );
}

.link-app__crm-prospect:hover {
    transform: translateY(-2px);
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 30%,
            rgba(148, 163, 184, 0.18)
        );
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 12px 30px rgba(15, 23, 42, 0.07);
}

.link-app__crm-prospect-heading {
    position: relative;
    z-index: 1;
}

.link-app__crm-prospect-heading > div {
    min-width: 0;
    flex: 1;
}

.link-app__crm-prospect-heading strong {
    display: block;
    color: #111827;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.link-app__crm-prospect-avatar {
    background:
        linear-gradient(
            145deg,
            var(--link-accent-softer) 0%,
            var(--link-accent-soft) 100%
        );
    color: var(--link-accent-strong);
    border: 1px solid
        color-mix(
            in srgb,
            var(--link-accent) 15%,
            transparent
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.link-app__crm-prospect-contact {
    color: #64748b;
}

.link-app__crm-prospect-meta {
    position: relative;
    z-index: 1;
}

.link-app__crm-prospect-stage-control {
    position: relative;
    min-width: 0;
    flex: 1;
}

.link-app__crm-stage-select--compact {
    width: 100%;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    background:
        linear-gradient(
            180deg,
            var(--link-accent-softer) 0%,
            var(--link-accent-soft) 100%
        );
    color: var(--link-accent-strong);
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--link-accent) 12%,
            transparent
        );
}

.link-app__crm-prospect-stage-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--link-accent-strong);
    pointer-events: none;
    transform:
        translateY(-70%)
        rotate(45deg);
}

.link-app__crm-stage-select--compact:focus-visible {
    box-shadow:
        0 0 0 3px var(--link-accent-soft),
        inset 0 0 0 1px var(--link-accent);
}

.link-app__crm-stage-select--compact:disabled {
    opacity: 0.55;
    cursor: wait;
}

.link-app__crm-prospect-feedback:empty {
    display: none;
}

@media (min-width: 1100px) {
    .link-app__crm-stage {
        padding: 9px;
    }

    .link-app__crm-prospect {
        padding: 11px 10px 10px 13px;
        gap: 9px;
    }

    .link-app__crm-prospect-heading {
        gap: 8px;
    }

    .link-app__crm-prospect-avatar {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .link-app__crm-prospect-heading strong {
        font-size: 12px;
        line-height: 1.3;
    }

    .link-app__crm-prospect-contact {
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1.35;
    }

    .link-app__crm-prospect-meta {
        gap: 7px;
        padding-top: 8px;
    }

    .link-app__crm-stage-select--compact {
        min-height: 25px;
        padding: 5px 20px 5px 8px;
        font-size: 9px;
    }

    .link-app__crm-prospect-date {
        flex: 0 0 auto;
        color: #94a3b8;
        font-size: 8.5px;
    }
}

@media (max-width: 1099px) {
    .link-app__crm-prospect {
        padding-left: 15px;
    }

    .link-app__crm-stage-select--compact {
        min-height: 30px;
        padding: 6px 24px 6px 10px;
        font-size: 11px;
    }
}

/* ==========================================================
 * LINK APP — CRM PIPELINE V3A3
 * Lisibilité desktop + mouvement Kanban sans reload.
 * ========================================================== */

.link-app__crm-prospect.is-crm-moving {
    animation:
        link-crm-card-arrive
        220ms
        ease-out;
}

@keyframes link-crm-card-arrive {
    from {
        opacity: 0.35;
        transform:
            translateY(-5px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@media (min-width: 1100px) {

    .link-app__crm-pipeline {
        gap: 12px;
    }

    .link-app__crm-stage {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
    }

    .link-app__crm-stage-header {
        min-height: 36px;
        align-items: flex-start;
        gap: 6px;
    }

    .link-app__crm-stage-header > div {
        min-width: 0;
        align-items: flex-start;
    }

    .link-app__crm-stage-header strong {
        display: block;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        font-size: 10.5px;
        line-height: 1.2;
        font-weight: 700;
    }

    .link-app__crm-stage-count {
        flex: 0 0 auto;
    }

    .link-app__crm-stage-list {
        gap: 8px;
    }

    .link-app__crm-prospect {
        min-width: 0;
        padding:
            12px
            10px
            10px
            14px;
        gap: 10px;
        border-radius: 12px;
    }

    .link-app__crm-prospect-heading {
        display: grid;
        grid-template-columns:
            30px
            minmax(0, 1fr);
        align-items: start;
        gap: 8px;
    }

    .link-app__crm-prospect-heading > div {
        min-width: 0;
        overflow: hidden;
    }

    .link-app__crm-prospect-heading strong {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        text-overflow: ellipsis;
        color: #111827;
        font-size: 11.5px;
        line-height: 1.25;
        font-weight: 750;
    }

    .link-app__crm-prospect-contact {
        display: block;
        max-width: 100%;
        margin-top: 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #7c8799;
        font-size: 9.5px;
        line-height: 1.3;
    }

    .link-app__crm-prospect-meta {
        display: block;
        padding-top: 9px;
        border-top:
            1px solid
            rgba(148, 163, 184, 0.13);
    }

    .link-app__crm-prospect-stage-control {
        width: 100%;
        min-width: 0;
    }

    .link-app__crm-stage-select--compact {
        display: block;
        width: 100%;
        min-height: 28px;
        padding:
            6px
            24px
            6px
            9px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9.5px;
        line-height: 1.2;
    }

    .link-app__crm-prospect-date {
        display: none;
    }

    .link-app__crm-prospect-feedback {
        margin-top: -3px;
        font-size: 8.5px;
        line-height: 1.2;
    }

    .link-app__crm-stage-empty {
        min-height: 58px;
        padding: 12px 6px;
        font-size: 9.5px;
        line-height: 1.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__crm-prospect.is-crm-moving {
        animation: none;
    }
}

/*
 * LINK APP — CRM HARD DELETE V3B3
 */

.link-app__crm-danger-zone {
    border-top:
        1px solid
        color-mix(
            in srgb,
            #b42318 22%,
            transparent
        );
}

.link-app__crm-danger-zone
.link-app__section-description {
    margin:
        0.5rem
        0
        1rem;
}

.link-app__button--danger {
    border:
        1px solid
        #b42318;
    background:
        transparent;
    color:
        #b42318;
}

.link-app__button--danger:hover,
.link-app__button--danger:focus-visible {
    border-color:
        #b42318;
    background:
        #b42318;
    color:
        #ffffff;
}

.link-app__button--danger:disabled {
    cursor:
        wait;
    opacity:
        0.55;
}

/* ==========================================================
 * LINK CRM V3B4 — suivi commercial
 * ========================================================== */

.link-app__crm-prospect-commercial {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    opacity: .82;
}

.link-app__crm-prospect-commercial[hidden] {
    display: none;
}

.link-app__crm-commercial-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.link-app__crm-commercial-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.link-app__crm-money-field {
    position: relative;
    display: flex;
    align-items: center;
}

.link-app__crm-money-field input {
    width: 100%;
    padding-right: 36px;
}

.link-app__crm-money-field > span {
    position: absolute;
    right: 14px;
    pointer-events: none;
    font-weight: 700;
    opacity: .62;
}

.link-app__crm-drawer input[type="text"],
.link-app__crm-drawer input[type="number"],
.link-app__crm-drawer input[type="date"] {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .link-app__crm-commercial-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
 * LINK CRM V3B5 — actions commerciales multiples
 * ========================================================== */

.link-app__crm-amount-form,
.link-app__crm-action-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.link-app__crm-save-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.link-app__crm-actions-block {
    display: grid;
    gap: 14px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(112, 118, 145, .15);
}

.link-app__crm-actions {
    display: grid;
    gap: 9px;
}

.link-app__crm-actions-empty {
    padding: 13px 14px;
    border: 1px dashed rgba(112, 118, 145, .22);
    border-radius: 12px;
    font-size: 13px;
    opacity: .68;
}

.link-app__crm-action {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(112, 118, 145, .16);
    border-radius: 13px;
    background: rgba(255, 255, 255, .6);
}

.link-app__crm-action-status {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 800;
    background: rgba(81, 71, 245, .08);
}

.link-app__crm-action-content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.link-app__crm-action-content strong {
    font-size: 13px;
    line-height: 1.35;
}

.link-app__crm-action-content span {
    font-size: 12px;
    opacity: .62;
}

.link-app__crm-action-complete {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
}

.link-app__crm-action.is-completed {
    opacity: .58;
}

.link-app__crm-action.is-completed
.link-app__crm-action-content strong {
    text-decoration: line-through;
}

.link-app__crm-action-done {
    font-size: 11px;
    font-weight: 750;
}

@media (max-width: 640px) {
    .link-app__crm-action {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .link-app__crm-action-complete,
    .link-app__crm-action-done {
        grid-column: 2;
        justify-self: start;
    }
}

/* ==========================================================
 * LINK CRM V3B5.1 — boutons drawer harmonisés
 * ========================================================== */

.link-app__crm-drawer
.link-app__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 10px 18px;

    border: 1px solid transparent;
    border-radius: 12px;

    background:
        #5147f5;

    color:
        #ffffff;

    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(81, 71, 245, .16);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease,
        background-color .16s ease,
        border-color .16s ease;
}

.link-app__crm-drawer
.link-app__button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 10px 24px
        rgba(81, 71, 245, .22);
}

.link-app__crm-drawer
.link-app__button:active {
    transform:
        translateY(0);
}

.link-app__crm-drawer
.link-app__button:focus-visible {
    outline:
        3px solid
        rgba(81, 71, 245, .20);

    outline-offset:
        2px;
}

.link-app__crm-drawer
.link-app__button:disabled {
    cursor:
        wait;

    opacity:
        .56;

    transform:
        none;

    box-shadow:
        none;
}

/*
 * Secondaire :
 * Appeler / Envoyer un mail / Marquer comme faite.
 */
.link-app__crm-drawer
.link-app__button-secondary {
    background:
        #ffffff;

    border-color:
        rgba(81, 71, 245, .24);

    color:
        #171922;

    box-shadow:
        none;
}

.link-app__crm-drawer
.link-app__button-secondary:hover {
    background:
        rgba(81, 71, 245, .055);

    border-color:
        rgba(81, 71, 245, .42);

    box-shadow:
        none;
}

/*
 * Actions principales du suivi.
 */
.link-app__crm-drawer
[data-link-crm-amount-submit],
.link-app__crm-drawer
[data-link-crm-action-submit],
.link-app__crm-drawer
[data-link-crm-note-submit] {
    width:
        auto;

    min-width:
        150px;
}

/*
 * Petite action attachée à une ligne commerciale.
 */
.link-app__crm-drawer
.link-app__crm-action-complete {
    min-height:
        36px;

    padding:
        7px 12px;

    border-radius:
        10px;

    font-size:
        11px;

    white-space:
        nowrap;
}

/*
 * Zone sensible : même langage graphique,
 * mais rouge et clairement distincte.
 */
.link-app__crm-drawer
.link-app__button--danger {
    background:
        #d92d20;

    border-color:
        #d92d20;

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(217, 45, 32, .14);
}

.link-app__crm-drawer
.link-app__button--danger:hover {
    background:
        #b42318;

    border-color:
        #b42318;

    box-shadow:
        0 10px 24px
        rgba(217, 45, 32, .20);
}

/*
 * Confirmation textuelle à côté des boutons.
 */
.link-app__crm-save-row {
    min-height:
        44px;
}

.link-app__crm-save-row
.link-app__crm-drawer-feedback.is-success {
    font-weight:
        700;
}

/*
 * Mobile : boutons principaux facilement tactiles.
 */
@media (max-width: 640px) {
    .link-app__crm-drawer
    [data-link-crm-amount-submit],
    .link-app__crm-drawer
    [data-link-crm-action-submit],
    .link-app__crm-drawer
    [data-link-crm-note-submit] {
        width:
            100%;
    }

    .link-app__crm-save-row {
        align-items:
            stretch;
    }

    .link-app__crm-drawer
    .link-app__crm-action-complete {
        width:
            auto;
    }

    .link-app__crm-drawer
    .link-app__button--danger {
        width:
            100%;
    }
}

/* ==========================================================
 * LINK CRM V3C1 — conversion prospect -> client
 * ========================================================== */

.link-app__crm-conversion-zone {
    position: relative;
}

.link-app__crm-conversion-zone::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px;
    background: rgba(81, 71, 245, .55);
}

.link-app__crm-conversion-zone
[data-link-crm-convert] {
    min-width: 160px;
}

@media (max-width: 640px) {
    .link-app__crm-conversion-zone
    [data-link-crm-convert] {
        width: 100%;
    }
}

/* ======================================================
   LINK CRM V3C2 — CLIENTS
   ====================================================== */

.link-app__clients {
    display: grid;
    gap: 24px;
}

.link-app__clients-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.link-app__clients-search {
    position: relative;
    display: block;
    width: min(100%, 520px);
}

.link-app__clients-search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--link-text-soft);
    pointer-events: none;
}

.link-app__clients-search input {
    width: 100%;
    min-height: 48px;
    padding: 10px 16px 10px 44px;
    border: 1px solid var(--link-border);
    border-radius: 14px;
    background: var(--link-surface);
    color: var(--link-text);
    font: inherit;
    outline: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.link-app__clients-search input:focus {
    border-color: var(--link-accent);
    box-shadow:
        0 0 0 3px var(--link-accent-soft);
}

.link-app__clients-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 300px),
                1fr
            )
        );
    gap: 16px;
}

.link-app__client-card {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--link-border);
    border-radius: 18px;
    background: var(--link-surface);
    box-shadow: var(--link-shadow-sm);
}

.link-app__client-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.link-app__client-card-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.link-app__client-card-title strong {
    overflow: hidden;
    color: var(--link-text);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__client-card-title small {
    color: var(--link-text-soft);
    font-size: .78rem;
    font-weight: 700;
}

.link-app__client-contacts {
    display: grid;
    gap: 8px;
}

.link-app__client-contact {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--link-text);
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
}

.link-app__client-contact span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__client-contact:hover {
    color: var(--link-accent);
}

.link-app__client-contact--empty {
    color: var(--link-text-soft);
    font-weight: 500;
}

.link-app__client-commercial {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--link-border);
}

.link-app__client-commercial-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.link-app__client-commercial-item small {
    color: var(--link-text-soft);
    font-size: .76rem;
    font-weight: 700;
}

.link-app__client-commercial-item strong {
    min-width: 0;
    color: var(--link-text);
    font-size: .82rem;
    text-align: right;
}

.link-app__client-card-footer {
    padding-top: 12px;
    border-top: 1px solid var(--link-border);
    color: var(--link-text-soft);
    font-size: .74rem;
}

.link-app__clients-no-result {
    margin-top: 4px;
}

@media (max-width: 680px) {
    .link-app__clients {
        gap: 18px;
    }

    .link-app__clients-search {
        width: 100%;
    }

    .link-app__clients-grid {
        grid-template-columns: 1fr;
    }

    .link-app__client-card {
        padding: 17px;
        border-radius: 16px;
    }
}

/* ======================================================
   LINK CRM V3C2.1 — CLIENT SEARCH + CLIENT DRAWER
   ====================================================== */

.link-app__client-card[hidden],
.link-app__clients-no-result[hidden] {
    display: none !important;
}

.link-app__client-card {
    cursor: pointer;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.link-app__client-card:hover {
    transform: translateY(-2px);
    border-color: var(--link-accent);
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .10);
}

.link-app__client-card:focus-visible {
    outline: 3px solid var(--link-accent-soft);
    outline-offset: 3px;
    border-color: var(--link-accent);
}

.link-app__client-card a {
    position: relative;
    z-index: 2;
}

.link-app__client-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(3px);
}

.link-app__client-drawer-overlay[hidden] {
    display: none !important;
}

.link-app__client-drawer {
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    height: 100%;
    overflow: hidden;
    background: var(--link-surface);
    box-shadow: -18px 0 50px rgba(15, 23, 42, .14);
}

.link-app__client-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--link-border);
}

.link-app__client-drawer-identity {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.link-app__client-drawer-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background: var(--link-accent-soft);
    color: var(--link-accent-strong);
    font-size: 1rem;
    font-weight: 800;
}

.link-app__client-drawer-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.link-app__client-drawer-title small {
    color: var(--link-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.link-app__client-drawer-title h2 {
    overflow: hidden;
    margin: 0;
    color: var(--link-text);
    font-size: 1.25rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__client-drawer-close {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--link-border);
    border-radius: 11px;
    background: var(--link-surface);
    color: var(--link-text);
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
}

.link-app__client-drawer-body {
    display: grid;
    gap: 0;
    overflow-y: auto;
    padding: 0 24px 32px;
}

.link-app__client-drawer-section {
    display: grid;
    gap: 14px;
    padding: 22px 0;
    border-bottom: 1px solid var(--link-border);
}

.link-app__client-drawer-section:last-child {
    border-bottom: 0;
}

.link-app__client-drawer-section h3 {
    margin: 0;
    color: var(--link-text);
    font-size: .92rem;
}

.link-app__client-drawer-contact-list {
    display: grid;
    gap: 10px;
}

.link-app__client-drawer-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--link-border);
    border-radius: 12px;
    color: var(--link-text);
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
}

.link-app__client-drawer-contact:hover {
    border-color: var(--link-accent);
    color: var(--link-accent);
}

.link-app__client-drawer-contact span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__client-drawer-empty {
    margin: 0;
    color: var(--link-text-soft);
    font-size: .86rem;
}

.link-app__client-drawer-commercial {
    display: grid;
    gap: 10px;
}

.link-app__client-drawer-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.link-app__client-drawer-metric + .link-app__client-drawer-metric {
    border-top: 1px solid var(--link-border);
}

.link-app__client-drawer-metric span {
    color: var(--link-text-soft);
    font-size: .82rem;
}

.link-app__client-drawer-metric strong {
    color: var(--link-text);
    text-align: right;
}

.link-app__client-drawer-actions {
    display: grid;
    gap: 10px;
}

.link-app__client-drawer-action {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--link-border);
    border-radius: 12px;
    background: var(--link-surface);
}

.link-app__client-drawer-action strong {
    color: var(--link-text);
    font-size: .86rem;
}

.link-app__client-drawer-action small {
    color: var(--link-text-soft);
    font-size: .76rem;
}

.link-app__client-drawer-action.is-completed {
    opacity: .62;
}

.link-app__client-drawer-meta {
    color: var(--link-text-soft);
    font-size: .78rem;
}

body.link-client-drawer-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .link-app__client-card:hover {
        transform: none;
    }

    .link-app__client-drawer {
        width: 100%;
    }

    .link-app__client-drawer-header {
        padding:
            calc(18px + env(safe-area-inset-top))
            18px
            18px;
    }

    .link-app__client-drawer-body {
        padding:
            0
            18px
            calc(90px + env(safe-area-inset-bottom));
    }
}

/* LINK PWA / offline state */
.link-app__network-status {
    position: fixed;
    z-index: 10000;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff1d9;
    color: #7c4b00;
    box-shadow: 0 8px 28px rgba(28, 27, 52, 0.16);
    font-size: 13px;
    font-weight: 750;
    text-align: center;
}

.link-app[data-link-network="offline"] [data-link-card-form],
.link-app[data-link-network="offline"] [data-link-card-publish],
.link-app[data-link-network="offline"] [data-link-card-suspend] {
    opacity: 0.62;
}

@media (max-width: 720px) {
    .link-app__network-status {
        top: max(8px, env(safe-area-inset-top));
        font-size: 12px;
    }
}

/* ==========================================================
   V3C6.1A — lisibilité générale LINK
   ========================================================== */

.link-app__view {
    --link-surface: #ffffff;
    --link-surface-soft: #f7f8fb;
    --link-border-strong: #d7dce5;
    --link-border-soft: #e4e8ef;
    --link-text-secondary: #667085;
}

.link-app__encounters-summary {
    background: #fff8e7;
    border: 1px solid #ead7a3;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.link-app__encounters-filter {
    background: #ffffff;
    border-color: #d7dce5;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}

.link-app__encounters-filter:hover {
    border-color: #bcc4d1;
    background: #fafbfc;
}

.link-app__encounters-filter.is-active {
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.08);
}

.link-app__encounters-list {
    gap: 20px;
}

.link-app__encounter-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7dce5;
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(17, 24, 39, 0.04),
        0 8px 24px rgba(17, 24, 39, 0.055);
}

.link-app__encounter-main {
    background: #ffffff;
}

.link-app__encounter-heading {
    gap: 18px;
}

.link-app__encounter-business {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}

.link-app__encounter-company {
    margin: 0;
    color: #667085;
    font-size: 0.94rem;
    font-weight: 500;
}

.link-app__encounter-sector {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border: 1px solid #d9dee7;
    border-radius: 999px;
    background: #f4f6f8;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
}

.link-app__encounter-contacts {
    margin-top: 15px;
}

.link-app__encounter-contact {
    font-weight: 600;
}

.link-app__encounter-meta {
    margin-top: 13px;
    gap: 8px;
}

.link-app__encounter-source,
.link-app__encounter-intent {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.77rem;
    font-weight: 650;
}

.link-app__encounter-source {
    background: #f2f4f7;
    color: #475467;
    border: 1px solid #e1e5eb;
}

.link-app__encounter-intent {
    background: #fff8e7;
    color: #8a6400;
    border: 1px solid #ead7a3;
}

.link-app__encounter-note {
    background: #f7f8fb;
    border-top: 1px solid #dfe3ea;
}

.link-app__encounter-note label {
    color: #344054;
    font-weight: 700;
}

.link-app__encounter-note .link-app__textarea {
    background: #ffffff;
    border-color: #cfd5df;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.025);
}

.link-app__encounter-note .link-app__textarea:focus {
    border-color: #e6aa00;
    box-shadow:
        0 0 0 3px rgba(241, 177, 0, 0.12);
}

.link-app__card,
.link-app__panel,
.link-app__surface {
    border-color: #d7dce5;
}

@media (max-width: 720px) {
    .link-app__encounter-card {
        border-radius: 16px;
    }

    .link-app__encounter-business {
        align-items: flex-start;
        flex-direction: column;
    }

    .link-app__encounter-meta {
        align-items: flex-start;
    }
}

/* ==========================================================
   V3C6.1B — Emails automatiques LINK
   ========================================================== */

.link-app__email-template {
  display: grid;
  gap: 16px;
}

.link-app__toggle-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.96);
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
}

.link-app__toggle-field input {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

.link-app__separator {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  margin: 24px 0;
}

.link-app__email-variables {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
}

.link-app__email-variables strong {
  width: 100%;
  margin-bottom: 3px;
}

.link-app__email-variables code {
  padding: 4px 8px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.78rem;
}

.link-app__field textarea {
  width: 100%;
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}

/* V3C6.1C — édition des coordonnées d’une rencontre LINK */

.link-app__encounter-edit {
    margin-top: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.link-app__encounter-edit-toggle {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 11px 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.link-app__encounter-edit-toggle:hover {
    background: rgba(15, 23, 42, 0.04);
}

.link-app__encounter-edit-panel {
    padding: 0 14px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.link-app__encounter-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 14px;
}

.link-app__encounter-edit-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.link-app__encounter-edit-grid label > span {
    font-size: 0.82rem;
    font-weight: 700;
}

.link-app__encounter-edit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.link-app__encounter-edit-feedback {
    flex: 1;
    min-height: 20px;
    font-size: 0.84rem;
}

.link-app__encounter-edit-feedback[data-tone="loading"] {
    opacity: 0.7;
}

.link-app__encounter-edit-feedback[data-tone="success"] {
    font-weight: 700;
}

.link-app__encounter-edit-feedback[data-tone="error"] {
    font-weight: 700;
}

.link-app__encounter-edit-locked {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.05);
    font-size: 0.82rem;
}

@media (max-width: 680px) {
    .link-app__encounter-edit-grid {
        grid-template-columns: 1fr;
    }

    .link-app__encounter-edit-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .link-app__encounter-edit-footer .link-app__button {
        width: 100%;
    }
}

/* V3C6.1C3 — secteur d'activité sur les tuiles Clients */
.link-app__client-sector {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.32rem;
    margin-top: 0.28rem;
    padding: 0.22rem 0.48rem;
    border: 1px solid rgba(34, 139, 34, 0.16);
    border-radius: 999px;
    background: rgba(34, 139, 34, 0.07);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--link-text-muted, #667085);
}

.link-app__client-sector > span[aria-hidden="true"] {
    font-size: 0.72rem;
}

/* ==========================================================
 * LINK APP — V3C6.1D
 * Recherche Rencontres + pipeline CRM mobile vertical.
 * ========================================================== */

.link-app__encounters-search {
    position: relative;
    display: block;
    width: min(100%, 560px);
}

.link-app__encounters-search-input {
    width: 100%;
    min-height: 46px;
    padding-left: 42px;
    padding-right: 42px;
    border-radius: 14px;
}

.link-app__encounters-search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    color: var(--link-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.link-app__encounters-search-clear {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8px;
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--link-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    transform: translateY(-50%);
}

.link-app__encounters-search-clear:hover,
.link-app__encounters-search-clear:focus-visible {
    background: var(--link-surface-soft);
    color: var(--link-text);
}

.link-app__encounters-search-empty {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 20px;
    border: 1px dashed var(--link-border);
    border-radius: 16px;
    background: var(--link-surface-soft);
    text-align: center;
}

.link-app__encounters-search-empty[hidden] {
    display: none;
}

.link-app__encounters-search-empty strong {
    color: var(--link-text);
    font-size: .92rem;
}

.link-app__encounters-search-empty span {
    color: var(--link-text-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.link-app__crm-stage-toggle {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.link-app__crm-stage-header-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.link-app__crm-stage-chevron {
    display: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--link-text-muted);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

@media (max-width: 899px) {

    .link-app__encounters-toolbar {
        display: grid;
        gap: 12px;
    }

    .link-app__encounters-search {
        width: 100%;
        order: -1;
    }

    .link-app__encounters-search-input {
        min-height: 48px;
        font-size: 16px;
    }

    .link-app__crm-pipeline {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: 100%;
        margin-top: 18px;
        padding: 0 0 12px;
        overflow: visible;
        scroll-snap-type: none;
    }

    .link-app__crm-stage {
        width: 100%;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 15px;
        scroll-snap-align: none;
    }

    .link-app__crm-stage-header {
        min-height: 58px;
        margin: 0;
        padding: 12px 14px;
        cursor: pointer;
    }

    .link-app__crm-stage-header:hover {
        background:
            color-mix(
                in srgb,
                var(--link-accent) 4%,
                transparent
            );
    }

    .link-app__crm-stage-header:focus-visible {
        outline: 3px solid var(--link-accent-soft);
        outline-offset: -3px;
    }

    .link-app__crm-stage-header > div {
        gap: 9px;
    }

    .link-app__crm-stage-header strong {
        overflow: visible;
        color: #111827;
        font-size: .9rem;
        line-height: 1.3;
        text-overflow: clip;
        white-space: normal;
    }

    .link-app__crm-stage-dot {
        width: 8px;
        height: 8px;
    }

    .link-app__crm-stage-count {
        min-width: 30px;
        min-height: 30px;
        padding: 4px 9px;
        background: var(--link-surface);
        font-size: .78rem;
    }

    .link-app__crm-stage-chevron {
        display: block;
    }

    .link-app__crm-stage-toggle[aria-expanded="true"]
    .link-app__crm-stage-chevron {
        transform: rotate(225deg);
    }

    .link-app__crm-stage-list {
        gap: 9px;
        padding: 0 10px 10px;
    }

    .link-app__crm-stage-list[hidden] {
        display: none;
    }

    .link-app__crm-stage.is-crm-stage-open
    .link-app__crm-stage-header {
        margin-bottom: 8px;
    }

    .link-app__crm-stage-empty {
        min-height: 54px;
        padding: 14px 10px;
    }

    .link-app__crm-prospect {
        width: 100%;
        min-width: 0;
        padding: 12px 12px 11px 15px;
        gap: 9px;
        border-radius: 13px;
    }

    .link-app__crm-prospect:hover {
        transform: none;
    }

    .link-app__crm-prospect-heading {
        gap: 10px;
    }

    .link-app__crm-prospect-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 11px;
    }

    .link-app__crm-prospect-heading strong {
        white-space: normal;
        font-size: .9rem;
        line-height: 1.3;
    }

    .link-app__crm-prospect-contact {
        margin-top: 3px;
        font-size: .76rem;
        line-height: 1.4;
    }

    .link-app__crm-prospect-commercial {
        font-size: .74rem;
        line-height: 1.4;
    }

    .link-app__crm-prospect-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding-top: 9px;
    }

    .link-app__crm-stage-select--compact {
        min-height: 34px;
        padding: 7px 25px 7px 10px;
        font-size: .75rem;
    }

    .link-app__crm-prospect-date {
        align-self: center;
        padding: 0;
        border: 0;
        font-size: .7rem;
        white-space: nowrap;
    }
}

@media (min-width: 900px) {

    .link-app__crm-stage-toggle {
        cursor: default;
    }

    .link-app__crm-stage-list[hidden] {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {

    .link-app__crm-stage-chevron {
        transition: none;
    }
}


/* FLOW CORE V3C6.2A NETWORK */

.link-app__network-header {
    align-items: flex-start;
}

.link-app__network-toolbar {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.link-app__network-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.link-app__network-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );
    gap: 16px;
}

.link-app__network-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid
        rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.06);
}

.link-app__network-card[hidden] {
    display: none !important;
}

.link-app__network-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.link-app__network-card h2 {
    margin: 6px 0 3px;
    font-size: 1.1rem;
    line-height: 1.25;
}

.link-app__network-card-head strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #475569;
}

.link-app__network-relation {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(
        --link-accent-soft,
        #eeecff
    );
    color: var(
        --link-accent-strong,
        #3f36c8
    );
    font-size: 0.76rem;
    font-weight: 700;
}

.link-app__network-contact {
    display: grid;
    gap: 7px;
}

.link-app__network-contact a {
    width: fit-content;
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
}

.link-app__network-contact a:hover {
    color: var(
        --link-accent,
        #5147f5
    );
}

.link-app__network-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}

.link-app__encounter-network-action {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        auto;
    gap: 8px;
    width: 100%;
}

.link-app__encounter-network-select {
    min-width: 0;
}

@media (max-width: 899px) {
    .link-app__network-grid {
        grid-template-columns: 1fr;
    }

    .link-app__network-card {
        padding: 16px;
        border-radius: 16px;
    }

    .link-app__network-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .link-app__network-filters::-webkit-scrollbar {
        display: none;
    }

    .link-app__encounter-network-action {
        grid-template-columns: 1fr;
    }

    .link-app__encounter-network-action
    .link-app__button {
        width: 100%;
    }
}


/* V3C6.2D — CRM -> Réseau */
.link-app__crm-network-zone {
  border-top: 1px solid var(--link-border, rgba(15, 23, 42, 0.12));
}

.link-app__crm-network-zone .link-app__field {
  margin: 14px 0;
}

.link-app__crm-network-zone .link-app__button {
  width: 100%;
}

/* ==========================================================
 * LINK V3C6.2E1 — RESEAU ACTIONS + HIDDEN
 * ========================================================== */

.link-app__view-placeholder[hidden],
.link-app__encounters-search-empty[hidden],
.link-app__network-card[hidden] {
    display: none !important;
}

.link-app__network-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: auto;
}

.link-app__network-actions .link-app__button {
    flex: 1 1 auto;
}

@media (max-width: 899px) {
    .link-app__network-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .link-app__network-actions .link-app__button {
        width: 100%;
    }
}

/* ==========================================================
 * LINK CRM V3D2A — OPPORTUNITIES
 * ========================================================== */

.link-app__opportunities {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.link-app__opportunities-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.link-app__opportunities-header h2 {
    margin: 0.15rem 0 0.25rem;
}

.link-app__opportunities-header p {
    margin: 0;
    opacity: 0.72;
}

.link-app__opportunity-create {
    margin-bottom: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.link-app__opportunity-create > summary {
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.link-app__opportunity-create > summary::-webkit-details-marker {
    display: none;
}

.link-app__opportunity-create form {
    padding: 0 1rem 1rem;
}

.link-app__opportunity-create-empty {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.04);
    font-size: 0.9rem;
}

.link-app__opportunity-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.link-app__opportunity-form-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.9rem;
}

.link-app__opportunity-pipeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.link-app__opportunity-stage {
    min-width: 0;
    padding: 0.75rem;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.035);
}

.link-app__opportunity-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.link-app__opportunity-stage-header > div {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.link-app__opportunity-stage-header small {
    opacity: 0.58;
}

.link-app__opportunity-stage-list {
    display: grid;
    gap: 0.7rem;
}

.link-app__opportunity-stage-empty {
    padding: 0.9rem;
    border: 1px dashed rgba(15, 23, 42, 0.14);
    border-radius: 14px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.6;
}

.link-app__opportunity-card {
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.link-app__opportunity-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.link-app__opportunity-card-heading > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.link-app__opportunity-card-heading strong {
    line-height: 1.3;
}

.link-app__opportunity-card-heading span {
    font-size: 0.82rem;
    opacity: 0.62;
}

.link-app__opportunity-amount {
    flex: 0 0 auto;
    font-weight: 700;
    white-space: nowrap;
}

.link-app__opportunity-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    font-size: 0.78rem;
    opacity: 0.62;
}

.link-app__opportunity-edit {
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    padding-top: 0.65rem;
}

.link-app__opportunity-edit > summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}

.link-app__opportunity-edit form {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

@media (max-width: 1100px) {
    .link-app__opportunity-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .link-app__opportunities-header {
        align-items: flex-start;
    }

    .link-app__opportunity-pipeline {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
    }

    .link-app__opportunity-stage {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .link-app__opportunity-form-grid {
        grid-template-columns: 1fr;
    }

    .link-app__opportunity-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .link-app__opportunity-form-actions .link-app__button {
        width: 100%;
    }

    .link-app__opportunity-card-heading {
        flex-direction: column;
    }
}

/* ==========================================================
 * LINK CRM V3D2B — OPPORTUNITY FIRST
 * ========================================================== */

.link-app__opportunity-kpis {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.link-app__opportunity-kpis .link-app__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.link-app__opportunity-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.link-app__opportunity-create,
.link-app__opportunity-settings {
    margin: 0;
}

.link-app__opportunity-settings {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.link-app__opportunity-settings > summary {
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.link-app__opportunity-settings > summary::-webkit-details-marker {
    display: none;
}

.link-app__opportunity-settings > form {
    padding: 0 1rem 1rem;
}

.link-app__opportunity-settings-list {
    display: grid;
    gap: 0.65rem;
}

.link-app__opportunity-settings-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 120px auto auto;
    align-items: end;
    gap: 0.65rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.035);
}

.link-app__opportunity-probability-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.link-app__opportunity-probability-field input {
    min-width: 0;
    width: 100%;
}

.link-app__opportunity-default {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    font-size: 0.8rem;
    cursor: pointer;
}

.link-app__opportunity-default input {
    width: auto;
}

.link-app__opportunity-stage-order {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
}

.link-app__opportunity-stage-order button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
}

.link-app__opportunity-stage-order button:hover {
    background: rgba(15, 23, 42, 0.05);
}

.link-app__opportunity-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.link-app__opportunity-stage-kpis {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    white-space: nowrap;
}

.link-app__opportunity-stage-kpis
[data-opportunity-stage-amount] {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.7;
}

.link-app__crm-legacy-prospects {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 1rem;
}

.link-app__crm-legacy-prospects > summary {
    cursor: pointer;
    font-weight: 700;
}

.link-app__crm-legacy-prospects
.link-app__section-description {
    margin: 0.5rem 0 1rem;
}

.link-app__opportunity-card.is-opportunity-moving {
    animation:
        link-opportunity-card-arrive 220ms ease;
}

@keyframes link-opportunity-card-arrive {
    0% {
        opacity: 0.45;
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .link-app__opportunity-toolbar {
        grid-template-columns: 1fr;
    }

    .link-app__opportunity-settings-row {
        grid-template-columns:
            minmax(150px, 1fr)
            120px
            auto;
    }

    .link-app__opportunity-stage-order {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .link-app__opportunities-header {
        flex-direction: column;
        align-items: stretch;
    }

    .link-app__opportunity-kpis {
        justify-content: flex-start;
    }

    .link-app__opportunity-settings-row {
        grid-template-columns: 1fr;
    }

    .link-app__opportunity-stage-order {
        grid-column: auto;
    }

    .link-app__opportunity-settings-actions {
        flex-direction: column;
    }

    .link-app__opportunity-settings-actions
    .link-app__button {
        width: 100%;
    }
}

/**
 * LINK CRM V3D3A — CLIENT LIFECYCLE ACTIONS
 */

.link-app__client-lifecycle {
    border-top:
        1px solid
        rgba(20, 29, 43, 0.08);
}

.link-app__client-lifecycle-help,
.link-app__client-lifecycle-warning {
    margin:
        0 0 14px;
    color:
        var(--link-muted, #677184);
    font-size:
        0.86rem;
    line-height:
        1.45;
}

.link-app__client-lifecycle-actions {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        10px;
}

.link-app__client-lifecycle-actions
.link-app__button {
    min-height:
        42px;
}

.link-app__client-lifecycle-feedback {
    min-height:
        1.25rem;
    margin:
        12px 0 0;
    font-size:
        0.86rem;
    font-weight:
        600;
}

.link-app__client-lifecycle-feedback[
    data-tone="success"
] {
    color:
        #237a4b;
}

.link-app__client-lifecycle-feedback[
    data-tone="error"
] {
    color:
        var(--link-danger);
}

.link-app__client-lifecycle-warning {
    margin-top:
        10px;
    margin-bottom:
        0;
}

@media (max-width: 640px) {
    .link-app__client-lifecycle-actions {
        flex-direction:
            column;
    }

    .link-app__client-lifecycle-actions
    .link-app__button {
        width:
            100%;
    }
}

/* ==========================================================
 * LINK CRM V3D3B — OPPORTUNITY LIFECYCLE
 * ========================================================== */

.link-app__opportunity-lifecycle {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.link-app__opportunity-lifecycle .link-app__button {
  flex: 1 1 0;
}

.link-app__button--success {
  border-color: #2f7d4a;
  background: #2f7d4a;
  color: #fff;
}

.link-app__closed-opportunities {
  margin-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 16px;
}

.link-app__closed-opportunities > summary {
  cursor: pointer;
  font-weight: 700;
}

.link-app__closed-opportunities-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.link-app__closed-opportunity {
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.link-app__closed-opportunity-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.link-app__closed-opportunity-heading strong {
  min-width: 0;
}

.link-app__opportunity-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.link-app__opportunity-status.is-won {
  background: rgba(47, 125, 74, 0.12);
  color: #24623a;
}

.link-app__opportunity-status.is-lost {
  background: rgba(155, 54, 54, 0.11);
  color: #8a3030;
}

.link-app__closed-opportunity-meta {
  display: grid;
  gap: 4px;
  margin: 9px 0 12px;
  font-size: 0.88rem;
  opacity: 0.78;
}

@media (max-width: 640px) {
  .link-app__opportunity-lifecycle {
    flex-direction: column;
  }

  .link-app__closed-opportunity-heading {
    align-items: flex-start;
  }
}

/* ==========================================================
 * LINK CRM V3D3B UI — OPPORTUNITY TOOLBAR CLEANUP
 * ========================================================== */

/*
 * Création = action principale.
 * Personnalisation = réglage secondaire sous le formulaire.
 */
[data-link-opportunities]
.link-app__opportunity-toolbar {
    grid-template-columns:
        minmax(0, 1fr) !important;
    gap:
        0.9rem;
}

/*
 * Le vrai formulaire contient :
 *
 * form
 *   ├── .link-app__opportunity-form-grid
 *   └── .link-app__opportunity-form-actions
 *
 * En desktop, les champs occupent l'espace disponible
 * et le bouton reste à droite.
 */
[data-link-opportunity-create-form] {
    display:
        grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items:
        end;
    gap:
        14px;
}

/*
 * Cinq champs métier.
 */
[data-link-opportunity-create-form]
.link-app__opportunity-form-grid {
    display:
        grid;
    grid-template-columns:
        minmax(150px, 1.05fr)
        minmax(210px, 1.55fr)
        minmax(130px, 0.8fr)
        minmax(155px, 1fr)
        minmax(155px, 1fr);
    align-items:
        end;
    gap:
        12px;
    min-width:
        0;
}

[data-link-opportunity-create-form]
.link-app__field {
    min-width:
        0;
    margin:
        0;
}

[data-link-opportunity-create-form]
.link-app__field > span {
    display:
        block;
    margin-bottom:
        7px;
    font-size:
        0.84rem;
    font-weight:
        650;
    line-height:
        1.25;
    white-space:
        nowrap;
}

[data-link-opportunity-create-form]
:is(
    input,
    select
) {
    width:
        100%;
    min-width:
        0;
    min-height:
        48px;
    box-sizing:
        border-box;
}

/*
 * Le montant reste contenu dans sa colonne.
 */
[data-link-opportunity-create-form]
.link-app__crm-money-field {
    min-width:
        0;
}

[data-link-opportunity-create-form]
.link-app__crm-money-field input {
    min-width:
        0;
}

/*
 * Action alignée avec le bas des champs.
 */
[data-link-opportunity-create-form]
.link-app__opportunity-form-actions {
    display:
        grid;
    align-content:
        end;
    gap:
        6px;
    min-width:
        190px;
    margin:
        0;
}

[data-link-opportunity-create-form]
.link-app__opportunity-form-actions
.link-app__button {
    width:
        100%;
    min-height:
        48px;
    padding-inline:
        18px;
    white-space:
        nowrap;
}

[data-link-opportunity-create-form]
[data-link-opportunity-create-feedback]:empty {
    display:
        none;
}

/*
 * Panneau pipeline : compact et secondaire.
 */
[data-link-opportunities]
.link-app__opportunity-settings {
    min-height:
        0 !important;
    margin:
        0;
}

[data-link-opportunities]
.link-app__opportunity-settings > summary {
    display:
        flex;
    align-items:
        center;
    min-height:
        54px;
    padding:
        0 18px;
}

[data-link-opportunities]
.link-app__opportunity-settings > summary::after {
    content:
        "›";
    margin-left:
        auto;
    font-size:
        1.45rem;
    line-height:
        1;
    opacity:
        0.5;
    transform:
        rotate(90deg);
    transition:
        transform 160ms ease;
}

[data-link-opportunities]
.link-app__opportunity-settings[open]
> summary::after {
    transform:
        rotate(-90deg);
}

[data-link-opportunities]
.link-app__opportunity-settings
[data-link-opportunity-pipeline-form] {
    padding:
        0 18px 18px;
}

/*
 * Desktop intermédiaire / petit laptop.
 * Le bouton passe sous les champs,
 * mais les champs restent confortables.
 */
@media (max-width: 1250px) {
    [data-link-opportunity-create-form] {
        grid-template-columns:
            minmax(0, 1fr);
    }

    [data-link-opportunity-create-form]
    .link-app__opportunity-form-grid {
        grid-template-columns:
            minmax(170px, 1fr)
            minmax(220px, 1.4fr)
            minmax(140px, 0.8fr)
            minmax(160px, 1fr)
            minmax(160px, 1fr);
    }

    [data-link-opportunity-create-form]
    .link-app__opportunity-form-actions {
        min-width:
            0;
    }

    [data-link-opportunity-create-form]
    .link-app__opportunity-form-actions
    .link-app__button {
        width:
            auto;
        justify-self:
            start;
    }
}

/*
 * Tablette.
 */
@media (max-width: 980px) {
    [data-link-opportunity-create-form]
    .link-app__opportunity-form-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    [data-link-opportunity-create-form]
    .link-app__opportunity-form-grid
    .link-app__field:nth-child(2) {
        grid-column:
            auto;
    }
}

/*
 * Mobile.
 */
@media (max-width: 640px) {
    [data-link-opportunity-create-form]
    .link-app__opportunity-form-grid {
        grid-template-columns:
            minmax(0, 1fr);
        gap:
            12px;
    }

    [data-link-opportunity-create-form]
    .link-app__field > span {
        white-space:
            normal;
    }

    [data-link-opportunity-create-form]
    .link-app__opportunity-form-actions
    .link-app__button {
        width:
            100%;
        justify-self:
            stretch;
    }

    [data-link-opportunities]
    .link-app__opportunity-settings > summary {
        padding-inline:
            15px;
    }

    [data-link-opportunities]
    .link-app__opportunity-settings
    [data-link-opportunity-pipeline-form] {
        padding-inline:
            15px;
    }
}

/* ==========================================================
 * LINK CRM V3D3E — DELETE OPPORTUNITY
 * ========================================================== */

[data-link-opportunities]
.link-app__button--danger {
    border-color:
        rgba(155, 54, 54, 0.28);
    background:
        rgba(155, 54, 54, 0.08);
    color:
        #8a3030;
}

[data-link-opportunities]
.link-app__button--danger:hover,
[data-link-opportunities]
.link-app__button--danger:focus-visible {
    background:
        rgba(155, 54, 54, 0.14);
    border-color:
        rgba(155, 54, 54, 0.42);
}


/* FLOW CORE — LINK PASSKEYS C4D5B */

.link-app__passkey-login {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.link-app__passkey-account {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.link-app__button-passkey {
    width: 100%;
}

.link-app__passkey-feedback {
    min-height: 1.25em;
    margin: 0;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.45;
}

.link-app__passkey-feedback:empty {
    display: none;
}

.link-app__passkey-feedback[data-tone="success"] {
    color: var(--link-success);
}

.link-app__passkey-feedback[data-tone="error"] {
    color: var(--link-danger);
}

.link-app__auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--link-text-muted);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.link-app__auth-separator::before,
.link-app__auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--link-border);
}

.link-app__button[aria-busy="true"] {
    cursor: wait;
    opacity: .72;
}

/*
 * LINK CRM UI4 — pipeline commercial premium
 * Couche visuelle uniquement :
 * - desktop : lecture immédiate des 7 étapes
 * - tablette : navigation horizontale nette
 * - mobile : accordéon vertical compact
 * - aucune modification du comportement métier
 */

.link-app__crm-pipeline {
    --link-crm-stage-accent: var(--link-primary, #2563eb);
    --link-crm-stage-surface: color-mix(
        in srgb,
        var(--link-crm-stage-accent) 4%,
        #ffffff
    );
    --link-crm-stage-border: color-mix(
        in srgb,
        var(--link-crm-stage-accent) 14%,
        #dfe5ec
    );
    align-items: start;
}

.link-app__crm-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--link-crm-stage-border);
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            var(--link-crm-stage-surface) 0,
            #ffffff 88px
        );
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 10px 30px rgba(15, 23, 42, .045);
}

.link-app__crm-stage::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--link-crm-stage-accent);
    opacity: .72;
    pointer-events: none;
}

.link-app__crm-stage-header {
    min-height: 66px;
    padding-top: 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid color-mix(
        in srgb,
        var(--link-crm-stage-accent) 9%,
        #e8edf2
    );
}

.link-app__crm-stage-header strong {
    font-weight: 800;
    letter-spacing: -.02em;
    color: #172033;
}

.link-app__crm-stage-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--link-crm-stage-accent);
    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            var(--link-crm-stage-accent) 11%,
            transparent
        );
}

.link-app__crm-stage-count {
    min-width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid color-mix(
        in srgb,
        var(--link-crm-stage-accent) 13%,
        #dfe5ec
    );
    border-radius: 999px;
    background: #ffffff;
    color: #526071;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .04);
}

.link-app__crm-stage-list {
    gap: 10px;
    padding-top: 11px;
}

.link-app__crm-stage-empty {
    min-height: 76px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 14px 10px;
    border: 1px dashed #d9e0e8;
    border-radius: 13px;
    background: rgba(248, 250, 252, .72);
    color: #8a96a6;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

.link-app__crm-prospect {
    border: 1px solid #e4e9ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .035),
        0 6px 18px rgba(15, 23, 42, .045);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.link-app__crm-prospect::before {
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--link-crm-stage-accent);
    opacity: .72;
}

.link-app__crm-prospect:hover {
    border-color: color-mix(
        in srgb,
        var(--link-crm-stage-accent) 22%,
        #dce3eb
    );
    box-shadow:
        0 2px 4px rgba(15, 23, 42, .04),
        0 12px 26px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.link-app__crm-prospect-heading strong {
    color: #172033;
    font-weight: 800;
    letter-spacing: -.018em;
}

.link-app__crm-prospect-avatar {
    border: 1px solid color-mix(
        in srgb,
        var(--link-crm-stage-accent) 13%,
        #e0e6ed
    );
    background: color-mix(
        in srgb,
        var(--link-crm-stage-accent) 7%,
        #ffffff
    );
    color: var(--link-crm-stage-accent);
}

.link-app__crm-prospect-contact {
    color: #687588;
}

.link-app__crm-prospect-commercial {
    margin-top: 9px;
    padding: 8px 9px;
    border: 1px solid #edf0f4;
    border-radius: 10px;
    background: #f8fafc;
    color: #4b596c;
    font-size: 11px;
    line-height: 1.4;
}

.link-app__crm-stage-select--compact {
    min-height: 34px;
    border-color: #dde4eb;
    border-radius: 9px;
    background-color: #f8fafc;
    color: #344154;
    font-weight: 700;
}

.link-app__crm-stage-select--compact:hover {
    border-color: color-mix(
        in srgb,
        var(--link-crm-stage-accent) 30%,
        #d7dee7
    );
    background-color: #ffffff;
}

.link-app__crm-stage-select--compact:focus-visible {
    border-color: var(--link-crm-stage-accent);
    box-shadow:
        0 0 0 3px color-mix(
            in srgb,
            var(--link-crm-stage-accent) 13%,
            transparent
        );
}

@media (min-width: 1100px) {
    .link-app__crm-pipeline {
        gap: 9px;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .link-app__crm-stage {
        min-width: 0;
        border-radius: 15px;
    }

    .link-app__crm-stage-header {
        min-height: 62px;
        padding: 14px 10px 11px;
    }

    .link-app__crm-stage-header > div {
        min-width: 0;
        gap: 7px;
    }

    .link-app__crm-stage-header strong {
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
    }

    .link-app__crm-stage-count {
        min-width: 24px;
        height: 24px;
        padding: 0 6px;
        font-size: 10px;
    }

    .link-app__crm-stage-list {
        gap: 8px;
        padding: 9px;
    }

    .link-app__crm-prospect {
        padding: 10px;
        border-radius: 12px;
    }

    .link-app__crm-prospect-heading {
        gap: 7px;
    }

    .link-app__crm-prospect-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 10px;
    }

    .link-app__crm-prospect-heading strong {
        font-size: 12px;
        line-height: 1.25;
    }

    .link-app__crm-prospect-contact {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.35;
    }

    .link-app__crm-prospect-commercial {
        margin-top: 7px;
        padding: 7px;
        font-size: 10px;
    }

    .link-app__crm-prospect-meta {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #eef1f4;
    }

    .link-app__crm-stage-select--compact {
        width: 100%;
        min-height: 32px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 10px;
    }

    .link-app__crm-stage-empty {
        min-height: 68px;
        font-size: 10px;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    .link-app__crm-pipeline {
        gap: 14px;
        padding-bottom: 10px;
        scroll-padding-inline: 2px;
    }

    .link-app__crm-stage {
        scroll-snap-align: start;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, .04),
            0 8px 24px rgba(15, 23, 42, .055);
    }
}

@media (max-width: 899px) {
    .link-app__crm-pipeline {
        gap: 10px;
    }

    .link-app__crm-stage {
        border-radius: 16px;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, .035),
            0 7px 20px rgba(15, 23, 42, .045);
    }

    .link-app__crm-stage::after {
        width: 3px;
        height: auto;
        inset: 0 auto 0 0;
    }

    .link-app__crm-stage-header {
        min-height: 58px;
        padding: 12px 13px 12px 15px;
        border-bottom: 0;
    }

    .link-app__crm-stage.is-crm-stage-open
    .link-app__crm-stage-header {
        border-bottom: 1px solid #e8edf2;
    }

    .link-app__crm-stage-header strong {
        font-size: 14px;
    }

    .link-app__crm-stage-header-meta {
        gap: 8px;
    }

    .link-app__crm-stage-chevron {
        width: 30px;
        height: 30px;
        display: inline-grid;
        place-items: center;
        border: 1px solid #e1e7ed;
        border-radius: 9px;
        background: #ffffff;
    }

    .link-app__crm-stage-list {
        gap: 9px;
        padding: 10px;
        background: #fbfcfd;
    }

    .link-app__crm-prospect {
        padding: 12px;
    }

    .link-app__crm-prospect-commercial {
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .link-app__crm-stage {
        border-radius: 14px;
    }

    .link-app__crm-stage-header {
        min-height: 54px;
        padding: 11px 11px 11px 14px;
    }

    .link-app__crm-stage-header strong {
        font-size: 13px;
    }

    .link-app__crm-stage-count {
        min-width: 25px;
        height: 25px;
    }

    .link-app__crm-stage-list {
        padding: 8px;
    }

    .link-app__crm-prospect {
        padding: 11px;
        border-radius: 12px;
    }

    .link-app__crm-prospect-heading {
        gap: 9px;
    }

    .link-app__crm-prospect-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .link-app__crm-prospect-meta {
        gap: 7px;
    }

    .link-app__crm-stage-select--compact {
        min-height: 38px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__crm-prospect {
        transition: none;
    }

    .link-app__crm-prospect:hover {
        transform: none;
    }
}

/* ==========================================================
   LINK UX5A — RESPONSIVE / DENSITE / LARGE DESKTOP
   ========================================================== */

.link-app__content {
    box-sizing: border-box;
}

.link-app__view {
    width: 100%;
    min-width: 0;
}

.link-app__view-header {
    max-width: 860px;
}

.link-app__view-header p {
    max-width: 720px;
}

/* ---------- Contrôles ---------- */

.link-app__input,
.link-app__select,
.link-app__textarea,
.link-app__encounters-search-input,
.link-app__crm-stage-select--compact {
    box-sizing: border-box;
}

.link-app__button,
.link-app__encounters-filter {
    min-height: 40px;
}

.link-app__button {
    justify-content: center;
}

/* ---------- Réseau ---------- */

.link-app__network-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 280px),
                1fr
            )
        );
    align-items: start;
    gap: 14px;
}

.link-app__network-card {
    min-width: 0;
    height: auto;
    padding: 16px;
    border-radius: 16px;
}

.link-app__network-card-head {
    gap: 12px;
}

.link-app__network-card h2 {
    line-height: 1.2;
}

.link-app__network-contact {
    gap: 5px;
}

.link-app__network-note {
    padding: 9px 11px;
}

.link-app__network-actions {
    gap: 8px;
    margin-top: 14px;
}

.link-app__network-actions .link-app__button {
    flex: 0 1 auto;
}

/* ---------- Rencontres ---------- */

.link-app__encounters-list {
    gap: 12px;
}

.link-app__encounter-card {
    min-width: 0;
}

.link-app__encounter-main {
    min-width: 0;
}

.link-app__encounter-copy {
    min-width: 0;
}

.link-app__encounter-heading {
    min-width: 0;
}

.link-app__encounter-contacts {
    gap: 7px;
}

.link-app__encounter-contact {
    min-height: 34px;
}

.link-app__encounter-meta {
    gap: 7px;
}

.link-app__encounter-note {
    margin-top: 10px;
}

.link-app__encounter-note .link-app__textarea {
    min-height: 72px;
}

.link-app__encounter-actions {
    gap: 8px;
}

/* ---------- CRM prospects ---------- */

.link-app__crm-board,
.link-app__crm-stage,
.link-app__crm-stage-list,
.link-app__crm-prospect {
    min-width: 0;
}

.link-app__crm-prospect {
    padding: 12px;
    border-radius: 14px;
}

.link-app__crm-prospect-heading {
    gap: 10px;
}

.link-app__crm-prospect-meta {
    gap: 7px;
}

/* ---------- Opportunités ---------- */

.link-app__opportunities {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

.link-app__opportunities-header {
    align-items: flex-start;
    gap: 16px;
}

.link-app__opportunity-toolbar {
    gap: 10px;
}

.link-app__opportunity-pipeline {
    align-items: start;
    gap: 12px;
}

.link-app__opportunity-stage {
    min-width: 0;
}

.link-app__opportunity-stage-list {
    gap: 10px;
}

.link-app__opportunity-card {
    min-width: 0;
}

/* ---------- Tablette ---------- */

@media (min-width: 768px) and (max-width: 1199px) {
    .link-app__content {
        width: min(
            calc(100% - 40px),
            1040px
        );
        padding-top: 36px;
        padding-bottom: 56px;
    }

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

    .link-app__encounters-list {
        gap: 10px;
    }

    .link-app__opportunity-pipeline {
        grid-template-columns:
            repeat(
                2,
                minmax(260px, 1fr)
            );
    }
}

/* ---------- Desktop ---------- */

@media (min-width: 1200px) {
    .link-app__content {
        width: min(
            calc(100% - 64px),
            1360px
        );
        padding-top: 42px;
        padding-bottom: 64px;
    }

    .link-app__network-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(270px, 1fr)
            );
    }

    .link-app__encounter-card {
        padding: 16px 18px;
    }

    .link-app__encounter-main {
        gap: 14px;
    }

    .link-app__encounter-note .link-app__textarea {
        min-height: 64px;
    }

    .link-app__opportunity-pipeline {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(230px, 1fr)
            );
    }
}

/* ---------- Large desktop ---------- */

@media (min-width: 1440px) {
    .link-app__content {
        width: min(
            calc(100% - 72px),
            1480px
        );
    }

    .link-app__network-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(280px, 1fr)
            );
    }
}

@media (min-width: 1680px) {
    .link-app__content {
        width: min(
            calc(100% - 88px),
            1580px
        );
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .link-app__content {
        width: 100%;
        min-width: 0;
    }

    .link-app__view {
        min-width: 0;
    }

    .link-app__network-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .link-app__network-card {
        padding: 14px;
        border-radius: 15px;
    }

    .link-app__network-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .link-app__network-actions .link-app__button {
        width: 100%;
    }

    .link-app__encounters-list {
        gap: 9px;
    }

    .link-app__encounter-card {
        padding: 14px;
        border-radius: 15px;
    }

    .link-app__encounter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .link-app__encounter-actions .link-app__button {
        width: 100%;
    }

    .link-app__opportunities {
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .link-app__opportunities-header {
        flex-direction: column;
        align-items: stretch;
    }

    .link-app__opportunity-kpis {
        justify-content: flex-start;
    }

    .link-app__opportunity-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .link-app__opportunity-pipeline {
        grid-template-columns: 1fr;
        gap: 10px;
        overflow: visible;
    }

    .link-app__opportunity-stage {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .link-app__network-card,
    .link-app__encounter-card,
    .link-app__crm-prospect,
    .link-app__opportunity-card {
        border-radius: 14px;
    }
}

/* ==========================================================
   LINK UX6 — MOBILE CLARITY / QUALIFICATION FIRST
   ========================================================== */

.link-app__crm {
    display: grid;
    gap: 24px;
}

.link-app__crm-view-header {
    margin-bottom: 0;
}

.link-app__crm-qualification {
    position: relative;
    padding: 22px;
    overflow: hidden;
    border: 1px solid
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 30%,
            #d7dce5
        );
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 10%,
                #ffffff
            ),
            #ffffff 58%
        );
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 34px rgba(15, 23, 42, 0.08);
}

.link-app__crm-qualification::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--link-primary, #2563eb);
}

.link-app__crm-qualification-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.link-app__crm-qualification-heading h2,
.link-app__crm-secondary-heading h2 {
    margin: 4px 0 6px;
    color: #111827;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.link-app__crm-qualification-heading p,
.link-app__crm-secondary-heading p {
    max-width: 680px;
    margin: 0;
    color: #667085;
    line-height: 1.55;
}

.link-app__crm-qualification-kicker,
.link-app__crm-secondary-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--link-primary, #2563eb);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.link-app__crm-qualification-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--link-primary, #2563eb);
    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 13%,
            transparent
        );
}

.link-app__crm-qualification-count {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    flex: 0 0 auto;
    border-radius: 15px;
    background: var(--link-primary, #2563eb);
    color: #ffffff;
    box-shadow:
        0 8px 18px
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 24%,
            transparent
        );
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.link-app__crm-qualification--empty {
    box-shadow: none;
}

.link-app__crm-qualification--empty
.link-app__crm-qualification-heading {
    margin-bottom: 0;
}

.link-app__crm-opportunities-zone {
    min-width: 0;
    padding-top: 2px;
}

.link-app__crm-secondary-heading {
    margin-bottom: 16px;
}

.link-app__crm-opportunities-zone
.link-app__opportunities {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ---------- Mobile : vraie respiration ---------- */

@media (max-width: 767px) {

    .link-app__content {
        width: 100%;
        padding-right:
            max(
                16px,
                env(safe-area-inset-right)
            );
        padding-left:
            max(
                16px,
                env(safe-area-inset-left)
            );
    }

    .link-app__view {
        width: 100%;
        min-width: 0;
    }

    .link-app__view-header {
        width: 100%;
        margin-bottom: 18px;
    }

    .link-app__view-header h1 {
        margin-top: 5px;
        margin-bottom: 8px;
        font-size: clamp(1.55rem, 7vw, 1.9rem);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .link-app__view-header p {
        margin: 0;
        color: #667085;
        font-size: 14px;
        line-height: 1.5;
    }

    /* ---------- Réseau ---------- */

    .link-app__network-header,
    .link-app__encounters-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 12px;
    }

    .link-app__network-toolbar,
    .link-app__encounters-toolbar {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid #e2e7ef;
        border-radius: 16px;
        background: #f7f9fc;
    }

    .link-app__network-grid {
        gap: 12px;
    }

    .link-app__network-card {
        position: relative;
        gap: 13px;
        padding: 17px;
        border: 1px solid #d9e0e9;
        border-radius: 18px;
        background: #ffffff;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 8px 22px rgba(15, 23, 42, 0.07);
    }

    .link-app__network-card::before {
        content: "";
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 0;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background:
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 76%,
                #ffffff
            );
    }

    .link-app__network-relation {
        display: inline-flex;
        width: fit-content;
        padding: 5px 8px;
        border-radius: 999px;
        background:
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 9%,
                #f8fafc
            );
        color: var(--link-primary, #2563eb);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .link-app__network-card h2 {
        margin-top: 8px;
        margin-bottom: 3px;
        color: #111827;
        font-size: 18px;
        line-height: 1.2;
    }

    .link-app__network-contact {
        gap: 8px;
        padding-top: 11px;
        border-top: 1px solid #edf0f4;
    }

    .link-app__network-contact a {
        width: 100%;
        overflow-wrap: anywhere;
        color: #344054;
        font-size: 13px;
        font-weight: 650;
    }

    .link-app__network-note {
        padding: 11px 12px;
        border: 1px solid #e8ecf2;
        background: #f8fafc;
    }

    .link-app__network-actions {
        gap: 8px;
        padding-top: 4px;
    }

    .link-app__network-actions .link-app__button {
        min-height: 46px;
        border-radius: 13px;
    }

    /* ---------- Rencontres ---------- */

    .link-app__encounters-list {
        gap: 13px;
    }

    .link-app__encounter-card {
        border: 1px solid #d9e0e9;
        border-radius: 18px;
        background: #ffffff;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 8px 22px rgba(15, 23, 42, 0.07);
    }

    .link-app__encounter-main {
        padding: 16px;
    }

    .link-app__encounter-note {
        padding: 14px 16px 16px;
        border-top: 1px solid #e7ebf1;
        background: #f8fafc;
    }

    .link-app__encounter-note
    .link-app__textarea {
        min-height: 82px;
        border-color: #d5dce6;
        background: #ffffff;
    }

    .link-app__encounter-actions {
        gap: 8px;
    }

    .link-app__encounter-actions
    .link-app__button {
        min-height: 46px;
        border-radius: 13px;
    }

    .link-app__encounters-summary {
        min-width: 62px;
        padding: 9px 11px;
        border-radius: 14px;
    }

    /* ---------- CRM ---------- */

    .link-app__crm {
        gap: 18px;
    }

    .link-app__crm-view-header {
        margin-bottom: 0;
    }

    .link-app__crm-qualification {
        padding: 18px 15px 16px 18px;
        border-radius: 19px;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 10px 26px rgba(15, 23, 42, 0.09);
    }

    .link-app__crm-qualification-heading {
        gap: 12px;
        margin-bottom: 16px;
    }

    .link-app__crm-qualification-heading h2 {
        font-size: 20px;
    }

    .link-app__crm-qualification-heading p {
        font-size: 13px;
        line-height: 1.45;
    }

    .link-app__crm-qualification-count {
        min-width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 18px;
    }

    .link-app__crm-qualification
    .link-app__crm-pipeline {
        gap: 9px;
        margin-top: 0;
        padding-bottom: 0;
    }

    .link-app__crm-qualification
    .link-app__crm-stage {
        border: 1px solid #d9e0e9;
        border-left: 4px solid var(--link-primary, #2563eb);
        border-radius: 14px;
        background: #ffffff;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.035),
            0 5px 14px rgba(15, 23, 42, 0.05);
    }

    .link-app__crm-qualification
    .link-app__crm-stage-header {
        min-height: 56px;
        padding: 11px 12px;
        background: #ffffff;
    }

    .link-app__crm-qualification
    .link-app__crm-stage-header strong {
        color: #1d2939;
        font-size: 14px;
    }

    .link-app__crm-qualification
    .link-app__crm-stage-count {
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 999px;
        background:
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 11%,
                #f8fafc
            );
        color: var(--link-primary, #2563eb);
        font-weight: 850;
    }

    .link-app__crm-qualification
    .link-app__crm-stage-list {
        gap: 8px;
        padding: 0 10px 10px;
        background: #f8fafc;
    }

    .link-app__crm-prospect {
        padding: 13px;
        border: 1px solid #dfe4eb;
        border-radius: 13px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.045);
    }

    .link-app__crm-prospect-heading strong {
        color: #101828;
        font-size: 14px;
    }

    .link-app__crm-prospect-contact {
        margin-top: 2px;
        color: #667085;
        font-size: 12px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .link-app__crm-prospect-meta {
        padding-top: 10px;
        border-top: 1px solid #edf0f4;
    }

    .link-app__crm-stage-select--compact {
        min-height: 42px;
        border-color: #d4dae3;
        border-radius: 11px;
        background: #ffffff;
        font-size: 13px;
        font-weight: 700;
    }

    .link-app__crm-opportunities-zone {
        margin-top: 2px;
        padding-top: 20px;
        border-top: 1px solid #e2e7ef;
    }

    .link-app__crm-secondary-heading {
        margin-bottom: 14px;
    }

    .link-app__crm-secondary-heading h2 {
        font-size: 19px;
    }

    .link-app__crm-secondary-heading p {
        font-size: 13px;
    }

    .link-app__opportunities {
        margin-top: 0;
    }

    .link-app__opportunities-header {
        margin-top: 0;
        padding: 14px;
        border: 1px solid #e2e7ef;
        border-radius: 16px;
        background: #f8fafc;
    }

    .link-app__opportunity-stage,
    .link-app__opportunity-card,
    .link-app__opportunity-create {
        border-color: #d9e0e9;
        background: #ffffff;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.035),
            0 5px 16px rgba(15, 23, 42, 0.05);
    }
}

@media (max-width: 420px) {

    .link-app__content {
        padding-right:
            max(
                13px,
                env(safe-area-inset-right)
            );
        padding-left:
            max(
                13px,
                env(safe-area-inset-left)
            );
    }

    .link-app__network-header,
    .link-app__encounters-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .link-app__network-header
    .link-app__encounters-summary,
    .link-app__encounters-header
    .link-app__encounters-summary {
        width: fit-content;
    }

    .link-app__crm-qualification-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .link-app__crm-qualification {
        padding-right: 13px;
        padding-left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .link-app__network-card,
    .link-app__encounter-card,
    .link-app__crm-qualification,
    .link-app__crm-prospect {
        scroll-behavior: auto;
        transition: none;
    }
}

/* ==========================================================
   LINK UX6 — CRM STAGE VISUAL DIFFERENTIATION
   Chaque statut conserve sa propre identité visuelle.
   ========================================================== */

.link-app__crm-stage {
    --link-crm-stage-accent: #64748b;
    --link-crm-stage-soft: #f8fafc;
    --link-crm-stage-border: #cbd5e1;
}

.link-app__crm-stage[data-crm-stage="new"] {
    --link-crm-stage-accent: #2563eb;
    --link-crm-stage-soft: #eff6ff;
    --link-crm-stage-border: #bfdbfe;
}

.link-app__crm-stage[data-crm-stage="to_contact"] {
    --link-crm-stage-accent: #7c3aed;
    --link-crm-stage-soft: #f5f3ff;
    --link-crm-stage-border: #ddd6fe;
}

.link-app__crm-stage[data-crm-stage="contacted"] {
    --link-crm-stage-accent: #0891b2;
    --link-crm-stage-soft: #ecfeff;
    --link-crm-stage-border: #a5f3fc;
}

.link-app__crm-stage[data-crm-stage="qualified"] {
    --link-crm-stage-accent: #0f766e;
    --link-crm-stage-soft: #f0fdfa;
    --link-crm-stage-border: #99f6e4;
}

.link-app__crm-stage[data-crm-stage="proposal"] {
    --link-crm-stage-accent: #d97706;
    --link-crm-stage-soft: #fffbeb;
    --link-crm-stage-border: #fde68a;
}

.link-app__crm-stage[data-crm-stage="negotiation"] {
    --link-crm-stage-accent: #ea580c;
    --link-crm-stage-soft: #fff7ed;
    --link-crm-stage-border: #fed7aa;
}

.link-app__crm-stage[data-crm-stage="lost"] {
    --link-crm-stage-accent: #dc2626;
    --link-crm-stage-soft: #fef2f2;
    --link-crm-stage-border: #fecaca;
}

.link-app__crm-qualification .link-app__crm-stage {
    overflow: hidden;
    border-color: var(--link-crm-stage-border);
    background: #fff;
}

.link-app__crm-qualification .link-app__crm-stage::before {
    background: var(--link-crm-stage-accent);
}

.link-app__crm-qualification .link-app__crm-stage-header {
    background: var(--link-crm-stage-soft);
    border-bottom-color: var(--link-crm-stage-border);
}

.link-app__crm-qualification .link-app__crm-stage-dot {
    background: var(--link-crm-stage-accent);
    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--link-crm-stage-accent) 14%,
            transparent
        );
}

.link-app__crm-qualification .link-app__crm-stage-count {
    color: var(--link-crm-stage-accent);
    background: #fff;
    border: 1px solid var(--link-crm-stage-border);
}

.link-app__crm-qualification .link-app__crm-stage-list {
    background:
        linear-gradient(
            180deg,
            var(--link-crm-stage-soft) 0,
            #fff 72px
        );
}

.link-app__crm-qualification .link-app__crm-prospect {
    border-color: var(--link-crm-stage-border);
    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--link-crm-stage-accent) 8%,
            transparent
        );
}

.link-app__crm-qualification .link-app__crm-prospect-avatar {
    color: var(--link-crm-stage-accent);
    background: var(--link-crm-stage-soft);
    border:
        1px solid
        var(--link-crm-stage-border);
}

.link-app__crm-qualification .link-app__crm-stage-select--compact {
    border-color: var(--link-crm-stage-border);
    background-color: var(--link-crm-stage-soft);
}

@media (max-width: 899px) {
    .link-app__crm-qualification .link-app__crm-stage {
        border-left:
            5px solid
            var(--link-crm-stage-accent);
    }

    .link-app__crm-qualification .link-app__crm-stage-header {
        padding:
            15px
            14px;
    }

    .link-app__crm-qualification .link-app__crm-stage-header strong {
        color: #0f172a;
        font-size: 15px;
        font-weight: 850;
    }

    .link-app__crm-qualification .link-app__crm-stage-count {
        min-width: 30px;
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-weight: 850;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__crm-qualification .link-app__crm-stage,
    .link-app__crm-qualification .link-app__crm-prospect {
        transition: none;
    }
}

/* ==========================================================
   LINK UX7 — PREMIUM CONTACT CARDS
   Dashboard clair, cartes contrastées, chips contenues.
   ========================================================== */

/* ---------- Surface générale ---------- */

.link-app__view[data-link-view="network"],
.link-app__view[data-link-view="encounters"],
.link-app__view[data-link-view="crm"] {
    min-width: 0;
}

.link-app__network-grid,
.link-app__encounters-list,
.link-app__crm-board {
    min-width: 0;
}

/* ---------- Réseau : grille premium ---------- */

.link-app__network-grid {
    gap: 18px;
}

.link-app__network-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #e4e9f2;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 10px 30px rgba(15, 23, 42, .07);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.link-app__network-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(
            90deg,
            var(--link-primary, #2563eb),
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 38%,
                #7dd3fc
            )
        );
    opacity: .88;
}

.link-app__network-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding-top: 3px;
}

.link-app__network-card-head > * {
    min-width: 0;
}

.link-app__network-card h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}

.link-app__network-relation {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 25px;
    margin-top: 7px;
    padding: 4px 9px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 20%,
            #dbe4f0
        );
    border-radius: 999px;
    background:
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 7%,
            #fff
        );
    color:
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 82%,
            #172033
        );
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * Secteur :
 * l'ancienne puce pouvait déborder car elle héritait de règles
 * pensées pour d'autres vues.
 */
.link-app__network-card .link-app__client-sector {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 13px 0 0;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid #dfe7f2;
    border-radius: 9px;
    background: #f5f8fc;
    color: #526078;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-app__network-card .link-app__client-sector::before {
    content: "◆";
    flex: 0 0 auto;
    margin-right: 7px;
    color: var(--link-primary, #2563eb);
    font-size: 7px;
}

.link-app__network-contact {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #edf1f6;
}

.link-app__network-contact a,
.link-app__network-contact span {
    min-width: 0;
    max-width: 100%;
    color: #536176;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-app__network-contact a {
    text-decoration: none;
}

.link-app__network-contact a:hover {
    color: var(--link-primary, #2563eb);
}

.link-app__network-note {
    min-width: 0;
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid #edf1f6;
    border-radius: 11px;
    background: #fafbfc;
    color: #657187;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.link-app__network-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-top: auto;
    padding-top: 15px;
}

.link-app__network-actions .link-app__button {
    flex: 1 1 120px;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 750;
    white-space: normal;
    text-align: center;
}

/* ---------- Rencontres : même langage visuel ---------- */

.link-app__encounters-list {
    gap: 16px;
}

.link-app__encounter-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #e4e9f2;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 10px 28px rgba(15, 23, 42, .06);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.link-app__encounter-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--link-primary, #2563eb),
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 42%,
                #38bdf8
            )
        );
}

.link-app__encounter-main {
    min-width: 0;
    gap: 14px;
}

.link-app__encounter-copy,
.link-app__encounter-heading,
.link-app__encounter-business {
    min-width: 0;
}

.link-app__encounter-heading h2 {
    color: #111827;
    font-weight: 850;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}

.link-app__encounter-business {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.link-app__encounter-company {
    min-width: 0;
    max-width: 100%;
    color: #536176;
    overflow-wrap: anywhere;
}

.link-app__encounter-sector {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    padding: 5px 9px;
    box-sizing: border-box;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #f5f8fc;
    color: #536176;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-app__encounter-contacts {
    gap: 7px;
}

.link-app__encounter-contact {
    min-width: 0;
    max-width: 100%;
    border-color: #e5eaf2;
    background: #f9fbfd;
}

.link-app__encounter-contact span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-app__encounter-meta {
    flex-wrap: wrap;
    gap: 7px;
}

.link-app__encounter-source,
.link-app__encounter-intent {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.link-app__encounter-note {
    border-color: #e5eaf2;
    background: #f8fafc;
}

.link-app__encounter-note .link-app__textarea {
    border-color: #dfe5ee;
    background: #fff;
}

.link-app__encounter-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.link-app__encounter-actions .link-app__button {
    min-width: 0;
    border-radius: 10px;
}

/* ---------- CRM : cartes prospects premium ---------- */

.link-app__crm-qualification .link-app__crm-stage {
    border-width: 1px;
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 8px 22px rgba(15, 23, 42, .05);
}

.link-app__crm-qualification .link-app__crm-stage-header {
    min-width: 0;
}

.link-app__crm-qualification .link-app__crm-stage-list {
    gap: 10px;
    padding: 10px;
}

.link-app__crm-qualification .link-app__crm-prospect {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 13px;
    border-width: 1px;
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 7px 18px
        color-mix(
            in srgb,
            var(--link-crm-stage-accent) 9%,
            transparent
        );
}

.link-app__crm-qualification .link-app__crm-prospect::before {
    width: 3px;
    background: var(--link-crm-stage-accent);
}

.link-app__crm-prospect-heading {
    min-width: 0;
}

.link-app__crm-prospect-heading > div {
    min-width: 0;
}

.link-app__crm-prospect-heading strong {
    color: #111827;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.link-app__crm-prospect-contact,
.link-app__crm-prospect-commercial,
.link-app__crm-prospect-meta {
    min-width: 0;
    max-width: 100%;
}

.link-app__crm-prospect-contact {
    color: #657187;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-app__crm-prospect-commercial {
    padding: 8px 9px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--link-crm-stage-accent) 16%,
            #e8edf4
        );
    border-radius: 9px;
    background:
        color-mix(
            in srgb,
            var(--link-crm-stage-accent) 5%,
            #fff
        );
}

.link-app__crm-prospect-meta {
    flex-wrap: wrap;
}

.link-app__crm-stage-select--compact {
    max-width: 100%;
}

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
    .link-app__network-card:hover,
    .link-app__encounter-card:hover {
        transform: translateY(-2px);
        border-color:
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 20%,
                #dce3ed
            );
        box-shadow:
            0 2px 4px rgba(15, 23, 42, .04),
            0 16px 38px rgba(15, 23, 42, .10);
    }

    .link-app__crm-qualification .link-app__crm-prospect:hover {
        transform: translateY(-1px);
        box-shadow:
            0 2px 4px rgba(15, 23, 42, .04),
            0 11px 25px
            color-mix(
                in srgb,
                var(--link-crm-stage-accent) 13%,
                transparent
            );
    }
}

@media (min-width: 1200px) {
    .link-app__network-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
        gap: 18px;
    }

    .link-app__network-card {
        min-height: 245px;
    }
}

@media (min-width: 1540px) {
    .link-app__network-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .link-app__network-grid,
    .link-app__encounters-list {
        gap: 13px;
    }

    .link-app__network-card,
    .link-app__encounter-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 17px;
    }

    .link-app__network-card::before {
        left: 16px;
        right: 16px;
    }

    .link-app__network-card .link-app__client-sector,
    .link-app__encounter-sector {
        width: fit-content;
        max-width: 100%;
        white-space: normal;
    }

    .link-app__network-actions {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .link-app__network-actions .link-app__button {
        width: 100%;
        min-width: 0;
    }

    .link-app__encounter-main {
        align-items: flex-start;
    }

    .link-app__encounter-actions {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .link-app__encounter-actions .link-app__button {
        width: 100%;
    }

    .link-app__crm-qualification .link-app__crm-stage {
        border-left-width: 5px;
        border-radius: 16px;
    }

    .link-app__crm-qualification .link-app__crm-stage-list {
        padding: 9px;
    }

    .link-app__crm-qualification .link-app__crm-prospect {
        padding: 13px;
        border-radius: 13px;
    }
}

@media (max-width: 420px) {
    .link-app__network-card,
    .link-app__encounter-card {
        padding: 14px;
    }

    .link-app__network-actions,
    .link-app__encounter-actions {
        grid-template-columns: 1fr;
    }

    .link-app__network-card .link-app__client-sector,
    .link-app__encounter-sector {
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__network-card,
    .link-app__encounter-card,
    .link-app__crm-qualification .link-app__crm-prospect {
        transition: none;
    }

    .link-app__network-card:hover,
    .link-app__encounter-card:hover,
    .link-app__crm-qualification .link-app__crm-prospect:hover {
        transform: none;
    }
}

/* ==========================================================
   LINK UX8 — PREMIUM CONTACT SURFACES
   Réseau / Rencontres / CRM / Clients
   ========================================================== */

:root {
    --link-ux8-border: #dce4ef;
    --link-ux8-border-soft: #e9eef5;
    --link-ux8-surface-soft: #f7f9fc;
    --link-ux8-text: #182230;
    --link-ux8-muted: #667085;
    --link-ux8-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 10px 30px rgba(16, 24, 40, .075);
}

/* ----------------------------------------------------------
   CARTES : langage visuel commun
   ---------------------------------------------------------- */

.link-app__network-card,
.link-app__encounter-card,
.link-app__client-card,
.link-app__crm-qualification .link-app__crm-prospect {
    border-color: var(--link-ux8-border);
    background: #fff;
    box-shadow: var(--link-ux8-shadow);
}

/* ----------------------------------------------------------
   RESEAU
   ---------------------------------------------------------- */

.link-app__network-card {
    padding: 21px;
    border-radius: 18px;
}

.link-app__network-card::before {
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    opacity: 1;
}

.link-app__network-card-head {
    padding-top: 7px;
}

.link-app__network-card-head > div {
    display: grid;
    gap: 5px;
    width: 100%;
}

.link-app__network-card h2 {
    font-size: 17px;
    color: var(--link-ux8-text);
}

.link-app__network-card-head strong {
    color: #475467;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.link-app__network-relation {
    order: -1;
    margin: 0 0 3px;
}

.link-app__network-contact {
    gap: 8px;
    margin-top: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--link-ux8-border-soft);
    border-bottom: 1px solid var(--link-ux8-border-soft);
}

.link-app__network-contact a,
.link-app__network-contact span {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.link-app__network-note {
    margin: 13px 0 0;
    padding: 11px 12px;
    border-color: var(--link-ux8-border-soft);
    background: var(--link-ux8-surface-soft);
}

.link-app__network-actions {
    margin-top: 16px;
    padding-top: 0;
}

/* ----------------------------------------------------------
   RENCONTRES
   ---------------------------------------------------------- */

.link-app__encounter-card {
    padding: 21px 21px 19px 24px;
    border-radius: 18px;
}

.link-app__encounter-card::before {
    width: 5px;
}

.link-app__encounter-main {
    gap: 16px;
}

.link-app__encounter-avatar {
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px var(--link-ux8-border);
}

.link-app__encounter-heading h2 {
    color: var(--link-ux8-text);
    font-size: 17px;
}

.link-app__encounter-company {
    color: #475467;
    font-weight: 700;
}

.link-app__encounter-contacts {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.link-app__encounter-contact {
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    background: #f8fafc;
    color: #344054;
    font-size: 12.5px;
    font-weight: 750;
    text-decoration: none;
}

.link-app__encounter-contact:hover {
    border-color:
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 24%,
            #dfe5ed
        );
    background:
        color-mix(
            in srgb,
            var(--link-primary, #2563eb) 4%,
            #fff
        );
    color: var(--link-primary, #2563eb);
}

.link-app__encounter-meta {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--link-ux8-border-soft);
}

/* Modifier coordonnées : action volontairement secondaire */

.link-app__encounter-edit {
    margin-top: 13px;
    border: 0;
    background: transparent;
}

.link-app__encounter-edit-toggle {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 32px;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.link-app__encounter-edit-toggle::-webkit-details-marker {
    display: none;
}

.link-app__encounter-edit-toggle::marker {
    display: none;
    content: "";
}

.link-app__encounter-edit-toggle:hover {
    background: #f5f7fa;
    color: #344054;
}

.link-app__encounter-edit[open]
.link-app__encounter-edit-toggle {
    margin-bottom: 10px;
    background: #f5f7fa;
    color: #344054;
}

.link-app__encounter-edit-panel {
    padding: 14px;
    border: 1px solid var(--link-ux8-border-soft);
    border-radius: 13px;
    background: var(--link-ux8-surface-soft);
}

/* ----------------------------------------------------------
   NOTE : véritable accordéon compact
   ---------------------------------------------------------- */

.link-app__encounter-note {
    display: block;
    margin-top: 13px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--link-ux8-border-soft);
    border-radius: 12px;
    background: #fff;
}

.link-app__encounter-note-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    box-sizing: border-box;
    color: #475467;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.link-app__encounter-note-toggle::-webkit-details-marker {
    display: none;
}

.link-app__encounter-note-toggle::marker {
    display: none;
    content: "";
}

.link-app__encounter-note-toggle:hover {
    background: var(--link-ux8-surface-soft);
    color: var(--link-ux8-text);
}

.link-app__encounter-note-toggle-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.link-app__encounter-note-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 2px solid #98a2b3;
    border-bottom: 2px solid #98a2b3;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
}

.link-app__encounter-note[open]
.link-app__encounter-note-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.link-app__encounter-note[open]
.link-app__encounter-note-toggle {
    border-bottom: 1px solid var(--link-ux8-border-soft);
    background: var(--link-ux8-surface-soft);
}

.link-app__encounter-note-panel {
    padding: 13px;
}

.link-app__encounter-note-panel > label {
    display: block;
    margin-bottom: 7px;
    color: #475467;
    font-size: 11px;
    font-weight: 750;
}

.link-app__encounter-note .link-app__textarea {
    width: 100%;
    box-sizing: border-box;
    border-color: #dce3ec;
    border-radius: 10px;
    background: #fff;
}

.link-app__encounter-note-footer {
    margin-top: 10px;
}

/* ----------------------------------------------------------
   CLIENTS
   ---------------------------------------------------------- */

.link-app__client-card {
    position: relative;
    gap: 15px;
    overflow: hidden;
    padding: 20px;
    border-radius: 18px;
}

.link-app__client-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background:
        linear-gradient(
            180deg,
            var(--link-primary, #2563eb),
            color-mix(
                in srgb,
                var(--link-primary, #2563eb) 40%,
                #38bdf8
            )
        );
}

.link-app__client-card-header {
    gap: 14px;
}

.link-app__client-card-title {
    gap: 4px;
}

.link-app__client-card-title strong {
    color: var(--link-ux8-text);
    font-size: 15px;
    font-weight: 850;
}

.link-app__client-card .link-app__client-sector {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.link-app__client-contacts {
    gap: 9px;
    padding: 13px 0;
    border-top: 1px solid var(--link-ux8-border-soft);
    border-bottom: 1px solid var(--link-ux8-border-soft);
}

.link-app__client-contact {
    max-width: 100%;
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}

.link-app__client-contact span:last-child {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.link-app__client-card-footer {
    padding-top: 0;
    border-top: 0;
}

/* ----------------------------------------------------------
   CRM
   ---------------------------------------------------------- */

.link-app__crm-qualification
.link-app__crm-stage-list {
    gap: 12px;
    padding: 12px;
}

.link-app__crm-qualification
.link-app__crm-prospect {
    padding: 15px;
    border-radius: 14px;
}

.link-app__crm-prospect-heading {
    gap: 10px;
}

.link-app__crm-prospect-heading strong {
    font-size: 13px;
}

.link-app__crm-prospect-contact {
    margin-top: 6px;
    padding: 8px 0;
    color: #344054;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.45;
}

.link-app__crm-prospect-commercial {
    margin-top: 7px;
}

.link-app__crm-prospect-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--link-ux8-border-soft);
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {
    .link-app__network-card,
    .link-app__encounter-card,
    .link-app__client-card {
        padding: 17px;
        border-radius: 16px;
    }

    .link-app__encounter-card {
        padding-left: 20px;
    }

    .link-app__network-card::before {
        left: 0;
        right: 0;
        border-radius: 16px 16px 0 0;
    }

    .link-app__network-card h2,
    .link-app__encounter-heading h2 {
        font-size: 16px;
    }

    .link-app__network-contact a,
    .link-app__network-contact span,
    .link-app__client-contact {
        font-size: 12.5px;
        font-weight: 750;
    }

    .link-app__encounter-contact {
        width: 100%;
        box-sizing: border-box;
        font-weight: 750;
    }

    .link-app__encounter-edit {
        margin-top: 9px;
    }

    .link-app__encounter-edit-toggle {
        min-height: 28px;
        padding: 4px 5px;
        font-size: 10px;
        font-weight: 600;
        opacity: .82;
    }

    .link-app__encounter-note {
        margin-top: 10px;
    }

    .link-app__encounter-note-toggle {
        min-height: 40px;
        padding: 9px 10px;
        font-size: 11px;
    }

    .link-app__encounter-note-panel {
        padding: 11px;
    }

    .link-app__encounter-actions {
        gap: 7px;
    }

    .link-app__crm-qualification
    .link-app__crm-stage-list {
        padding: 10px;
    }

    .link-app__crm-qualification
    .link-app__crm-prospect {
        padding: 14px;
    }
}

@media (max-width: 420px) {
    .link-app__network-card,
    .link-app__encounter-card,
    .link-app__client-card {
        padding: 15px;
    }

    .link-app__encounter-card {
        padding-left: 18px;
    }

    .link-app__encounter-edit-toggle {
        font-size: 9.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__encounter-note-chevron {
        transition: none;
    }
}

/* ==========================================================
   LINK PHOTO1D — REMOTE CONTACT AVATARS
   ========================================================== */

.link-app__contact-avatar {
  flex: 0 0 auto;
  overflow: hidden;
}

.link-app__contact-avatar--image {
  padding: 0;
  background: var(--link-surface, #fff);
}

.link-app__contact-avatar--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.link-app__network-card-head > .link-app__contact-avatar {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.link-app__encounter-avatar.link-app__contact-avatar--image {
  display: block;
}

.link-app__crm-prospect-avatar.link-app__contact-avatar--image {
  display: block;
}

@media (max-width: 767px) {
  .link-app__network-card-head > .link-app__contact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
}

/* ==========================================================
   LINK PHOTO2B — REMOTE IMAGE FALLBACK
   ========================================================== */

.link-app__contact-avatar {
  position: relative;
}

.link-app__contact-avatar-initials {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.link-app__contact-avatar-image {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.link-app__contact-avatar-image[hidden] {
  display: none;
}

/* ==========================================================
   LINK UX9B — PREMIUM APPLICATION SHELL
   ----------------------------------------------------------
   Visual shell only.
   No routing / business / renderer behaviour changed.
   ========================================================== */

.link-app {
    --link-shell-sidebar: 272px;
    --link-shell-content-max: 1240px;
    --link-shell-mobile-nav-height: 72px;

    background:
        radial-gradient(
            circle at 78% -10%,
            color-mix(
                in srgb,
                var(--link-accent) 5%,
                transparent
            ),
            transparent 32rem
        ),
        var(--link-background);
}

/* ---------- MOBILE TOP BAR ---------- */

.link-app__topbar {
    min-height: 66px;
    padding:
        max(9px, env(safe-area-inset-top))
        16px
        9px;
    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--link-border) 82%,
            transparent
        );
    background: rgba(255, 255, 255, .88);
    box-shadow:
        0 1px 0 rgba(15, 23, 42, .02),
        0 8px 30px rgba(15, 23, 42, .035);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.link-app__mobile-brand {
    gap: 10px;
}

.link-app__mobile-brand .link-app__brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    box-shadow:
        0 7px 18px
        color-mix(
            in srgb,
            var(--link-accent) 20%,
            transparent
        );
}

.link-app__mobile-brand strong {
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.link-app__topbar-account {
    gap: 10px;
}

.link-app__avatar--small {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    border-color:
        color-mix(
            in srgb,
            var(--link-accent) 12%,
            var(--link-border)
        );
}

/* ---------- MAIN CONTENT ---------- */

.link-app__content {
    width:
        min(
            calc(100% - 32px),
            var(--link-shell-content-max)
        );
    padding-top: 28px;
    padding-bottom:
        calc(
            var(--link-shell-mobile-nav-height)
            + 38px
            + env(safe-area-inset-bottom)
        );
}

.link-app__view {
    animation: link-ux9-view-enter .22s ease-out;
}

@keyframes link-ux9-view-enter {
    from {
        opacity: .72;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- MOBILE APPLICATION NAV ---------- */

.link-app__mobile-nav {
    right: 10px;
    bottom:
        max(
            10px,
            env(safe-area-inset-bottom)
        );
    left: 10px;

    display: flex;
    grid-template-columns: none;

    min-height: var(--link-shell-mobile-nav-height);
    gap: 3px;

    padding: 6px;

    overflow-x: auto;
    overflow-y: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--link-border) 90%,
            transparent
        );

    border-radius: 22px;

    background: rgba(255, 255, 255, .94);

    box-shadow:
        0 2px 4px rgba(15, 23, 42, .04),
        0 18px 46px rgba(15, 23, 42, .16);

    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);

    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.link-app__mobile-nav::-webkit-scrollbar {
    display: none;
}

.link-app__mobile-nav .link-app__nav-item {
    position: relative;

    flex:
        0 0
        clamp(62px, 18vw, 78px);

    min-width: 0;
    min-height: 58px;

    gap: 4px;

    padding: 6px 5px;

    border-radius: 16px;

    font-size: 9px;
    font-weight: 750;

    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.link-app__mobile-nav .link-app__nav-item:active {
    transform: scale(.96);
}

.link-app__mobile-nav .link-app__nav-item.is-active {
    background:
        color-mix(
            in srgb,
            var(--link-accent) 9%,
            #ffffff
        );

    color: var(--link-accent);
}

.link-app__mobile-nav .link-app__nav-item.is-active::after {
    content: "";

    position: absolute;
    right: 22%;
    bottom: 3px;
    left: 22%;

    height: 2px;

    border-radius: 999px;

    background: var(--link-accent);
}

.link-app__mobile-nav .link-app__nav-icon {
    width: 26px;
    height: 26px;

    font-size: 19px;

    transition:
        transform .16s ease;
}

.link-app__mobile-nav
.link-app__nav-item.is-active
.link-app__nav-icon {
    transform: translateY(-1px);
}

.link-app__mobile-nav .link-app__nav-label {
    width: 100%;

    overflow: hidden;

    font-size: 9px;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- DESKTOP APPLICATION SHELL ---------- */

@media (min-width: 900px) {

    .link-app {
        grid-template-columns:
            var(--link-shell-sidebar)
            minmax(0, 1fr);
    }

    .link-app__sidebar {
        width: var(--link-shell-sidebar);

        padding:
            24px
            16px
            18px;

        border-right:
            1px solid
            color-mix(
                in srgb,
                var(--link-border) 88%,
                transparent
            );

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #fbfcff 100%
            );

        box-shadow:
            8px 0 30px rgba(15, 23, 42, .025);
    }

    .link-app__sidebar .link-app__brand {
        margin:
            0
            9px
            31px;
    }

    .link-app__sidebar .link-app__brand-mark {
        width: 42px;
        height: 42px;

        border-radius: 14px;

        box-shadow:
            0 8px 22px
            color-mix(
                in srgb,
                var(--link-accent) 18%,
                transparent
            );
    }

    .link-app__brand-copy strong {
        font-size: 19px;
    }

    .link-app__brand-copy small {
        margin-top: 1px;
        font-size: 10px;
    }

    .link-app__nav {
        gap: 5px;
    }

    .link-app__nav .link-app__nav-item {
        position: relative;

        min-height: 48px;

        gap: 12px;

        padding:
            0
            13px;

        border-radius: 13px;

        color: #657084;

        font-size: 13px;
        font-weight: 720;

        transition:
            background-color .16s ease,
            color .16s ease,
            transform .16s ease;
    }

    .link-app__nav .link-app__nav-item:hover {
        background: #f5f6fa;
        color: #273144;
        transform: translateX(2px);
    }

    .link-app__nav .link-app__nav-item.is-active {
        background:
            color-mix(
                in srgb,
                var(--link-accent) 9%,
                #ffffff
            );

        color: var(--link-accent);
    }

    .link-app__nav
    .link-app__nav-item.is-active::before {
        content: "";

        position: absolute;

        top: 11px;
        bottom: 11px;
        left: -5px;

        width: 3px;

        border-radius: 999px;

        background: var(--link-accent);
    }

    .link-app__nav .link-app__nav-icon {
        width: 25px;
        height: 25px;

        font-size: 19px;
    }

    .link-app__sidebar-account {
        margin-top: 18px;

        padding:
            15px
            9px
            2px;

        border-top:
            1px solid
            color-mix(
                in srgb,
                var(--link-border) 85%,
                transparent
            );
    }

    .link-app__sidebar-account .link-app__avatar {
        width: 39px;
        height: 39px;

        border-radius: 13px;
    }

    .link-app__account-copy strong {
        color: #273144;

        font-size: 12px;
        font-weight: 800;
    }

    .link-app__account-copy small {
        font-size: 10px;
    }

    .link-app__content {
        width:
            min(
                calc(100% - 64px),
                var(--link-shell-content-max)
            );

        padding:
            46px
            0
            72px;
    }
}

/* ---------- LARGE DESKTOP ---------- */

@media (min-width: 1200px) {

    .link-app {
        --link-shell-sidebar: 284px;
    }

    .link-app__content {
        width:
            min(
                calc(100% - 80px),
                var(--link-shell-content-max)
            );

        padding-top: 54px;
    }
}

/* ---------- SMALL MOBILE ---------- */

@media (max-width: 480px) {

    .link-app__topbar {
        min-height: 62px;

        padding:
            max(7px, env(safe-area-inset-top))
            12px
            7px;
    }

    .link-app__mobile-brand .link-app__brand-mark {
        width: 36px;
        height: 36px;

        border-radius: 12px;
    }

    .link-app__content {
        width: calc(100% - 24px);

        padding-top: 20px;

        padding-bottom:
            calc(
                var(--link-shell-mobile-nav-height)
                + 34px
                + env(safe-area-inset-bottom)
            );
    }

    .link-app__mobile-nav {
        right: 6px;
        left: 6px;

        bottom:
            max(
                6px,
                env(safe-area-inset-bottom)
            );

        gap: 2px;

        padding: 5px;

        border-radius: 20px;
    }

    .link-app__mobile-nav .link-app__nav-item {
        flex-basis: 64px;

        min-height: 57px;

        padding:
            5px
            3px;

        border-radius: 14px;

        font-size: 8.5px;
    }

    .link-app__mobile-nav .link-app__nav-icon {
        width: 24px;
        height: 24px;

        font-size: 18px;
    }

    .link-app__mobile-nav .link-app__nav-label {
        font-size: 8.5px;
    }
}

/* ---------- VERY SMALL MOBILE ---------- */

@media (max-width: 360px) {

    .link-app__mobile-nav {
        right: 4px;
        left: 4px;
    }

    .link-app__mobile-nav .link-app__nav-item {
        flex-basis: 60px;
    }
}

/* ---------- ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {

    .link-app__view {
        animation: none;
    }

    .link-app__nav-item,
    .link-app__nav-icon {
        transition: none !important;
    }
}



/* =========================================================
   LINK UX10C — PRIMARY NAVIGATION + CENTRAL ENCOUNTER ACTION
   ========================================================= */

.link-app__mobile-navigation-shell {
    position: fixed;
    z-index: 80;

    right: 10px;
    bottom:
        max(
            8px,
            env(safe-area-inset-bottom)
        );
    left: 10px;

    pointer-events: none;
}

.link-app__mobile-navigation-shell
.link-app__mobile-nav {
    position: relative;

    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        76px
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 2px;

    overflow: visible;

    pointer-events: auto;
}

.link-app__mobile-navigation-shell
.link-app__mobile-nav
.link-app__nav-item {
    min-width: 0;
    width: auto;
    max-width: none;

    flex: none;

    padding-inline: 3px;
}

.link-app__mobile-navigation-shell
.link-app__mobile-nav
.link-app__nav-item:nth-child(1) {
    grid-column: 1;
}

.link-app__mobile-navigation-shell
.link-app__mobile-nav
.link-app__nav-item:nth-child(2) {
    grid-column: 2;
}

.link-app__mobile-navigation-shell
.link-app__mobile-nav
.link-app__nav-item:nth-child(3) {
    grid-column: 4;
}

.link-app__mobile-navigation-shell
.link-app__mobile-nav
.link-app__nav-item:nth-child(4) {
    grid-column: 5;
}

.link-app__mobile-primary-action {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    transform:
        translate(
            -50%,
            -58%
        );

    padding: 0;

    border:
        5px solid
        var(--link-surface);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            var(--link-accent),
            color-mix(
                in srgb,
                var(--link-accent) 72%,
                #ffffff
            )
        );

    box-shadow:
        0 12px 30px
        color-mix(
            in srgb,
            var(--link-accent) 34%,
            transparent
        ),
        0 4px 12px
        rgba(24, 31, 50, .16);

    color: #ffffff;

    font: inherit;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.link-app__mobile-primary-action span {
    display: block;

    transform:
        translateY(-2px);
}

.link-app__mobile-primary-action:active {
    transform:
        translate(
            -50%,
            -55%
        )
        scale(.94);
}

.link-app__mobile-primary-action:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--link-accent) 40%,
            #ffffff
        );

    outline-offset: 3px;
}

@media (min-width: 900px) {

    .link-app__mobile-navigation-shell {
        display: none;
    }
}

@media (max-width: 480px) {

    .link-app__mobile-navigation-shell {
        right: 6px;
        left: 6px;

        bottom:
            max(
                6px,
                env(safe-area-inset-bottom)
            );
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav {
        right: auto;
        left: auto;
        bottom: auto;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            68px
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav
    .link-app__nav-item {
        flex-basis: auto;

        min-height: 57px;
    }

    .link-app__mobile-primary-action {
        width: 58px;
        height: 58px;

        border-radius: 20px;

        font-size: 32px;
    }
}

@media (max-width: 360px) {

    .link-app__mobile-navigation-shell {
        right: 4px;
        left: 4px;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            62px
            minmax(0, 1fr)
            minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {

    .link-app__mobile-primary-action {
        transition: none !important;
    }
}

/*
 * =========================================================
 * LINK UX11B — PROSPECTS FIRST
 * Mobile-first commercial follow-up without turning LINK
 * into the full desktop CRM product.
 * =========================================================
 */

.link-app__crm--prospects-first {
    display: grid;
    gap: 22px;
}

.link-app__crm--prospects-first .link-app__crm-view-header {
    margin-bottom: 0;
}

.link-app__crm--prospects-first .link-app__crm-view-header h1 {
    max-width: 760px;
}

.link-app__crm--prospects-first .link-app__crm-qualification {
    margin: 0;
}

.link-app__crm--prospects-first
.link-app__crm-qualification-heading {
    align-items: center;
}

.link-app__crm--prospects-first
.link-app__crm-qualification-heading > div {
    min-width: 0;
}

.link-app__crm--prospects-first
.link-app__crm-qualification-count {
    flex: 0 0 auto;
}

.link-app__crm--prospects-first
.link-app__crm-secondary-heading {
    margin-bottom: 14px;
}

@media (max-width: 899px) {
    .link-app__view[data-link-view="crm"] {
        padding-inline: 0;
    }

    .link-app__crm--prospects-first {
        gap: 18px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-view-header {
        padding: 2px 2px 0;
    }

    .link-app__crm--prospects-first
    .link-app__crm-view-header .link-app__eyebrow {
        margin-bottom: 6px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-view-header h1 {
        margin: 0;
        font-size: clamp(1.7rem, 7vw, 2.15rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
    }

    .link-app__crm--prospects-first
    .link-app__crm-view-header p {
        max-width: 36rem;
        margin: 8px 0 0;
        font-size: .91rem;
        line-height: 1.45;
    }

    .link-app__crm--prospects-first
    .link-app__crm-qualification {
        padding: 14px;
        border-radius: 22px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-qualification::before {
        border-radius: 22px 22px 0 0;
    }

    .link-app__crm--prospects-first
    .link-app__crm-qualification-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        margin-bottom: 12px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-qualification-heading h2 {
        margin: 1px 0 0;
        font-size: 1.08rem;
        letter-spacing: -.025em;
    }

    .link-app__crm--prospects-first
    .link-app__crm-qualification-heading p {
        margin: 4px 0 0;
        font-size: .79rem;
        line-height: 1.35;
    }

    .link-app__crm--prospects-first
    .link-app__crm-qualification-count {
        min-width: 36px;
        height: 36px;
        padding-inline: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: .92rem;
        font-weight: 800;
    }

    .link-app__crm--prospects-first
    .link-app__crm-pipeline {
        display: grid;
        gap: 8px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage {
        border-radius: 16px;
        overflow: hidden;
        box-shadow: none;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage-header {
        min-height: 52px;
        padding: 10px 12px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage-header strong {
        font-size: .9rem;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage-count {
        min-width: 27px;
        height: 27px;
        padding-inline: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        font-size: .76rem;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage-list {
        padding: 7px;
        gap: 7px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect {
        min-height: 0;
        padding: 10px;
        border-radius: 13px;
        box-shadow: none;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect::before {
        width: 3px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-heading {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        align-items: center;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-avatar {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 12px;
        font-size: .76rem;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-heading strong {
        display: block;
        font-size: .91rem;
        line-height: 1.18;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-contact {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        font-size: .73rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-commercial {
        margin: 8px 0 0 47px;
        padding: 5px 8px;
        border-radius: 8px;
        font-size: .71rem;
        line-height: 1.25;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-meta {
        margin: 8px 0 0 47px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage-select--compact {
        width: 100%;
        min-height: 34px;
        padding: 5px 28px 5px 8px;
        border-radius: 9px;
        font-size: .72rem;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-date {
        font-size: .67rem;
        white-space: nowrap;
    }

    .link-app__crm--prospects-first
    .link-app__crm-stage-empty {
        padding: 10px;
        font-size: .75rem;
    }

    .link-app__crm--prospects-first
    .link-app__crm-opportunities-zone {
        margin-top: 0;
        padding-top: 2px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-secondary-heading {
        padding-inline: 2px;
        margin-bottom: 10px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-secondary-heading h2 {
        margin: 2px 0 0;
        font-size: 1.12rem;
        letter-spacing: -.025em;
    }

    .link-app__crm--prospects-first
    .link-app__crm-secondary-heading p {
        margin: 4px 0 0;
        font-size: .79rem;
        line-height: 1.35;
    }

    .link-app__crm--prospects-first
    .link-app__opportunities {
        padding: 14px;
        border-radius: 20px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunities-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-toolbar {
        gap: 7px;
        margin-bottom: 10px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-create,
    .link-app__crm--prospects-first
    .link-app__opportunity-settings {
        border-radius: 12px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-create > summary,
    .link-app__crm--prospects-first
    .link-app__opportunity-settings > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 9px 11px;
        font-size: .78rem;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-pipeline {
        gap: 8px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-stage {
        border-radius: 14px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-stage-list {
        gap: 7px;
        padding: 7px;
    }

    .link-app__crm--prospects-first
    .link-app__opportunity-card {
        padding: 10px;
        border-radius: 11px;
        box-shadow: none;
    }
}

@media (max-width: 390px) {
    .link-app__crm--prospects-first
    .link-app__crm-qualification {
        padding: 11px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-commercial,
    .link-app__crm--prospects-first
    .link-app__crm-prospect-meta {
        margin-left: 0;
    }

    .link-app__crm--prospects-first
    .link-app__crm-prospect-meta {
        grid-template-columns: 1fr;
    }
}

/*
 * =========================================================
 * LINK UX11D3 — PROSPECTS / SINGLE-LIST EXPERIENCE
 * =========================================================
 */

.link-app__prospects-primary {
    display: grid;
    gap: 16px;
}

.link-app__prospects-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.link-app__prospect-metric {
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
}

.link-app__prospect-metric strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -.045em;
}

.link-app__prospect-metric span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.link-app__prospect-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 1px 5px;
    scrollbar-width: none;
}

.link-app__prospect-filters::-webkit-scrollbar {
    display: none;
}

.link-app__prospect-filter {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 12px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: .76rem;
    font-weight: 750;
    cursor: pointer;
}

.link-app__prospect-filter.is-active {
    border-color: #111827;
    background: #111827;
    color: #fff;
}

.link-app__prospect-list {
    display: grid;
    gap: 8px;
}

.link-app__prospect-list .link-app__crm-prospect {
    --link-crm-stage-accent: #64748b;
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .045);
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="new"] {
    --link-crm-stage-accent: #2563eb;
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="to_contact"] {
    --link-crm-stage-accent: #7c3aed;
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="contacted"] {
    --link-crm-stage-accent: #0891b2;
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="qualified"] {
    --link-crm-stage-accent: #0f766e;
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="proposal"] {
    --link-crm-stage-accent: #d97706;
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="negotiation"] {
    --link-crm-stage-accent: #ea580c;
}

.link-app__prospect-list
.link-app__crm-prospect[data-crm-prospect-stage="lost"] {
    --link-crm-stage-accent: #dc2626;
}

.link-app__prospect-list .link-app__crm-prospect::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--link-crm-stage-accent);
}

.link-app__prospect-list .link-app__crm-prospect-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.link-app__prospect-list .link-app__crm-prospect-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 13px;
}

.link-app__prospect-list .link-app__crm-prospect-heading strong {
    display: block;
    font-size: .94rem;
    line-height: 1.18;
}

.link-app__prospect-list .link-app__crm-prospect-contact {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: .73rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__prospect-list .link-app__crm-prospect-commercial {
    margin: 8px 0 0 52px;
    padding: 6px 8px;
    border-radius: 9px;
    background: #f8fafc;
    font-size: .72rem;
}

.link-app__prospect-list .link-app__crm-prospect-meta {
    margin: 8px 0 0 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.link-app__prospect-list .link-app__crm-stage-select--compact {
    width: 100%;
    min-height: 36px;
    border-radius: 10px;
    font-size: .73rem;
}

.link-app__prospect-filter-empty {
    padding: 22px 14px;
    border: 1px dashed rgba(15, 23, 42, .14);
    border-radius: 16px;
    color: #64748b;
    text-align: center;
    font-size: .82rem;
}

.link-app__crm-business {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

.link-app__crm-business > summary {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 15px;
    cursor: pointer;
    list-style: none;
}

.link-app__crm-business > summary::-webkit-details-marker {
    display: none;
}

.link-app__crm-business > summary span:first-child {
    display: grid;
    gap: 2px;
}

.link-app__crm-business > summary strong {
    font-size: .9rem;
}

.link-app__crm-business > summary small {
    color: #64748b;
    font-size: .72rem;
}

.link-app__crm-business > summary > span:last-child {
    font-size: 1.45rem;
    transition: transform .18s ease;
}

.link-app__crm-business[open] > summary > span:last-child {
    transform: rotate(90deg);
}

.link-app__crm-business-content {
    padding: 0 10px 10px;
}

@media (max-width: 899px) {
    .link-app__crm--prospects-first {
        gap: 16px;
    }

    .link-app__crm--prospects-first
    .link-app__crm-view-header p {
        max-width: 30rem;
    }

    .link-app__prospects-metrics {
        gap: 7px;
    }

    .link-app__prospect-metric {
        padding: 11px 9px;
        border-radius: 14px;
    }

    .link-app__prospect-metric strong {
        font-size: 1.25rem;
    }

    .link-app__prospect-list
    .link-app__crm-prospect {
        padding: 11px;
        border-radius: 14px;
    }

    .link-app__crm-business-content
    .link-app__opportunities {
        padding: 10px;
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 390px) {
    .link-app__prospect-list
    .link-app__crm-prospect-commercial,
    .link-app__prospect-list
    .link-app__crm-prospect-meta {
        margin-left: 0;
    }

    .link-app__prospect-list
    .link-app__crm-prospect-meta {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__crm-business > summary > span:last-child {
        transition: none;
    }
}

/* ==========================================================
   LINK UX11E2 — HOME COCKPIT / RECENT ENCOUNTERS / MOBILE FAB
   ========================================================== */

.link-app__dashboard-stats--compact {
    gap: 10px;
}

.link-app__dashboard-stats--compact .link-app__stat {
    min-width: 0;
}

.link-app__dashboard-encounters {
    overflow: hidden;
}

.link-app__dashboard-encounters .link-app__card-body,
.link-app__dashboard-encounters .link-app__cluster--between,
.link-app__dashboard-encounters .link-app__cluster--between > div {
    min-width: 0;
}

.link-app__dashboard-encounters .link-app__text-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

.link-app__dashboard-recent-list {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.link-app__dashboard-recent-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 12px 0;
}

.link-app__dashboard-recent-item + .link-app__dashboard-recent-item {
    border-top: 1px solid rgba(100, 116, 139, 0.14);
}

.link-app__dashboard-recent-item .link-app__encounter-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
}

.link-app__dashboard-recent-item .link-app__list-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

.link-app__dashboard-recent-item .link-app__list-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--link-color-text, #171923);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-app__dashboard-recent-item .link-app__list-description {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--link-color-muted, #718096);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Global action button.
 * It will open the UX11 action sheet in the next iteration.
 */

.link-app__mobile-primary-action {
    position: relative;
    z-index: 6;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 56px;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: -18px 2px 0;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #159000 !important;
    color: #ffffff !important;
    box-shadow:
        0 9px 24px rgba(21, 144, 0, 0.28),
        0 2px 7px rgba(20, 31, 45, 0.16);
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-appearance: none;
    appearance: none;
}

.link-app__mobile-primary-action > span {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #ffffff !important;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 0.9 !important;
    text-indent: 0 !important;
    transform: translateY(-1px);
    opacity: 1 !important;
    visibility: visible !important;
}

.link-app__mobile-primary-action:hover,
.link-app__mobile-primary-action:focus-visible {
    background: #117b00 !important;
    color: #ffffff !important;
}

.link-app__mobile-primary-action:focus-visible {
    outline: 3px solid rgba(21, 144, 0, 0.24);
    outline-offset: 3px;
}

.link-app__mobile-primary-action:active {
    transform: scale(0.96);
}

@media (max-width: 899px) {
    .link-app__dashboard {
        gap: 14px;
    }

    .link-app__dashboard-stats--compact {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .link-app__dashboard-stats--compact .link-app__stat {
        min-height: 92px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    .link-app__dashboard-stats--compact .link-app__stat-label {
        font-size: 11px;
        line-height: 1.2;
    }

    .link-app__dashboard-stats--compact .link-app__stat-value {
        margin-top: 6px;
        font-size: 25px;
        line-height: 1;
    }

    .link-app__dashboard-stats--compact .link-app__stat-detail {
        display: none;
    }

    .link-app__dashboard-encounters .link-app__card-body {
        padding: 18px;
    }

    .link-app__dashboard-recent-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 0;
    }

    .link-app__dashboard-recent-item .link-app__encounter-avatar {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

@media (max-width: 390px) {
    .link-app__dashboard-stats--compact .link-app__stat {
        min-height: 84px;
        padding: 12px 9px;
    }

    .link-app__dashboard-stats--compact .link-app__stat-value {
        font-size: 23px;
    }

    .link-app__mobile-primary-action {
        flex-basis: 52px;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .link-app__mobile-primary-action > span {
        font-size: 31px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__mobile-primary-action {
        transition: none !important;
    }

    .link-app__mobile-primary-action:active {
        transform: none;
    }
}

/* ==========================================================
   LINK UX11E5 — MOBILE NAV VISIBILITY / CENTER FAB FIX
   ========================================================== */

/*
 * UX11E2 made the FAB relative while it is a sibling of <nav>.
 * The shell was designed around an absolutely positioned center action.
 * Restore that invariant and explicitly lock the mobile navigation layer.
 */

@media (max-width: 899px) {
    .link-app__mobile-navigation-shell {
        position: fixed !important;
        z-index: 10050 !important;

        right: 10px !important;
        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            ) !important;
        left: 10px !important;

        display: block !important;
        width: auto !important;
        height: auto !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: none;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav {
        position: relative !important;

        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            68px
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;
        min-height: 64px !important;

        margin: 0 !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav
    .link-app__nav-item {
        display: flex !important;
        min-width: 0 !important;
        min-height: 58px !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav
    .link-app__nav-item:nth-child(1) {
        grid-column: 1 !important;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav
    .link-app__nav-item:nth-child(2) {
        grid-column: 2 !important;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav
    .link-app__nav-item:nth-child(3) {
        grid-column: 4 !important;
    }

    .link-app__mobile-navigation-shell
    .link-app__mobile-nav
    .link-app__nav-item:nth-child(4) {
        grid-column: 5 !important;
    }

    .link-app__mobile-primary-action {
        position: absolute !important;
        z-index: 60 !important;

        top: 50% !important;
        left: 50% !important;

        display: grid !important;
        place-items: center !important;

        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 5px solid var(--link-surface, #ffffff) !important;
        border-radius: 20px !important;

        background: #159000 !important;
        color: #ffffff !important;

        transform:
            translate(
                -50%,
                -58%
            ) !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }

    .link-app__mobile-primary-action > span {
        display: block !important;

        color: #ffffff !important;

        font-size: 32px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        transform: translateY(-2px) !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    .link-app__mobile-primary-action:active {
        transform:
            translate(
                -50%,
                -55%
            )
            scale(.94) !important;
    }

    /*
     * Content must never finish underneath the fixed navigation.
     */
    .link-app__content {
        padding-bottom:
            calc(
                var(--link-shell-mobile-nav-height, 72px)
                + 34px
                + env(safe-area-inset-bottom)
            ) !important;
    }
}

@media (max-width: 480px) {
    .link-app__mobile-navigation-shell {
        right: 6px !important;
        left: 6px !important;

        bottom:
            max(
                6px,
                env(safe-area-inset-bottom)
            ) !important;
    }
}

@media (max-width: 390px) {
    .link-app__mobile-navigation-shell
    .link-app__mobile-nav {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            62px
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

    .link-app__mobile-primary-action {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
}

@media (min-width: 900px) {
    .link-app__mobile-navigation-shell {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__mobile-primary-action:active {
        transform:
            translate(
                -50%,
                -58%
            ) !important;
    }
}

/* ==========================================================
   LINK UX11F2 — GLOBAL ACTION SHEET
   ========================================================== */

html.link-global-action-open,
body.link-global-action-open {
    overflow: hidden !important;
}

.link-app__global-action-overlay {
    position: fixed;
    z-index: 10080;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.link-app__global-action-overlay[hidden] {
    display: none !important;
}

.link-app__global-action-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .38);
    opacity: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity .18s ease;
}

.link-app__global-action-sheet {
    position: relative;
    z-index: 1;
    width: min(
        calc(100% - 20px),
        520px
    );
    margin:
        0 10px
        max(
            10px,
            env(safe-area-inset-bottom)
        );
    padding:
        8px
        14px
        14px;
    border: 1px solid
        rgba(15, 23, 42, .08);
    border-radius: 26px;
    background:
        rgba(255, 255, 255, .98);
    box-shadow:
        0 28px 80px
        rgba(15, 23, 42, .24);
    outline: none;
    opacity: 0;
    transform:
        translateY(
            calc(100% + 24px)
        );
    transition:
        transform .2s
            cubic-bezier(
                .2,
                .8,
                .2,
                1
            ),
        opacity .16s ease;
}

.link-app__global-action-overlay.is-open
.link-app__global-action-backdrop {
    opacity: 1;
}

.link-app__global-action-overlay.is-open
.link-app__global-action-sheet {
    opacity: 1;
    transform: translateY(0);
}

.link-app__global-action-handle {
    width: 38px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background:
        rgba(100, 116, 139, .28);
}

.link-app__global-action-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding:
        2px 4px
        14px;
}

.link-app__global-action-header h2 {
    margin: 3px 0 0;
    color: var(--link-text);
    font-size: 1.28rem;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.link-app__global-action-close {
    display: inline-grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 14px;
    background:
        rgba(15, 23, 42, .055);
    color: var(--link-text);
    font: inherit;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.link-app__global-action-list {
    display: grid;
    gap: 4px;
}

.link-app__global-action-item {
    display: grid;
    grid-template-columns:
        48px
        minmax(0, 1fr)
        24px;
    min-height: 66px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 8px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--link-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background .14s ease,
        transform .14s ease;
}

.link-app__global-action-item:hover,
.link-app__global-action-item:focus-visible {
    background:
        color-mix(
            in srgb,
            var(--link-accent) 7%,
            transparent
        );
}

.link-app__global-action-item:active {
    transform: scale(.985);
}

.link-app__global-action-item:focus-visible,
.link-app__global-action-close:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--link-accent) 28%,
            transparent
        );
    outline-offset: 1px;
}

.link-app__global-action-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background:
        color-mix(
            in srgb,
            var(--link-accent) 10%,
            white
        );
    color:
        var(
            --link-accent-strong,
            var(--link-accent)
        );
    font-size: 21px;
    font-weight: 800;
}

.link-app__global-action-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.link-app__global-action-copy strong {
    overflow: hidden;
    color: var(--link-text);
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.link-app__global-action-copy small {
    color: var(--link-muted);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
}

.link-app__global-action-chevron {
    color:
        rgba(100, 116, 139, .58);
    font-size: 26px;
    font-weight: 400;
    text-align: center;
}

@media (min-width: 900px) {
    .link-app__global-action-overlay {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .link-app__global-action-backdrop,
    .link-app__global-action-sheet,
    .link-app__global-action-item {
        transition: none !important;
    }
}

/* Manual encounter entry, independent of the retired scanner. */
.link-app__manual-encounter { margin-block: 1rem; padding: 1rem; border: 1px solid var(--link-border, #dbe2ea); border-radius: 1rem; }
.link-app__manual-encounter summary { cursor: pointer; font-weight: 600; }
.link-app__manual-encounter-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.link-app__manual-encounter-fields label { display: grid; gap: .35rem; }
.link-app__manual-encounter-field-wide { grid-column: 1 / -1; }
.link-app__manual-encounter-actions { margin-top: 1rem; }

/* Drawer sections use grid; respect hidden for ownership and mutation-only states. */
.link-app__crm-drawer [hidden] { display: none !important; }