/**
 * File: assets/css/bio.css
 * Version: 1.0.52
 Description: Production Bio & Links admin and public page styles for Chatting.im with canonical public Bio layout, separated social icons, transform-only drag sorting, archive/restore workflow and DB-backed link icon thumbnail controls.
 */

:root {
    --bg: #f7f3ea;
    --bg-deep: #eee6d5;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-solid: #ffffff;
    --surface-soft: #fbf8f1;
    --text: #171411;
    --muted: #756f65;
    --line: rgba(31, 24, 17, 0.12);
    --line-strong: rgba(31, 24, 17, 0.18);
    --primary: #174f3f;
    --primary-2: #226a55;
    --primary-soft: #dfeee8;
    --gold: #d9a441;
    --peach: #f3c7a4;
    --danger: #a33a2e;
    --shadow: 0 24px 80px rgba(52, 39, 21, 0.12);
    --shadow-soft: 0 16px 40px rgba(52, 39, 21, 0.08);
    --radius-xl: 34px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* Migrated Bio CSS from public-page.css */
/* Source: assets/css/public-page.css. Exact Bio-related selector move. No visual redesign intended. */

.public-shell-bio {
    width: min(1760px, calc(100% - 24px));
    min-height: calc(100svh - 48px);
    place-items: stretch center;
}

.public-shell-bio-chat {
    width: min(1920px, calc(100% - 24px));
}

.public-shell-bio-only {
    width: min(1040px, calc(100% - 24px));
    place-items: center;
}

.public-card-bio {
    min-height: calc(100svh - 64px);
    max-height: calc(100svh - 64px);
    align-content: start;
}

.public-card-bio-chat {
    align-items: stretch;
}

.public-card-bio-only {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
}

.public-card-bio-only .bio-public-shell {
    width: min(960px, 100%);
}

.public-card-bio-only .bio-public-card {
    width: 100%;
}

.public-bio {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.public-bio-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

.public-bio-section {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.public-bio-section h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.public-bio-section p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.public-bio-links {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.public-bio-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    background: var(--primary-soft);
    border: 1px solid rgba(23, 79, 63, 0.12);
    border-radius: 16px;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.public-bio-link:hover {
    background: #fff;
    border-color: rgba(23, 79, 63, 0.22);
    box-shadow: 0 10px 24px rgba(23, 79, 63, 0.08);
}

.public-bio-link:active {
    transform: translateY(1px) scale(0.99);
}

.public-bio-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-bio-link em {
    flex: none;
    color: var(--primary);
    font-style: normal;
    opacity: 0.72;
}

.public-bio-contact-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.public-bio-contact-item {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.public-bio-contact-item span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.public-bio-contact-item strong,
.public-bio-contact-item a {
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.public-bio-contact-item a {
    color: var(--primary);
}

@media (min-width: 720px) {
.public-shell-bio {
        width: min(1760px, calc(100% - 32px));
    }

    .public-shell-bio-chat {
        width: min(1880px, calc(100% - 32px));
    }

    .public-card-bio {
        min-height: calc(100svh - 70px);
        max-height: calc(100svh - 64px);
    }

    .public-card-bio-chat {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .public-card-bio-chat .bio-public-shell,
    .public-card-bio-chat .public-chat-bio {
        align-self: stretch;
        min-width: 0;
    }

    .public-card-bio-chat .bio-public-card {
        min-height: 100%;
        height: auto;
    }

    .public-card-bio-chat .public-chat-bio {
        display: grid;
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .public-card-bio-chat .public-chat-bio .messages {
        height: auto;
        min-height: 220px;
        max-height: none;
    }

    .public-shell-bio-only {
        width: min(1040px, calc(100% - 32px));
        place-items: center;
    }

    .public-card-bio-only {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        align-items: center;
        justify-items: center;
    }

    .public-card-bio-only .bio-public-shell {
        width: min(960px, 100%);
    }

    .public-card-bio-only .bio-public-card {
        width: 100%;
    }
}

@media (min-width: 960px) {

    .public-shell-bio-chat {
        width: min(1920px, calc(100% - 40px));
    }

    .public-card-bio-chat {
        grid-template-columns: minmax(0, 1.28fr) minmax(400px, 0.72fr);
        gap: 18px;
    }

    .public-shell-bio-only {
        width: 95vw;
        min-height: calc(100svh - 48px);
        place-items: center;
    }

    .public-card-bio-only {
        height: calc(100svh - 64px);
        min-height: calc(100svh - 64px);
        max-height: calc(100svh - 64px);
        grid-template-columns: minmax(0, 1fr);
        align-content: stretch;
        align-items: stretch;
        justify-items: center;
    }

    .public-card-bio-only .bio-public-shell {
        display: grid;
        width: 93%;
        height: 93%;
        min-height: 0;
        align-self: center;
        justify-self: center;
    }

    .public-card-bio-only .bio-public-card {
        width: 100%;
        height: 100%;
        min-height: 0;
        align-content: center;
    }

    .public-card-bio-chat .public-chat-bio .messages {
        height: clamp(260px, calc(100svh - 330px), 620px);
        min-height: 0;
        max-height: none;
    }
}

@media (min-width: 1280px) {

    .public-shell-bio-chat {
        width: min(2040px, calc(100% - 48px));
    }

    .public-card-bio-chat {
        grid-template-columns: minmax(0, 1.42fr) minmax(420px, 0.58fr);
        gap: 22px;
    }

    .public-card-bio-chat .public-chat-bio .messages {
        height: clamp(300px, calc(100svh - 330px), 680px);
    }
}

@media (min-width: 1600px) {

    .public-shell-bio-chat {
        width: min(2200px, calc(100% - 64px));
    }

    .public-card-bio-chat {
        grid-template-columns: minmax(0, 1.52fr) minmax(440px, 0.48fr);
        gap: 24px;
    }
	
	.public-shell-bio-only {
        width: 95vw;
    }

    .public-card-bio-only .bio-public-shell {
        width: 93%;
    }
}

@media (max-width: 520px) {
.public-shell-bio {
        width: calc(100% - 16px);
        min-height: calc(100svh - 44px);
    }

    .public-card-bio {
        min-height: calc(100svh - 54px);
        max-height: calc(100svh - 54px);
    }

    .public-card-bio-chat,
    .public-card-bio-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-card-bio-only {
        align-items: center;
        justify-items: stretch;
    }

    .public-bio-card {
        gap: 10px;
        padding: 12px;
        border-radius: 20px;
    }

    .public-bio-link {
        min-height: 44px;
        padding: 9px 11px;
        font-size: 13px;
        border-radius: 14px;
    }

    .public-bio-contact-item {
        padding: 9px 11px;
        border-radius: 14px;
    }
}

@media (max-height: 680px) {
.public-card-bio {
        min-height: calc(100svh - 56px);
        max-height: calc(100svh - 56px);
    }

    .public-card-bio-only {
        align-items: center;
    }

    .public-card-bio-chat .public-chat-bio .messages {
        height: clamp(130px, calc(100svh - 300px), 320px);
        min-height: 0;
        max-height: none;
    }
}

.bio-admin,
.bio-public {
    min-width: 0;
    color: var(--text);
}

.bio-admin *,
.bio-public * {
    box-sizing: border-box;
}

.bio-admin [hidden],
.bio-public [hidden] {
    display: none !important;
}

.bio-admin button,
.bio-admin input,
.bio-admin textarea,
.bio-admin select,
.bio-public button,
.bio-public input,
.bio-public textarea {
    font: inherit;
}

.bio-admin button,
.bio-public button {
    cursor: pointer;
}

.bio-admin button:disabled,
.bio-public button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.bio-admin input,
.bio-admin textarea,
.bio-admin select {
    width: 100%;
    min-width: 0;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.bio-admin input,
.bio-admin select {
    height: 44px;
    padding: 0 13px;
}

.bio-admin .bio-switch input {
    height: 28px;
    padding: 0;
}

.bio-admin textarea {
    min-height: 104px;
    padding: 12px 13px;
    line-height: 1.45;
    resize: vertical;
}

.bio-admin input:focus,
.bio-admin textarea:focus,
.bio-admin select:focus {
    background: #fff;
    border-color: rgba(23, 79, 63, 0.35);
    box-shadow: 0 0 0 4px rgba(23, 79, 63, 0.1);
}

.bio-admin label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.bio-admin label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.bio-admin label.bio-switch span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bio-admin label small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.bio-admin-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.bio-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: none;
}

.bio-card-soft {
    background: var(--surface-soft);
}

.bio-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.bio-card-title {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.bio-card-title strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-card-title small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.bio-form {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.bio-form-grid {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.bio-form-row {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.bio-check-grid {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.bio-check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.bio-check-row span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.bio-check-row strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.bio-check-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}

.bio-check-row input[type="checkbox"] {
    flex: none;
    width: 44px;
    height: 26px;
    appearance: none;
    padding: 0;
    background: rgba(31, 24, 17, 0.16);
    border: 1px solid rgba(31, 24, 17, 0.08);
    border-radius: 999px;
    cursor: pointer;
}

.bio-check-row input[type="checkbox"]::before {
    display: block;
    width: 20px;
    height: 20px;
    margin: 2px;
    content: "";
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(31, 24, 17, 0.16);
    transition: transform 0.18s ease;
}

.bio-check-row input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border-color: rgba(23, 79, 63, 0.22);
}

.bio-check-row input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.bio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.bio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: var(--primary-soft);
    border: 1px solid rgba(23, 79, 63, 0.14);
    border-radius: 999px;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.bio-btn:active {
    transform: translateY(1px) scale(0.99);
}

.bio-btn-primary {
    color: #fff;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.24), transparent 26%),
        linear-gradient(135deg, var(--primary), var(--primary-2));
    border-color: rgba(23, 79, 63, 0.22);
    box-shadow: 0 12px 28px rgba(23, 79, 63, 0.18);
}

.bio-btn-primary:hover {
    box-shadow: 0 14px 34px rgba(23, 79, 63, 0.24);
}

.bio-btn-ghost {
    background: rgba(255, 255, 255, 0.64);
    border-color: var(--line);
}

.bio-btn-danger {
    color: var(--danger);
    background: #fff0ec;
    border-color: rgba(163, 58, 46, 0.16);
}

.bio-links-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.bio-link-form {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.bio-link-form.is-disabled {
    opacity: 0.72;
}

.bio-link-row {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.bio-link-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.bio-link-options {
    display: grid;
    grid-template-columns: 112px 76px 76px;
    align-items: end;
    gap: 8px;
    min-width: 0;
}

.bio-link-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.bio-link-active,
.bio-link-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.bio-link-active input[type="checkbox"],
.bio-link-social input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--primary);
}

.bio-link-action-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.bio-preview {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.bio-preview-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    padding: 16px;
    background:
        radial-gradient(circle at 16% 0%, rgba(243, 199, 164, 0.34), transparent 18rem),
        radial-gradient(circle at 92% 14%, rgba(223, 238, 232, 0.86), transparent 20rem),
        rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 26px;
    box-shadow: var(--shadow-soft);
}

.bio-preview-cover {
    position: absolute;
    inset: 0 0 auto;
    height: 86px;
    background:
        radial-gradient(circle at 16% 0%, rgba(217, 164, 65, 0.26), transparent 16rem),
        linear-gradient(135deg, rgba(23, 79, 63, 0.14), rgba(223, 238, 232, 0.68));
    pointer-events: none;
}

.bio-preview-main {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding-top: 20px;
    text-align: center;
}

.bio-preview-avatar {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 30px;
    font-weight: 950;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.28), transparent 28%),
        linear-gradient(135deg, var(--primary), var(--gold));
    border: 3px solid rgba(255, 255, 255, 0.86);
    border-radius: 26px;
    box-shadow: 0 18px 42px rgba(23, 79, 63, 0.18);
}

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

.bio-preview-main h3 {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.bio-preview-main p {
    max-width: 420px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}

.bio-preview-links {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.bio-preview-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 46px;
    padding: 0 13px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(31, 24, 17, 0.09);
    border-radius: 17px;
}

.bio-preview-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-preview-link em {
    flex: none;
    color: var(--muted);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

.bio-preview-icon-templates {
    display: none !important;
}

.bio-admin-side .bio-preview-card {
    width: 100%;
    min-width: 0;
    box-shadow: var(--shadow-soft);
}

.bio-preview-card .bio-public-cover {
    height: 108px;
}

.bio-preview-card .bio-public-identity {
    padding-top: 28px;
}

.bio-preview-card .bio-public-avatar {
    width: 74px;
    height: 74px;
    font-size: 34px;
    border-radius: 28px;
}

.bio-preview-card .bio-public-name {
    font-size: clamp(24px, 2.4vw, 34px);
}

.bio-preview-card .bio-public-text {
    max-width: 100%;
    font-size: 13px;
}

.bio-preview-card .bio-public-links {
    width: 100%;
}

.bio-preview-card .bio-public-link {
    min-height: 48px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 17px;
}

.bio-preview-card .bio-public-contact {
    width: 100%;
}

.bio-preview-card .bio-public-contact-link {
    width: 100%;
}

/* Public Bio */

.bio-public-shell {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 14px;
}

.bio-public-shell.bio-public-shell-centered {
    max-width: 760px;
    margin-inline: auto;
}

.public-card-bio-only .bio-public-shell.bio-public-shell-centered {
    max-width: none;
}

.bio-public-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
    background:
        radial-gradient(circle at 15% 0%, rgba(243, 199, 164, 0.38), transparent 22rem),
        radial-gradient(circle at 92% 12%, rgba(223, 238, 232, 0.9), transparent 22rem),
        rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 34px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.bio-public-cover {
    position: absolute;
    inset: 0 0 auto;
    height: 118px;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgba(217, 164, 65, 0.28), transparent 18rem),
        linear-gradient(135deg, rgba(23, 79, 63, 0.14), rgba(223, 238, 232, 0.68));
}

.bio-public-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.86;
}

.bio-public-identity {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 9px;
    min-width: 0;
    padding-top: 32px;
    text-align: center;
}

.bio-public-avatar {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 38px;
    font-weight: 950;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.28), transparent 28%),
        linear-gradient(135deg, var(--primary), var(--gold));
    border: 4px solid rgba(255, 255, 255, 0.88);
    border-radius: 30px;
    box-shadow: 0 20px 48px rgba(23, 79, 63, 0.22);
}

.bio-public-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-public-name {
    margin: 0;
    color: var(--text);
    font-size: clamp(30px, 8vw, 48px);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.bio-public-headline {
    max-width: 560px;
    margin: 0;
    color: var(--primary);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.35;
}

.bio-public-text {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
    white-space: pre-wrap;
}

.bio-public-links {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 9px;
    min-width: 0;
}

.bio-public-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 15px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(31, 24, 17, 0.1);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(52, 39, 21, 0.055);
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.bio-public-link:hover {
    background: #fff;
    border-color: rgba(23, 79, 63, 0.22);
    box-shadow: 0 12px 30px rgba(23, 79, 63, 0.08);
}

.bio-public-link:active {
    transform: translateY(1px) scale(0.99);
}

.bio-public-link-main {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.bio-public-link-icon {
    display: grid;
    flex: none;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(135deg, var(--primary), var(--primary-2));
    border-radius: 12px;
}

.bio-public-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-public-link-arrow {
    flex: none;
    color: var(--muted);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.bio-public-contact {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.bio-public-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.24), transparent 26%),
        linear-gradient(135deg, var(--primary), var(--primary-2));
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(23, 79, 63, 0.18);
}

.bio-public-chat-wrap {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.bio-layout-chat-center {
    display: grid;
    gap: 14px;
}

.bio-layout-links-first {
    display: grid;
    gap: 14px;
}

.bio-layout-links-first .bio-public-links {
    order: 1;
}

.bio-layout-links-first .bio-public-chat-wrap {
    order: 2;
}

/* Shared states */

.bio-admin .form-result,
.bio-public .form-result {
    display: grid;
    gap: 4px;
    max-height: 132px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    background: var(--primary-soft);
    border: 1px solid rgba(23, 79, 63, 0.12);
    border-radius: 16px;
    overflow-wrap: anywhere;
    word-break: break-word;
    scrollbar-width: thin;
}

.bio-admin .form-result[hidden],
.bio-public .form-result[hidden] {
    display: none;
}

.bio-admin .form-result.error,
.bio-public .form-result.error {
    color: var(--danger);
    background: #fff0ec;
    border-color: rgba(163, 58, 46, 0.16);
}

.bio-admin .empty-state,
.bio-public .empty-state {
    display: grid;
    min-height: 120px;
    place-items: center;
    padding: 18px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.bio-link-url-field {
    min-width: 0;
}

.bio-link-url-control {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.bio-link-url-prefix {
    flex: 0 1 350px;
    max-width: 66%;
    min-width: 0;
    padding: 0 10px 0 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--line);
}

.bio-link-url-control input {
    flex: 1 1 auto;
    min-width: 88px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.bio-link-url-control input:focus {
    box-shadow: none;
}

.bio-link-options select[name="icon"] {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    padding-right: 8px;
    padding-left: 10px;
    font-size: 12px;
}

@media (max-width: 720px) {
    .bio-link-url-prefix {
        flex-basis: 300px;
        max-width: 66%;
        padding-inline: 10px;
        font-size: 12px;
    }

    .bio-link-url-control input {
        min-width: 78px;
    }

    .bio-link-options select[name="icon"] {
        width: 104px;
        min-width: 104px;
        max-width: 104px;
        font-size: 12px;
    }
}



@media (min-width: 720px) {

    .bio-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bio-link-row {
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: end;
    }

    .bio-link-main {
        grid-template-columns: minmax(130px, 0.32fr) minmax(360px, 1fr);
        align-items: end;
    }

    .bio-public-card {
        padding: 24px;
    }

    .bio-public-links {
        width: min(560px, 100%);
        justify-self: center;
    }

    .bio-public-contact {
        width: min(560px, 100%);
        justify-self: center;
    }
}

@media (min-width: 960px) {
    .bio-admin-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        align-items: start;
    }

    .bio-admin-main {
        display: grid;
        gap: 12px;
        min-width: 0;
    }

    .bio-admin-side {
        position: sticky;
        top: 14px;
        display: grid;
        gap: 12px;
        min-width: 0;
    }

    .bio-public-card.bio-public-wide {
        grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
        align-items: center;
    }

    .bio-public-card.bio-public-wide .bio-public-identity {
        text-align: left;
        justify-items: start;
    }

    .bio-public-card.bio-public-wide .bio-public-links,
    .bio-public-card.bio-public-wide .bio-public-contact {
        width: 100%;
        justify-self: stretch;
    }

    .bio-public-card.bio-public-centered {
        max-width: 760px;
        margin-inline: auto;
    }

    .public-card-bio-only .bio-public-card.bio-public-centered {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin-inline: 0;
        align-content: center;
    }

    .bio-public-card.bio-public-centered .bio-public-identity {
        text-align: center;
        justify-items: center;
    }

    .public-card-bio-only .bio-public-identity {
        gap: 14px;
    }

    .public-card-bio-only .bio-public-cover {
        height: clamp(160px, 22svh, 260px);
    }

    .public-card-bio-only .bio-public-avatar {
        width: clamp(92px, 8vw, 132px);
        height: clamp(92px, 8vw, 132px);
        font-size: clamp(42px, 4vw, 62px);
        border-radius: clamp(32px, 3vw, 44px);
    }

    .public-card-bio-only .bio-public-name {
        font-size: clamp(42px, 5vw, 76px);
    }

    .public-card-bio-only .bio-public-text {
        width: min(860px, 100%);
        max-width: 860px;
        font-size: clamp(15px, 1.15vw, 19px);
        line-height: 1.55;
    }

    .public-card-bio-only .bio-public-links,
    .public-card-bio-only .bio-public-contact {
        width: min(860px, 100%);
        max-width: 860px;
        justify-self: center;
    }

    .public-card-bio-only .bio-public-link {
        min-height: clamp(58px, 6svh, 74px);
        padding-inline: clamp(18px, 2vw, 28px);
        font-size: clamp(15px, 1.05vw, 18px);
        border-radius: 22px;
    }

    .public-card-bio-only .bio-public-contact-link {
        min-height: clamp(54px, 5.4svh, 68px);
        font-size: clamp(14px, 1vw, 17px);
    }
}

@media (max-width: 899px) {
    .bio-admin-shell {
        padding-bottom: calc(12px + var(--safe-bottom));
    }

    .bio-card {
        border-radius: 22px;
    }
}

@media (max-width: 520px) {

    .bio-card {
        gap: 12px;
        padding: 14px;
        border-radius: 22px;
    }

    .bio-card-head {
        gap: 10px;
    }

    .bio-card-title strong {
        font-size: 15px;
    }

    .bio-card-title small {
        font-size: 11px;
    }

    .bio-link-form {
        padding: 10px;
        border-radius: 18px;
    }

    .bio-link-url-control {
        display: grid;
        min-height: 0;
        overflow: hidden;
    }

    .bio-link-url-prefix {
        display: block;
        width: 100%;
        max-width: none;
        padding: 10px 12px 8px;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .bio-link-url-control input {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 12px;
    }

    .bio-link-options {
        grid-template-columns: minmax(0, 1fr) 76px 76px;
    }

    .bio-link-options select[name="icon"] {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .bio-link-actions {
        align-items: stretch;
    }

    .bio-link-action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .bio-link-action-buttons .bio-btn {
        flex: 1;
    }

    .bio-actions {
        justify-content: stretch;
    }

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

    .bio-public-card {
        gap: 12px;
        padding: 14px;
        border-radius: 26px;
    }

    .bio-public-cover {
        height: 104px;
    }

    .bio-public-identity {
        padding-top: 24px;
    }

    .bio-public-avatar {
        width: 72px;
        height: 72px;
        font-size: 32px;
        border-radius: 26px;
    }

    .bio-public-headline {
        font-size: 14px;
    }

    .bio-public-text {
        font-size: 13px;
    }

    .bio-public-link {
        min-height: 50px;
        padding: 0 13px;
        font-size: 13px;
        border-radius: 17px;
    }
}

@media (max-width: 380px) {
    .bio-admin input,
    .bio-admin select {
        height: 42px;
        padding: 0 11px;
        font-size: 13px;
    }

    .bio-admin textarea {
        padding: 11px;
        font-size: 13px;
    }

    .bio-btn {
        min-height: 40px;
        padding: 0 13px;
        font-size: 12px;
    }

    .bio-public-avatar {
        width: 66px;
        height: 66px;
        font-size: 30px;
        border-radius: 24px;
    }
}

@media (max-height: 680px) {
    .bio-admin input,
    .bio-admin select {
        height: 40px;
    }

    .bio-btn {
        min-height: 40px;
    }

    .bio-public-card {
        gap: 10px;
    }

    .bio-public-avatar {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bio-preview-cover,
    .bio-public-cover {
        animation: bioSoftPulse 7s ease-in-out infinite;
    }

    @keyframes bioSoftPulse {
        0%,
        100% {
            opacity: 0.86;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.03);
        }
    }
}

/* Dashboard embedded Bio consistency patch */

.bio-admin .bio-form,
.bio-admin .bio-links-list {
    gap: 10px;
}

.bio-admin .bio-link-form {
    background: var(--surface-soft);
    border-radius: 18px;
    box-shadow: none;
}

.bio-admin .bio-check-row {
    background: rgba(255, 255, 255, 0.62);
    border-radius: 16px;
}

.bio-admin .bio-link-url-control {
    background: rgba(255, 255, 255, 0.72);
    border-radius: 14px;
}

@media (min-width: 720px) and (max-width: 899px) {
    .bio-admin .bio-link-row {
        grid-template-columns: 1fr;
    }

    .bio-admin .bio-link-main {
        grid-template-columns: 1fr;
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(0, 1fr) 76px 76px;
    }

    .bio-admin .bio-link-actions {
        align-items: stretch;
    }

    .bio-admin .bio-link-action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .bio-admin .bio-link-action-buttons .bio-btn {
        flex: 1;
    }
}
/* Public Bio production section */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.public-shell-bio,
.public-shell-bio-only,
.public-shell-bio-chat {
    --bio-page-inset: 0px;
    --bio-page-gap: clamp(8px, 1vw, 16px);
    --bio-stage-max: 1880px;
    --bio-stage-chat-max: 2040px;
    --bio-card-pad: clamp(4px, 1vw, 14px);
    --bio-card-radius: clamp(20px, 3vw, 34px);
    --bio-cover-bleed: var(--bio-card-pad);
    --bio-cover-top-offset: calc(0px - var(--bio-card-pad));
    --bio-cover-height: clamp(168px, 46vw, 250px);
    --bio-cover-radius: clamp(18px, 4vw, 30px);

    --bio-link-max-width: 820px;
    --bio-link-side-inset: clamp(14px, 3.6vw, 24px);
    --bio-link-gap: clamp(12px, 2.8vw, 16px);
    --bio-link-height: clamp(76px, 13vw, 88px);
    --bio-link-radius: 22px;
    --bio-link-pad-x: clamp(14px, 3.6vw, 20px);
    --bio-link-icon-size: clamp(46px, 10vw, 54px);
    --bio-link-icon-radius: 17px;
    --bio-link-icon-left: clamp(14px, 3.5vw, 20px);
    --bio-link-action-right: clamp(14px, 3.5vw, 20px);
    --bio-link-action-size: clamp(24px, 5.6vw, 30px);
    --bio-link-label-size: clamp(17px, 4.4vw, 22px);
    --bio-link-label-weight: 680;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto !important;
    margin: 0 !important;
    padding:
        max(var(--bio-page-inset), env(safe-area-inset-top, 0px))
        max(var(--bio-page-inset), env(safe-area-inset-right, 0px))
        max(var(--bio-page-inset), env(safe-area-inset-bottom, 0px))
        max(var(--bio-page-inset), env(safe-area-inset-left, 0px)) !important;
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior-x: none;
}

.public-card-bio,
.public-card-bio-only,
.public-card-bio-chat {
    display: grid !important;
    width: min(100%, var(--bio-stage-max)) !important;
    max-width: 100% !important;
    min-height: calc(100svh - var(--bio-page-inset) - var(--bio-page-inset)) !important;
    min-height: calc(100dvh - var(--bio-page-inset) - var(--bio-page-inset)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: var(--bio-page-gap) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.public-card-bio-chat {
    width: min(100%, var(--bio-stage-chat-max)) !important;
}

.public-card-bio .public-orb,
.public-card-bio-only .public-orb,
.public-card-bio-chat .public-orb {
    display: none !important;
}

.public-card-bio .bio-public-shell,
.public-card-bio-only .bio-public-shell,
.public-card-bio-chat .bio-public-shell,
.public-card-bio-only .bio-public-shell.bio-public-shell-centered {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: calc(100svh - var(--bio-page-inset) - var(--bio-page-inset)) !important;
    min-height: calc(100dvh - var(--bio-page-inset) - var(--bio-page-inset)) !important;
    height: auto !important;
    margin: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow: visible !important;
}

.public-card-bio .bio-public-card,
.public-card-bio-only .bio-public-card,
.public-card-bio-chat .bio-public-card,
.public-card-bio .bio-public-card.bio-public-wide,
.public-card-bio .bio-public-card.bio-public-centered,
.public-card-bio-only .bio-public-card.bio-public-centered {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: calc(100svh - var(--bio-page-inset) - var(--bio-page-inset)) !important;
    min-height: calc(100dvh - var(--bio-page-inset) - var(--bio-page-inset)) !important;
    height: auto !important;
    margin: 0 !important;
    padding:
        var(--bio-card-pad)
        var(--bio-card-pad)
        calc(var(--bio-card-pad) + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: clamp(10px, 1.25vw, 17px) !important;
    overflow: hidden !important;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.46)),
        radial-gradient(circle at 16% 14%, rgba(243, 199, 164, 0.17), transparent 21rem),
        radial-gradient(circle at 92% 8%, rgba(223, 238, 232, 0.48), transparent 22rem) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: var(--bio-card-radius) !important;
    box-shadow: 0 10px 30px rgba(52, 39, 21, 0.065) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.public-card-bio .bio-public-cover,
.public-card-bio-only .bio-public-cover,
.public-card-bio-chat .bio-public-cover {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: calc(100% + var(--bio-cover-bleed) + var(--bio-cover-bleed)) !important;
    max-width: none !important;
    height: var(--bio-cover-height) !important;
    min-height: var(--bio-cover-height) !important;
    margin-top: var(--bio-cover-top-offset) !important;
    margin-right: calc(0px - var(--bio-cover-bleed)) !important;
    margin-bottom: 0 !important;
    margin-left: calc(0px - var(--bio-cover-bleed)) !important;
    overflow: hidden !important;
    border-radius: var(--bio-cover-radius) !important;
    animation: none !important;
    transform: none !important;
    pointer-events: none;
    will-change: auto;
    backface-visibility: hidden;
    contain: paint;
}

.public-card-bio .bio-public-cover img,
.public-card-bio-only .bio-public-cover img,
.public-card-bio-chat .bio-public-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.97 !important;
    animation: none !important;
    transform: none !important;
    will-change: auto;
    backface-visibility: hidden;
}

.public-card-bio .bio-public-top-actions {
    position: absolute !important;
    top: clamp(7px, 1.3vw, 14px) !important;
    right: clamp(12px, 2vw, 24px) !important;
    left: clamp(12px, 2vw, 24px) !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    pointer-events: none !important;
}

.public-card-bio .bio-public-action-button {
    display: inline-grid !important;
    width: clamp(42px, 4.2vw, 52px) !important;
    height: clamp(42px, 4.2vw, 52px) !important;
    place-items: center !important;
    padding: 0 !important;
    color: var(--primary) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform 0.18s ease,
        color 0.18s ease !important;
}

.public-card-bio .bio-public-action-button:hover {
    color: var(--primary-2) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-card-bio .bio-public-action-button:active {
    transform: translateY(1px) scale(0.98) !important;
}

.public-card-bio .bio-public-action-button:focus-visible,
.bio-claim-close:focus-visible,
.bio-claim-primary:focus-visible,
.bio-claim-secondary:focus-visible,
.bio-public-join-pill:focus-visible,
.bio-public-join-text:focus-visible {
    outline: 3px solid rgba(23, 79, 63, 0.28) !important;
    outline-offset: 3px !important;
}

.public-card-bio .bio-public-claim-brand-mark {
    display: block !important;
    width: clamp(28px, 3vw, 36px) !important;
    height: clamp(28px, 3vw, 36px) !important;
    color: currentColor !important;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.84))
        drop-shadow(0 2px 7px rgba(0, 0, 0, 0.2)) !important;
}

.public-card-bio .bio-public-action-button .bio-public-claim-brand-mark path:first-child,
.bio-claim-brand .bio-public-claim-brand-mark path:first-child {
    stroke: rgba(255, 255, 255, 0.92) !important;
    stroke-width: 3 !important;
    stroke-linejoin: round !important;
    paint-order: stroke fill !important;
}

.public-card-bio .bio-public-claim-brand-fallback {
    display: grid !important;
    width: clamp(28px, 3vw, 36px) !important;
    height: clamp(28px, 3vw, 36px) !important;
    place-items: center !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(23, 79, 63, 0.18) !important;
}

.public-card-bio .bio-public-identity,
.public-card-bio-only .bio-public-identity,
.public-card-bio-chat .bio-public-identity,
.public-card-bio .bio-public-card.bio-public-wide .bio-public-identity {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    justify-items: center !important;
    gap: clamp(6px, 1.1vw, 11px) !important;
    text-align: center !important;
}

.public-card-bio .bio-public-avatar,
.public-card-bio-only .bio-public-avatar,
.public-card-bio-chat .bio-public-avatar {
    width: clamp(78px, 22vw, 104px) !important;
    height: clamp(78px, 22vw, 104px) !important;
    margin-top: calc(0px - (clamp(78px, 22vw, 104px) / 2)) !important;
    overflow: hidden !important;
    font-size: clamp(32px, 9vw, 44px) !important;
    border-width: 4px !important;
    border-radius: clamp(26px, 7vw, 34px) !important;
    box-shadow: 0 10px 28px rgba(23, 79, 63, 0.16) !important;
}

.public-card-bio .bio-public-name,
.public-card-bio-only .bio-public-name,
.public-card-bio-chat .bio-public-name {
    width: min(960px, 100%) !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--text) !important;
    font-size: clamp(34px, 10.2vw, 52px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.07em !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.public-card-bio .bio-public-headline,
.public-card-bio-only .bio-public-headline,
.public-card-bio-chat .bio-public-headline,
.public-card-bio .bio-public-text,
.public-card-bio-only .bio-public-text,
.public-card-bio-chat .bio-public-text {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.public-card-bio .bio-public-text,
.public-card-bio-only .bio-public-text,
.public-card-bio-chat .bio-public-text {
    font-size: clamp(13px, 3.55vw, 16px) !important;
    line-height: 1.4 !important;
}

.public-card-bio .bio-public-links,
.public-card-bio-only .bio-public-links,
.public-card-bio-chat .bio-public-links,
.public-card-bio .bio-public-contact,
.public-card-bio-only .bio-public-contact,
.public-card-bio-chat .bio-public-contact {
    position: relative !important;
    z-index: 2 !important;
    width: min(var(--bio-link-max-width), calc(100% - (var(--bio-link-side-inset) * 2))) !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: start !important;
}

.public-card-bio .bio-public-links,
.public-card-bio-only .bio-public-links,
.public-card-bio-chat .bio-public-links {
    gap: var(--bio-link-gap) !important;
    margin-top: clamp(10px, 1.6vw, 18px) !important;
}

.public-card-bio .bio-public-link,
.public-card-bio-only .bio-public-link,
.public-card-bio-chat .bio-public-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--bio-link-height) !important;
    padding: 0 var(--bio-link-pad-x) !important;
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(31, 24, 17, 0.1) !important;
    border-radius: var(--bio-link-radius) !important;
    box-shadow: 0 7px 20px rgba(52, 39, 21, 0.052) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease !important;
}

.public-card-bio .bio-public-link:hover,
.public-card-bio-only .bio-public-link:hover,
.public-card-bio-chat .bio-public-link:hover {
    background: #ffffff !important;
    border-color: rgba(31, 24, 17, 0.13) !important;
    box-shadow: 0 9px 24px rgba(52, 39, 21, 0.07) !important;
}

.public-card-bio .bio-public-link:active,
.public-card-bio-only .bio-public-link:active,
.public-card-bio-chat .bio-public-link:active {
    transform: translateY(1px) scale(0.992) !important;
}

.public-card-bio .bio-public-link-main,
.public-card-bio-only .bio-public-link-main,
.public-card-bio-chat .bio-public-link-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: calc(var(--bio-link-action-size) + 20px) !important;
    padding-left: calc(var(--bio-link-icon-size) + 20px) !important;
    gap: 0 !important;
    text-align: center !important;
}

.public-card-bio .bio-public-link-icon,
.public-card-bio-only .bio-public-link-icon,
.public-card-bio-chat .bio-public-link-icon {
    position: absolute !important;
    top: 50% !important;
    left: var(--bio-link-icon-left) !important;
    display: grid !important;
    width: var(--bio-link-icon-size) !important;
    height: var(--bio-link-icon-size) !important;
    min-width: var(--bio-link-icon-size) !important;
    min-height: var(--bio-link-icon-size) !important;
    place-items: center !important;
    margin: 0 !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.2), transparent 28%),
        linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    border-radius: var(--bio-link-icon-radius) !important;
    transform: translateY(-50%) !important;
}

.public-card-bio .bio-public-link-icon svg,
.public-card-bio-only .bio-public-link-icon svg,
.public-card-bio-chat .bio-public-link-icon svg {
    width: clamp(17px, 4.4vw, 22px) !important;
    height: clamp(17px, 4.4vw, 22px) !important;
}

.public-card-bio .bio-public-link-label,
.public-card-bio-only .bio-public-link-label,
.public-card-bio-chat .bio-public-link-label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--primary) !important;
    font-size: var(--bio-link-label-size) !important;
    font-weight: var(--bio-link-label-weight) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.032em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.public-card-bio .bio-public-link-arrow,
.public-card-bio-only .bio-public-link-arrow,
.public-card-bio-chat .bio-public-link-arrow {
    position: absolute !important;
    top: 50% !important;
    right: var(--bio-link-action-right) !important;
    display: grid !important;
    width: var(--bio-link-action-size) !important;
    height: var(--bio-link-action-size) !important;
    place-items: center !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
}

.public-card-bio .bio-public-link-arrow::before,
.public-card-bio-only .bio-public-link-arrow::before,
.public-card-bio-chat .bio-public-link-arrow::before {
    content: "⋮" !important;
    color: rgba(23, 79, 63, 0.45) !important;
    font-size: clamp(21px, 5vw, 27px) !important;
    font-weight: 700 !important;
    line-height: 0.9 !important;
    transform: translateY(-1px) !important;
}

.public-card-bio .bio-public-contact-link,
.public-card-bio-only .bio-public-contact-link,
.public-card-bio-chat .bio-public-contact-link {
    min-height: clamp(48px, 11vw, 60px) !important;
    font-weight: 720 !important;
    box-shadow: 0 8px 22px rgba(23, 79, 63, 0.14) !important;
}

.public-card-bio-chat .public-chat-bio {
    align-self: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.public-card-bio-chat .public-chat-bio .messages {
    min-height: 180px !important;
    max-height: none !important;
}

.bio-public-join-cta {
    display: none;
}

@media (hover: none), (pointer: coarse) {
    .public-card-bio .bio-public-link:hover,
    .public-card-bio-only .bio-public-link:hover,
    .public-card-bio-chat .bio-public-link:hover {
        background: rgba(255, 255, 255, 0.96) !important;
        border-color: rgba(31, 24, 17, 0.1) !important;
        box-shadow: 0 7px 20px rgba(52, 39, 21, 0.052) !important;
    }
}

@media (min-width: 721px) {
    .bio-public-join-cta {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 2 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: clamp(26px, 4vw, 52px) auto clamp(18px, 3vw, 34px) !important;
        padding: 0 !important;
        align-items: center !important;
        justify-items: center !important;
        color: var(--text) !important;
        pointer-events: none !important;
        overflow: visible !important;
        isolation: auto !important;
        transform: none !important;
    }

    .bio-public-join-cta::before,
    .bio-public-join-cta::after {
        display: none !important;
        content: none !important;
    }

    .bio-public-join-cta-inner {
        display: grid !important;
        width: min(100%, 560px) !important;
        min-width: 0 !important;
        justify-items: center !important;
        gap: 0 !important;
        pointer-events: none !important;
    }

    .bio-public-join-pill {
        display: none !important;
    }

    .bio-public-join-text {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: min(100%, 520px) !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 22px !important;
        color: var(--primary) !important;
        font-size: 14px !important;
        font-weight: 760 !important;
        line-height: 1 !important;
        letter-spacing: -0.025em !important;
        text-align: center !important;
        text-wrap: balance !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(31, 24, 17, 0.10) !important;
        border-radius: 999px !important;
        box-shadow:
            0 14px 34px rgba(52, 39, 21, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
        text-shadow: none !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        transition:
            transform 0.16s ease,
            background 0.16s ease,
            box-shadow 0.16s ease !important;
    }

    .bio-public-join-text:hover {
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow:
            0 16px 40px rgba(52, 39, 21, 0.15),
            0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
    }

    .bio-public-join-text:active {
        transform: translateY(1px) scale(0.99) !important;
    }
}

@media (max-width: 720px) {
    .public-card-bio .bio-public-card,
    .public-card-bio-only .bio-public-card,
    .public-card-bio-chat .bio-public-card,
    .public-card-bio .bio-public-card.bio-public-wide,
    .public-card-bio .bio-public-card.bio-public-centered,
    .public-card-bio-only .bio-public-card.bio-public-centered {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bio-public-join-cta {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 120 !important;
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: min(20svh, 165px) !important;
        align-items: end !important;
        justify-items: center !important;
        padding:
            44px
            max(16px, env(safe-area-inset-right, 0px))
            calc(13px + env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px)) !important;
        color: #ffffff !important;
        pointer-events: none !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    .bio-public-join-cta::before {
        position: absolute !important;
        inset: 0 !important;
        z-index: -2 !important;
        content: "" !important;
        background:
            linear-gradient(
                180deg,
                rgba(7, 15, 18, 0) 0%,
                rgba(7, 15, 18, 0.08) 28%,
                rgba(7, 15, 18, 0.42) 68%,
                rgba(7, 15, 18, 0.76) 100%
            ) !important;
        pointer-events: none !important;
    }

    .bio-public-join-cta::after {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: -1 !important;
        height: 40% !important;
        content: "" !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
            linear-gradient(180deg, rgba(7, 15, 18, 0), rgba(7, 15, 18, 0.82)) !important;
        pointer-events: none !important;
    }

    .bio-public-join-cta-inner {
        display: grid !important;
        width: min(100%, 500px) !important;
        min-width: 0 !important;
        justify-items: center !important;
        gap: 8px !important;
        pointer-events: none !important;
    }

    .bio-public-join-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 0 20px !important;
        color: #171411 !important;
        font-size: clamp(15px, 4.1vw, 19px) !important;
        font-weight: 540 !important;
        line-height: 1 !important;
        letter-spacing: -0.03em !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.92) !important;
        border-radius: 999px !important;
        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.24),
            0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        animation: bioJoinPillFloat 2.35s ease-in-out infinite !important;
        will-change: transform !important;
    }

    .bio-public-join-pill span:first-child {
        display: block !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .bio-public-join-pill span:last-child {
        display: inline-grid !important;
        width: 19px !important;
        height: 19px !important;
        place-items: center !important;
        flex: none !important;
        color: rgba(23, 20, 17, 0.76) !important;
        font-size: 21px !important;
        font-weight: 420 !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    .bio-public-join-pill:active {
        transform: translateY(1px) scale(0.985) !important;
        animation-play-state: paused !important;
    }

    .bio-public-join-text {
        display: block !important;
        width: min(100%, 500px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 4px !important;
        color: #ffffff !important;
        font-size: clamp(13px, 3.55vw, 17px) !important;
        font-weight: 560 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.024em !important;
        text-align: center !important;
        text-wrap: balance !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    .bio-public-join-text:active {
        transform: translateY(1px) !important;
    }

    @keyframes bioJoinPillFloat {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-4px);
        }
    }
}

@media (min-width: 720px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-page-inset: 2px;
        --bio-card-pad: clamp(8px, 1vw, 16px);
        --bio-cover-height: clamp(190px, 24vw, 310px);
        --bio-link-max-width: 760px;
        --bio-link-side-inset: clamp(20px, 4vw, 42px);
        --bio-link-gap: clamp(12px, 1.4vw, 16px);
        --bio-link-height: clamp(62px, 6vw, 76px);
        --bio-link-radius: 20px;
        --bio-link-pad-x: clamp(16px, 2vw, 22px);
        --bio-link-icon-size: clamp(40px, 4vw, 52px);
        --bio-link-icon-radius: 15px;
        --bio-link-icon-left: clamp(16px, 2vw, 22px);
        --bio-link-action-right: clamp(16px, 2vw, 22px);
        --bio-link-action-size: 28px;
        --bio-link-label-size: clamp(16px, 1.45vw, 21px);
        --bio-link-label-weight: 680;
    }

    .public-card-bio .bio-public-avatar,
    .public-card-bio-only .bio-public-avatar,
    .public-card-bio-chat .bio-public-avatar {
        width: clamp(92px, 8vw, 128px) !important;
        height: clamp(92px, 8vw, 128px) !important;
        margin-top: calc(0px - (clamp(92px, 8vw, 128px) / 2)) !important;
    }

    .public-card-bio .bio-public-name,
    .public-card-bio-only .bio-public-name,
    .public-card-bio-chat .bio-public-name {
        font-size: clamp(44px, 5.2vw, 82px) !important;
    }
}

@media (min-width: 960px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-page-inset: 4px;
        --bio-card-pad: clamp(10px, 1vw, 18px);
        --bio-cover-height: clamp(230px, 19vw, 360px);
        --bio-link-max-width: 780px;
        --bio-link-side-inset: clamp(28px, 4vw, 56px);
        --bio-link-height: clamp(62px, 4.8vw, 74px);
        --bio-link-icon-size: clamp(40px, 3.4vw, 50px);
        --bio-link-label-size: clamp(16px, 1.2vw, 20px);
    }

    .public-card-bio,
    .public-card-bio-only {
        width: min(100%, var(--bio-stage-max)) !important;
    }

    .public-card-bio-chat {
        width: min(100%, var(--bio-stage-chat-max)) !important;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr) !important;
    }

    .public-card-bio-chat .public-chat-bio {
        display: grid !important;
        height: auto !important;
        min-height: 100% !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
    }

    .public-card-bio-chat .public-chat-bio .messages {
        height: clamp(260px, calc(100svh - 330px), 680px) !important;
        min-height: 0 !important;
    }
}

@media (min-width: 1280px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-cover-height: clamp(250px, 17vw, 390px);
    }

    .public-card-bio-chat {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 0.38fr) !important;
    }
}

@media (max-width: 520px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-page-inset: 0px;
        --bio-card-pad: 5px;
        --bio-cover-height: clamp(166px, 46vw, 240px);
        --bio-link-max-width: 100%;
        --bio-link-side-inset: clamp(10px, 3.2vw, 16px);
        --bio-link-gap: 11px;
        --bio-link-height: clamp(68px, 13.4vw, 78px);
        --bio-link-radius: 20px;
        --bio-link-pad-x: 13px;
        --bio-link-icon-size: clamp(42px, 10.8vw, 50px);
        --bio-link-icon-radius: 16px;
        --bio-link-icon-left: clamp(13px, 3.4vw, 17px);
        --bio-link-action-right: clamp(13px, 3.4vw, 17px);
        --bio-link-action-size: 26px;
        --bio-link-label-size: clamp(16px, 4.25vw, 20px);
        --bio-link-label-weight: 680;
    }

    .public-card-bio .bio-public-card,
    .public-card-bio-only .bio-public-card,
    .public-card-bio-chat .bio-public-card {
        border-radius: 21px !important;
    }

    .public-card-bio .bio-public-cover,
    .public-card-bio-only .bio-public-cover,
    .public-card-bio-chat .bio-public-cover {
        border-radius: 18px !important;
    }

    .public-card-bio .bio-public-top-actions {
        top: 7px !important;
        right: 13px !important;
        left: 13px !important;
    }

    .public-card-bio .bio-public-links,
    .public-card-bio-only .bio-public-links,
    .public-card-bio-chat .bio-public-links,
    .public-card-bio .bio-public-contact,
    .public-card-bio-only .bio-public-contact,
    .public-card-bio-chat .bio-public-contact {
        width: 100% !important;
    }

    .public-card-bio .bio-public-link-main,
    .public-card-bio-only .bio-public-link-main,
    .public-card-bio-chat .bio-public-link-main {
        padding-right: calc(var(--bio-link-action-size) + 16px) !important;
        padding-left: calc(var(--bio-link-icon-size) + 16px) !important;
    }
}

@media (max-width: 420px) {
    .bio-public-join-cta {
        min-height: min(21svh, 160px) !important;
        padding-top: 40px !important;
        padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
        padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    }

    .bio-public-join-pill {
        min-height: 42px !important;
        max-width: calc(100vw - 44px) !important;
        padding: 0 18px !important;
    }

    .bio-public-join-text {
        max-width: calc(100vw - 32px) !important;
    }
}

@media (max-width: 380px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-card-pad: 4px;
        --bio-cover-height: clamp(154px, 44vw, 222px);
        --bio-link-side-inset: 9px;
        --bio-link-gap: 10px;
        --bio-link-height: 66px;
        --bio-link-icon-size: 40px;
        --bio-link-icon-radius: 15px;
        --bio-link-icon-left: 12px;
        --bio-link-action-right: 12px;
        --bio-link-label-size: 16px;
    }

    .public-card-bio .bio-public-top-actions {
        top: 7px !important;
        right: 12px !important;
        left: 12px !important;
    }

    .public-card-bio .bio-public-link-main,
    .public-card-bio-only .bio-public-link-main,
    .public-card-bio-chat .bio-public-link-main {
        padding-right: calc(var(--bio-link-action-size) + 14px) !important;
        padding-left: calc(var(--bio-link-icon-size) + 14px) !important;
    }
}

@media (max-height: 680px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-cover-height: clamp(134px, 23svh, 196px);
    }

    .public-card-bio .bio-public-avatar,
    .public-card-bio-only .bio-public-avatar,
    .public-card-bio-chat .bio-public-avatar {
        width: clamp(70px, 13svh, 94px) !important;
        height: clamp(70px, 13svh, 94px) !important;
        margin-top: calc(0px - (clamp(70px, 13svh, 94px) / 2)) !important;
    }

    .public-card-bio .bio-public-name,
    .public-card-bio-only .bio-public-name,
    .public-card-bio-chat .bio-public-name {
        font-size: clamp(32px, 7svh, 54px) !important;
    }
}

@media (max-height: 680px) and (max-width: 720px) {
    .public-shell-bio,
    .public-shell-bio-only,
    .public-shell-bio-chat {
        --bio-link-height: clamp(62px, 11.5svh, 72px);
        --bio-link-icon-size: clamp(38px, 7.6svh, 46px);
        --bio-link-label-size: clamp(15px, 4vw, 18px);
    }

    .public-card-bio .bio-public-card,
    .public-card-bio-only .bio-public-card,
    .public-card-bio-chat .bio-public-card,
    .public-card-bio .bio-public-card.bio-public-wide,
    .public-card-bio .bio-public-card.bio-public-centered,
    .public-card-bio-only .bio-public-card.bio-public-centered {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bio-public-join-cta {
        min-height: min(24svh, 140px) !important;
        padding-top: 34px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .bio-public-join-pill {
        min-height: 40px !important;
        font-size: clamp(14px, 3.7vw, 18px) !important;
    }

    .bio-public-join-text {
        font-size: clamp(12px, 3.35vw, 16px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bio-public-join-pill {
        animation: none !important;
    }
}


.bio-public-social-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    width: min(var(--bio-link-max-width), calc(100% - (var(--bio-link-side-inset) * 2)));
    max-width: 100%;
    justify-self: center;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2.7vw, 14px);
    margin-top: clamp(12px, 2vw, 22px);
}

.bio-public-social-link {
    position: relative;
    display: grid;
    width: clamp(42px, 10vw, 54px);
    height: clamp(42px, 10vw, 54px);
    place-items: center;
    color: var(--primary);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(31, 24, 17, 0.1);
    border-radius: 999px;
    box-shadow:
        0 10px 24px rgba(52, 39, 21, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        color 0.16s ease;
}

.bio-public-social-link:hover {
    color: var(--primary-2);
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(23, 79, 63, 0.18);
    box-shadow:
        0 13px 30px rgba(52, 39, 21, 0.11),
        0 1px 0 rgba(255, 255, 255, 0.96) inset;
}

.bio-public-social-link:active {
    transform: translateY(1px) scale(0.97);
}

.bio-public-social-link .bio-public-link-icon,
.bio-public-social-link .bio-link-icon {
    position: static !important;
    display: grid !important;
    width: clamp(21px, 5.2vw, 26px) !important;
    height: clamp(21px, 5.2vw, 26px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-public-social-link .bio-public-link-icon svg,
.bio-public-social-link .bio-link-icon svg {
    width: 100% !important;
    height: 100% !important;
}

.bio-public-social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bio-layout-links-first .bio-public-social-links {
    order: 1;
}

.bio-preview-card .bio-public-social-links {
    width: 100%;
    gap: 8px;
    margin-top: 2px;
}

.bio-preview-card .bio-public-social-link {
    width: 36px;
    height: 36px;
}

.bio-preview-card .bio-public-social-link .bio-public-link-icon,
.bio-preview-card .bio-public-social-link .bio-link-icon {
    width: 18px !important;
    height: 18px !important;
}

@media (hover: none), (pointer: coarse) {
    .bio-public-social-link:hover {
        color: var(--primary);
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(31, 24, 17, 0.1);
        box-shadow:
            0 10px 24px rgba(52, 39, 21, 0.08),
            0 1px 0 rgba(255, 255, 255, 0.9) inset;
    }
}

@media (min-width: 721px) {
    .bio-public-social-links {
        gap: 12px;
        margin-top: clamp(14px, 1.6vw, 24px);
    }

    .bio-public-social-link {
        width: clamp(42px, 3.5vw, 52px);
        height: clamp(42px, 3.5vw, 52px);
    }

    .bio-public-social-link .bio-public-link-icon,
    .bio-public-social-link .bio-link-icon {
        width: clamp(20px, 1.7vw, 25px) !important;
        height: clamp(20px, 1.7vw, 25px) !important;
    }
}

@media (max-width: 520px) {
    .bio-public-social-links {
        width: 100%;
        gap: 10px;
        margin-top: 12px;
    }

    .bio-public-social-link {
        width: 42px;
        height: 42px;
    }

    .bio-public-social-link .bio-public-link-icon,
    .bio-public-social-link .bio-link-icon {
        width: 21px !important;
        height: 21px !important;
    }
}


/* Public Bio claim modal */

html.bio-claim-modal-open,
html.bio-claim-modal-open body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.bio-claim-modal[hidden] {
    display: none !important;
}

.bio-claim-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    min-width: 0 !important;
    place-items: end center !important;
    padding:
        max(16px, env(safe-area-inset-top, 0px))
        max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
}

.bio-claim-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(23, 20, 17, 0.34) !important;
}

.bio-claim-dialog {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    width: min(430px, 100%) !important;
    max-height: calc(100dvh - 32px) !important;
    min-width: 0 !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: clamp(22px, 5vw, 34px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    color: var(--text) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(243, 199, 164, 0.22), transparent 16rem),
        radial-gradient(circle at 92% 10%, rgba(223, 238, 232, 0.7), transparent 18rem),
        #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: clamp(28px, 6vw, 38px) !important;
    box-shadow: 0 24px 80px rgba(23, 20, 17, 0.24) !important;
    outline: none !important;
}

.bio-claim-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    place-items: center !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bio-claim-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: center !important;
    gap: 10px !important;
    color: var(--primary) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
}

.bio-claim-brand .bio-public-claim-brand-mark {
    width: 38px !important;
    height: 38px !important;
    color: currentColor !important;
}

.bio-claim-copy {
    display: grid !important;
    gap: 8px !important;
    text-align: center !important;
}

.bio-claim-kicker {
    margin: 0 !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.bio-claim-copy h2 {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.07em !important;
}

.bio-claim-copy p:not(.bio-claim-kicker) {
    width: min(330px, 100%) !important;
    margin: 0 auto !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
}

.bio-claim-form {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.bio-claim-slug-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-width: 0 !important;
    height: 54px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(31, 24, 17, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.bio-claim-slug-field:focus-within {
    background: #fff !important;
    border-color: rgba(23, 79, 63, 0.22) !important;
    box-shadow: 0 0 0 3px rgba(23, 79, 63, 0.08) !important;
}

.bio-claim-slug-field span {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 6px 0 18px !important;
    color: var(--muted) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bio-claim-slug-field input,
.bio-claim-slug-field input:focus,
.bio-claim-slug-field input:active {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 18px 0 4px !important;
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.bio-claim-slug-field input::placeholder {
    color: rgba(117, 111, 101, 0.72) !important;
}

.bio-claim-slug-field input::-webkit-search-decoration,
.bio-claim-slug-field input::-webkit-search-cancel-button,
.bio-claim-slug-field input::-webkit-search-results-button,
.bio-claim-slug-field input::-webkit-search-results-decoration {
    display: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.bio-claim-slug-field input:-webkit-autofill,
.bio-claim-slug-field input:-webkit-autofill:hover,
.bio-claim-slug-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 9999s ease-out !important;
}

.bio-claim-primary,
.bio-claim-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 999px !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bio-claim-primary {
    color: #fff !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.22), transparent 26%),
        linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    border: 1px solid rgba(23, 79, 63, 0.2) !important;
    box-shadow: 0 14px 30px rgba(23, 79, 63, 0.18) !important;
}

.bio-claim-secondary {
    color: var(--primary) !important;
    background: transparent !important;
    border: 1px solid rgba(23, 79, 63, 0.14) !important;
}

@media (max-width: 720px) {
    .bio-claim-modal {
        place-items: end stretch !important;
        padding:
            max(10px, env(safe-area-inset-top, 0px))
            0
            0
            0 !important;
    }

    .bio-claim-dialog {
        align-self: end !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px))) !important;
        margin: 0 !important;
        padding:
            clamp(22px, 5vw, 34px)
            clamp(22px, 5vw, 34px)
            calc(clamp(22px, 5vw, 34px) + env(safe-area-inset-bottom, 0px)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        box-shadow: 0 -18px 70px rgba(23, 20, 17, 0.22) !important;
    }

    .bio-claim-slug-field,
    .bio-claim-slug-field span,
    .bio-claim-slug-field input,
    .bio-claim-slug-field input:focus,
    .bio-claim-slug-field input:active {
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {
    .bio-claim-dialog {
        padding:
            22px
            18px
            calc(22px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 26px 26px 0 0 !important;
    }

    .bio-claim-slug-field span {
        padding-left: 14px !important;
    }

    .bio-claim-slug-field input,
    .bio-claim-slug-field input:focus,
    .bio-claim-slug-field input:active {
        padding-right: 14px !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bio-claim-modal:not([hidden]) .bio-claim-dialog {
        animation: bioClaimSheetIn 0.18s ease-out !important;
    }

    @keyframes bioClaimSheetIn {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.985);
        }

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

/* End Public Bio production section */


/* Bio social links production patch */
/* CI_BIO_SOCIAL_LINKS_CSS_V2 */

.bio-link-options {
    grid-template-columns: minmax(110px, 1fr) minmax(128px, 1fr) auto;
    align-items: end;
}

.bio-link-display {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.bio-link-display span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
}

.bio-link-display select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 14px;
}

.bio-public-social-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: min(560px, 100%);
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    gap: 10px;
    margin: 2px auto 0;
}

.bio-public-social-link {
    display: inline-grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    color: var(--primary);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(31, 24, 17, 0.1);
    border-radius: 999px;
    box-shadow:
        0 10px 24px rgba(52, 39, 21, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform 0.16s ease,
        color 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.bio-public-social-link:hover {
    color: var(--primary-2);
    background: #fff;
    border-color: rgba(23, 79, 63, 0.22);
    box-shadow:
        0 12px 30px rgba(23, 79, 63, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bio-public-social-link:active {
    transform: translateY(1px) scale(0.98);
}

.bio-public-social-label {
    display: none !important;
}

.bio-public-social-link .bio-public-link-icon,
.public-card-bio .bio-public-social-link .bio-public-link-icon,
.public-card-bio-only .bio-public-social-link .bio-public-link-icon,
.public-card-bio-chat .bio-public-social-link .bio-public-link-icon,
.bio-preview-card .bio-public-social-link .bio-public-link-icon {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border-radius: 999px !important;
    transform: none !important;
    box-shadow: none !important;
}

.bio-public-social-link .bio-public-link-icon svg,
.public-card-bio .bio-public-social-link .bio-public-link-icon svg,
.public-card-bio-only .bio-public-social-link .bio-public-link-icon svg,
.public-card-bio-chat .bio-public-social-link .bio-public-link-icon svg,
.bio-preview-card .bio-public-social-link .bio-public-link-icon svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
}

.public-card-bio .bio-public-social-links,
.public-card-bio-only .bio-public-social-links,
.public-card-bio-chat .bio-public-social-links {
    width: min(var(--bio-link-max-width), calc(100% - (var(--bio-link-side-inset) * 2))) !important;
    max-width: 100% !important;
    margin-top: clamp(2px, 0.6vw, 8px) !important;
}

.bio-preview-card .bio-public-social-links {
    width: 100%;
    gap: 8px;
    margin-top: -2px;
}

.bio-preview-card .bio-public-social-link {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
}

.bio-preview-card .bio-public-social-link .bio-public-link-icon svg {
    width: 18px !important;
    height: 18px !important;
}

@media (min-width: 960px) {
    .bio-public-card.bio-public-wide .bio-public-social-links {
        width: 100%;
        justify-self: stretch;
    }

    .public-card-bio-only .bio-public-social-links {
        width: min(860px, 100%) !important;
        max-width: 860px !important;
    }
}

@media (max-width: 720px) {
    .bio-link-options {
        grid-template-columns: minmax(104px, 1fr) minmax(104px, 1fr);
    }

    .bio-link-active {
        min-height: 42px;
        align-self: end;
    }

    .bio-public-social-links {
        gap: 9px;
    }

    .bio-public-social-link {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .bio-public-social-link .bio-public-link-icon svg,
    .public-card-bio .bio-public-social-link .bio-public-link-icon svg,
    .public-card-bio-only .bio-public-social-link .bio-public-link-icon svg,
    .public-card-bio-chat .bio-public-social-link .bio-public-link-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 520px) {
    .bio-link-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .bio-link-display select {
        width: 100%;
    }

    .bio-link-active {
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    .bio-public-social-link {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* End Bio social links production patch */


/* Bio admin links layout production fix v1.0.0 */

.bio-admin .bio-card.bio-card-soft {
    overflow: hidden;
}

.bio-admin .bio-links-list {
    width: 100%;
    min-width: 0;
}

.bio-admin .bio-link-form {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.bio-admin .bio-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, max-content);
    align-items: end;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.bio-admin .bio-link-main {
    display: grid;
    grid-template-columns: minmax(120px, 0.24fr) minmax(360px, 1fr);
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.bio-admin .bio-link-main > label {
    min-width: 0;
}

.bio-admin .bio-link-url-field {
    min-width: 0;
}

.bio-admin .bio-link-url-control {
    width: 100%;
    min-width: 0;
}

.bio-admin .bio-link-url-control input {
    width: 100%;
    min-width: 0;
}

.bio-admin .bio-link-options {
    display: grid;
    grid-template-columns: 112px 128px 72px;
    align-items: end;
    justify-content: end;
    gap: 8px;
    min-width: 0;
}

.bio-admin .bio-link-options > label {
    min-width: 0;
}

.bio-admin .bio-link-options select[name="icon"] {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
}

.bio-admin .bio-link-display {
    min-width: 0;
}

.bio-admin .bio-link-display select {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
}

.bio-admin .bio-link-active {
    display: grid;
    grid-template-rows: 18px 44px;
    align-items: center;
    justify-items: center;
    width: 72px;
    min-width: 72px;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
}

.bio-admin .bio-link-active input[type="checkbox"] {
    grid-row: 2;
    width: 18px;
    height: 18px;
    margin: 0;
}

.bio-admin .bio-link-active span {
    grid-row: 1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
}

.bio-admin .bio-link-actions {
    margin-top: 2px;
}

.bio-admin .bio-link-actions .form-result {
    flex: 1 1 240px;
    min-width: 0;
}

.bio-admin .bio-link-action-buttons {
    flex: none;
}

@media (min-width: 1180px) {
    .bio-admin .bio-link-row {
        grid-template-columns: minmax(0, 1fr) minmax(320px, max-content);
    }

    .bio-admin .bio-link-main {
        grid-template-columns: minmax(130px, 0.22fr) minmax(460px, 1fr);
    }
}

@media (min-width: 900px) and (max-width: 1179px) {
    .bio-admin .bio-link-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .bio-admin .bio-link-main {
        grid-template-columns: minmax(120px, 0.26fr) minmax(0, 1fr);
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(112px, 0.34fr) minmax(128px, 0.42fr) 72px;
        justify-content: stretch;
    }

    .bio-admin .bio-link-options select[name="icon"],
    .bio-admin .bio-link-display select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 720px) and (max-width: 899px) {
    .bio-admin .bio-link-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .bio-admin .bio-link-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(112px, 1fr) minmax(128px, 1fr) 72px;
        justify-content: stretch;
    }

    .bio-admin .bio-link-options select[name="icon"],
    .bio-admin .bio-link-display select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 719px) {
    .bio-admin .bio-link-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;
    }

    .bio-admin .bio-link-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px;
        justify-content: stretch;
        gap: 8px;
    }

    .bio-admin .bio-link-options select[name="icon"],
    .bio-admin .bio-link-display select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 520px) {
    .bio-admin .bio-link-form {
        padding: 10px;
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .bio-admin .bio-link-active {
        grid-template-rows: auto;
        grid-template-columns: 18px auto;
        justify-content: start;
        justify-items: start;
        width: 100%;
        min-width: 0;
        min-height: 40px;
    }

    .bio-admin .bio-link-active input[type="checkbox"] {
        grid-row: auto;
        grid-column: 1;
    }

    .bio-admin .bio-link-active span {
        grid-row: auto;
        grid-column: 2;
    }

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

    .bio-admin .bio-link-action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .bio-admin .bio-link-action-buttons .bio-btn {
        flex: 1;
    }
}

/* End Bio admin links layout production fix v1.0.0 */

/* Bio top social icons and admin UX patch v1.0.0 */
/* CI_BIO_TOP_SOCIAL_ADMIN_CSS_V1 */

.bio-links-helper {
    display: block;
    min-width: 0;
    margin: -2px 0 2px;
    padding: 10px 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.42;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(31, 24, 17, 0.08);
    border-radius: 16px;
}

.bio-links-helper strong {
    color: var(--primary);
    font-weight: 900;
}

.bio-admin .bio-link-form.is-social-link {
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.78), transparent 18rem),
        rgba(255, 255, 255, 0.66);
    border-color: rgba(23, 79, 63, 0.18);
}

.bio-admin .bio-link-form.is-social-link .bio-link-display select {
    color: var(--primary);
    background: rgba(223, 238, 232, 0.72);
    border-color: rgba(23, 79, 63, 0.18);
    font-weight: 900;
}

.public-card-bio .bio-public-identity,
.public-card-bio-only .bio-public-identity,
.public-card-bio-chat .bio-public-identity,
.bio-preview-card .bio-public-identity {
    order: 0 !important;
}

.public-card-bio .bio-public-social-links,
.public-card-bio-only .bio-public-social-links,
.public-card-bio-chat .bio-public-social-links,
.bio-preview-card .bio-public-social-links {
    order: 1 !important;
}

.public-card-bio .bio-public-links,
.public-card-bio-only .bio-public-links,
.public-card-bio-chat .bio-public-links,
.bio-preview-card .bio-public-links {
    order: 2 !important;
}

.public-card-bio .bio-public-contact,
.public-card-bio-only .bio-public-contact,
.public-card-bio-chat .bio-public-contact,
.bio-preview-card .bio-public-contact {
    order: 3 !important;
}

.public-card-bio .bio-public-join-cta,
.public-card-bio-only .bio-public-join-cta,
.public-card-bio-chat .bio-public-join-cta {
    order: 4 !important;
}

.public-card-bio .bio-public-identity + .bio-public-social-links,
.public-card-bio-only .bio-public-identity + .bio-public-social-links,
.public-card-bio-chat .bio-public-identity + .bio-public-social-links {
    margin-top: clamp(4px, 0.9vw, 12px) !important;
}

.public-card-bio .bio-public-social-links + .bio-public-links,
.public-card-bio-only .bio-public-social-links + .bio-public-links,
.public-card-bio-chat .bio-public-social-links + .bio-public-links {
    margin-top: clamp(9px, 1.6vw, 18px) !important;
}

.public-card-bio .bio-public-social-link,
.public-card-bio-only .bio-public-social-link,
.public-card-bio-chat .bio-public-social-link {
    width: clamp(42px, 8.6vw, 52px) !important;
    height: clamp(42px, 8.6vw, 52px) !important;
    min-width: clamp(42px, 8.6vw, 52px) !important;
    min-height: clamp(42px, 8.6vw, 52px) !important;
}

.bio-preview-card .bio-public-social-links {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

@media (min-width: 721px) {
    .public-card-bio .bio-public-social-links,
    .public-card-bio-only .bio-public-social-links,
    .public-card-bio-chat .bio-public-social-links {
        margin-top: clamp(6px, 0.8vw, 14px) !important;
    }
}

@media (max-width: 520px) {
    .bio-links-helper {
        padding: 9px 10px;
        font-size: 11px;
        border-radius: 14px;
    }

    .public-card-bio .bio-public-social-links,
    .public-card-bio-only .bio-public-social-links,
    .public-card-bio-chat .bio-public-social-links {
        margin-top: 6px !important;
    }

    .public-card-bio .bio-public-social-links + .bio-public-links,
    .public-card-bio-only .bio-public-social-links + .bio-public-links,
    .public-card-bio-chat .bio-public-social-links + .bio-public-links {
        margin-top: 10px !important;
    }
}

/* End Bio top social icons and admin UX patch v1.0.0 */


/* Bio split admin links production patch */
/* CI_BIO_SPLIT_ADMIN_LINKS_CSS_V1 */

.bio-admin .bio-links-manager-card {
    gap: 16px;
}

.bio-links-sections {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.bio-links-section {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.bio-links-section-social {
    background:
        radial-gradient(circle at 12% 0%, rgba(223, 238, 232, 0.84), transparent 18rem),
        rgba(255, 255, 255, 0.62);
}

.bio-links-section-buttons {
    background:
        radial-gradient(circle at 12% 0%, rgba(243, 199, 164, 0.24), transparent 18rem),
        rgba(255, 255, 255, 0.58);
}

.bio-links-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.bio-links-section-head > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bio-links-section-head strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.bio-links-section-head small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.bio-links-section-head .bio-btn {
    flex: none;
}

.bio-admin .bio-link-form {
    background: rgba(255, 255, 255, 0.66);
}

.bio-admin .bio-link-form-social {
    border-color: rgba(23, 79, 63, 0.14);
}

.bio-admin .bio-link-form-button {
    border-color: rgba(31, 24, 17, 0.1);
}

.bio-admin .bio-link-form-social .bio-link-main {
    grid-template-columns: minmax(0, 1fr);
}

.bio-admin .bio-link-options {
    grid-template-columns: 112px 72px;
    min-width: 196px;
}

.bio-admin .bio-link-row {
    grid-template-columns: minmax(0, 1fr) minmax(196px, max-content);
}

.bio-admin .bio-link-display {
    display: none !important;
}

.bio-link-kind-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.bio-link-kind-pill-social {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: rgba(23, 79, 63, 0.12);
}

.bio-admin .bio-link-actions {
    align-items: center;
}

.bio-admin .bio-link-actions .form-result {
    flex: 1 1 220px;
}

@media (min-width: 1180px) {
    .bio-admin .bio-link-main {
        grid-template-columns: minmax(130px, 0.22fr) minmax(460px, 1fr);
    }

    .bio-admin .bio-link-form-social .bio-link-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 720px) and (max-width: 1179px) {
    .bio-admin .bio-link-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(112px, 1fr) 72px;
        min-width: 0;
        justify-content: stretch;
    }

    .bio-admin .bio-link-options select[name="icon"] {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 719px) {
    .bio-links-section {
        padding: 10px;
        border-radius: 18px;
    }

    .bio-links-section-head {
        display: grid;
        gap: 10px;
    }

    .bio-links-section-head .bio-btn {
        width: 100%;
    }

    .bio-admin .bio-link-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .bio-admin .bio-link-main,
    .bio-admin .bio-link-form-social .bio-link-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .bio-admin .bio-link-options {
        grid-template-columns: minmax(0, 1fr) 72px;
        min-width: 0;
        justify-content: stretch;
    }

    .bio-admin .bio-link-options select[name="icon"] {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .bio-link-kind-pill {
        width: fit-content;
    }
}

@media (max-width: 520px) {
    .bio-admin .bio-link-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .bio-admin .bio-link-active {
        grid-template-rows: auto;
        grid-template-columns: 18px auto;
        justify-content: start;
        justify-items: start;
        width: 100%;
        min-width: 0;
        min-height: 40px;
    }

    .bio-admin .bio-link-active input[type="checkbox"] {
        grid-row: auto;
        grid-column: 1;
    }

    .bio-admin .bio-link-active span {
        grid-row: auto;
        grid-column: 2;
    }

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

    .bio-admin .bio-link-action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .bio-admin .bio-link-action-buttons .bio-btn {
        flex: 1;
    }
}

/* End Bio split admin links production patch */


/* Bio Linktree-like admin UX production patch */
/* CI_BIO_LINKTREE_ADMIN_UX_CSS_V1 */

.bio-links-manager-card-linktree {
    gap: 16px;
}

.bio-links-manager-card-linktree .bio-links-sections {
    gap: 16px;
}

.bio-links-manager-card-linktree .bio-links-section {
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.64);
    border-radius: 24px;
}

.bio-links-manager-card-linktree .bio-links-section-social {
    background:
        radial-gradient(circle at 10% 0%, rgba(223, 238, 232, 0.94), transparent 18rem),
        rgba(255, 255, 255, 0.72);
}

.bio-links-manager-card-linktree .bio-links-section-buttons {
    background:
        radial-gradient(circle at 12% 0%, rgba(243, 199, 164, 0.28), transparent 18rem),
        rgba(255, 255, 255, 0.68);
}

.bio-social-picker {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(23, 79, 63, 0.12);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(52, 39, 21, 0.08);
}

.bio-social-picker[hidden] {
    display: none !important;
}

.bio-social-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.bio-social-picker-head strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.bio-social-picker-close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.bio-social-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    min-width: 0;
}

.bio-social-platform-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-align: left;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(31, 24, 17, 0.09);
    border-radius: 14px;
    box-shadow: none;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.bio-social-platform-button:hover {
    background: #fff;
    border-color: rgba(23, 79, 63, 0.2);
    box-shadow: 0 10px 24px rgba(23, 79, 63, 0.08);
}

.bio-social-platform-button:active {
    transform: translateY(1px) scale(0.99);
}

.bio-social-platform-button .bio-public-link-icon {
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-social-platform-button .bio-public-link-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.bio-social-platform-button span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-link-form-social,
.bio-link-form-button {
    position: relative;
    background: rgba(255, 255, 255, 0.74) !important;
    border-radius: 22px !important;
}

.bio-link-form-social::before,
.bio-link-form-button::before {
    position: absolute;
    top: 22px;
    left: 8px;
    width: 4px;
    height: 18px;
    content: "";
    background:
        radial-gradient(circle, rgba(117, 111, 101, 0.42) 1.5px, transparent 2px)
        0 0 / 4px 6px;
    opacity: 0.55;
}

.bio-link-row-social,
.bio-link-row-button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 10px;
}

.bio-link-main-social {
    display: grid !important;
    grid-template-columns: minmax(140px, 0.28fr) minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.bio-link-main-button {
    display: grid !important;
    grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.bio-social-platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    background: var(--primary-soft);
    border: 1px solid rgba(23, 79, 63, 0.12);
    border-radius: 15px;
}

.bio-social-platform-pill .bio-public-link-icon {
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-social-platform-pill .bio-public-link-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.bio-social-platform-pill span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-link-options-simple {
    display: grid !important;
    grid-template-columns: 72px !important;
    min-width: 72px !important;
    justify-content: end !important;
}

.bio-link-form-social .bio-link-options,
.bio-link-form-button .bio-link-options {
    grid-template-columns: 72px !important;
}

.bio-link-form-social select[name="icon"],
.bio-link-form-button select[name="icon"],
.bio-link-form-social .bio-link-display,
.bio-link-form-button .bio-link-display {
    display: none !important;
}

.bio-link-form-social .bio-link-active,
.bio-link-form-button .bio-link-active {
    display: grid !important;
    grid-template-rows: 18px 44px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 72px !important;
    min-width: 72px !important;
    gap: 6px !important;
    margin: 0 !important;
}

.bio-link-form-social .bio-link-active input[type="checkbox"],
.bio-link-form-button .bio-link-active input[type="checkbox"] {
    grid-row: 2;
    width: 18px;
    height: 18px;
    margin: 0;
}

.bio-link-form-social .bio-link-active span,
.bio-link-form-button .bio-link-active span {
    grid-row: 1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
}

.bio-link-form-social .bio-link-actions,
.bio-link-form-button .bio-link-actions {
    align-items: center;
    padding-left: 10px;
}

.bio-link-form-social .bio-link-actions .form-result,
.bio-link-form-button .bio-link-actions .form-result {
    flex: 1 1 220px;
    min-width: 0;
}

.bio-link-form-social .bio-link-kind-pill,
.bio-link-form-button .bio-link-kind-pill {
    display: none !important;
}

@media (min-width: 1180px) {
    .bio-link-main-social {
        grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr) !important;
    }

    .bio-link-main-button {
        grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr) !important;
    }
}

@media (min-width: 720px) and (max-width: 1179px) {
    .bio-link-row-social,
    .bio-link-row-button {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    .bio-link-options-simple,
    .bio-link-form-social .bio-link-options,
    .bio-link-form-button .bio-link-options {
        grid-template-columns: 72px !important;
        min-width: 72px !important;
        justify-content: start !important;
    }
}

@media (max-width: 719px) {
    .bio-links-manager-card-linktree .bio-links-section {
        padding: 10px;
        border-radius: 20px;
    }

    .bio-links-section-head {
        display: grid;
        gap: 10px;
    }

    .bio-links-section-head .bio-btn {
        width: 100%;
    }

    .bio-social-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bio-link-row-social,
    .bio-link-row-button {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        padding-left: 8px;
    }

    .bio-link-main-social,
    .bio-link-main-button {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bio-link-options-simple,
    .bio-link-form-social .bio-link-options,
    .bio-link-form-button .bio-link-options {
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }

    .bio-link-form-social .bio-link-active,
    .bio-link-form-button .bio-link-active {
        grid-template-rows: auto !important;
        grid-template-columns: 18px auto !important;
        justify-content: start !important;
        justify-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }

    .bio-link-form-social .bio-link-active input[type="checkbox"],
    .bio-link-form-button .bio-link-active input[type="checkbox"] {
        grid-row: auto;
        grid-column: 1;
    }

    .bio-link-form-social .bio-link-active span,
    .bio-link-form-button .bio-link-active span {
        grid-row: auto;
        grid-column: 2;
    }

    .bio-link-form-social .bio-link-actions,
    .bio-link-form-button .bio-link-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding-left: 8px;
    }

    .bio-link-form-social .bio-link-action-buttons,
    .bio-link-form-button .bio-link-action-buttons {
        width: 100%;
        justify-content: stretch;
    }

    .bio-link-form-social .bio-link-action-buttons .bio-btn,
    .bio-link-form-button .bio-link-action-buttons .bio-btn {
        flex: 1;
    }
}

@media (max-width: 420px) {
    .bio-social-picker-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* End Bio Linktree-like admin UX production patch */

/* Bio Button links match Social icons production patch */
/* CI_BIO_BUTTON_LINKS_MATCH_SOCIAL_CSS_V1 */

/*
 * Scope: Bio admin only.
 * Goal: make Button links visually match Social icons without changing public Bio,
 * widget settings, Chat Page, OnePage or API behavior.
 */

.bio-links-manager-card-linktree .bio-links-section-buttons,
.bio-admin .bio-links-section-buttons {
    background:
        radial-gradient(circle at 10% 0%, rgba(223, 238, 232, 0.94), transparent 18rem),
        rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(23, 79, 63, 0.14) !important;
}

.bio-links-manager-card-linktree .bio-links-section-buttons .bio-links-section-head strong,
.bio-admin .bio-links-section-buttons .bio-links-section-head strong {
    color: var(--text) !important;
}

.bio-links-manager-card-linktree .bio-links-section-buttons .bio-links-section-head small,
.bio-admin .bio-links-section-buttons .bio-links-section-head small {
    color: var(--muted) !important;
}

.bio-admin .bio-link-form-social,
.bio-admin .bio-link-form-button {
    border-color: rgba(23, 79, 63, 0.14) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.42), transparent 16rem),
        rgba(255, 255, 255, 0.74) !important;
    box-shadow: none !important;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease !important;
}

.bio-admin .bio-link-form-social:hover,
.bio-admin .bio-link-form-button:hover {
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.72), transparent 17rem),
        #ffffff !important;
    border-color: rgba(23, 79, 63, 0.24) !important;
    box-shadow:
        0 12px 30px rgba(23, 79, 63, 0.075),
        0 1px 0 rgba(255, 255, 255, 0.84) inset !important;
}

.bio-admin .bio-link-form-social:focus-within,
.bio-admin .bio-link-form-button:focus-within {
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.78), transparent 18rem),
        #ffffff !important;
    border-color: rgba(23, 79, 63, 0.28) !important;
    box-shadow:
        0 0 0 4px rgba(23, 79, 63, 0.075),
        0 12px 30px rgba(23, 79, 63, 0.07) !important;
}

.bio-link-form-social::before,
.bio-link-form-button::before {
    background:
        radial-gradient(circle, rgba(23, 79, 63, 0.42) 1.5px, transparent 2px)
        0 0 / 4px 6px !important;
    opacity: 0.58 !important;
    transition:
        opacity 0.16s ease,
        background 0.16s ease !important;
}

.bio-link-form-social:hover::before,
.bio-link-form-button:hover::before,
.bio-link-form-social:focus-within::before,
.bio-link-form-button:focus-within::before {
    opacity: 0.82 !important;
}

.bio-admin .bio-link-form-button .bio-link-main-button label:first-child span,
.bio-admin .bio-link-form-button .bio-link-url-field > span {
    color: var(--muted) !important;
}

.bio-admin .bio-link-form-button .bio-link-main-button label:first-child input {
    color: var(--primary) !important;
    font-weight: 900 !important;
    background: var(--primary-soft) !important;
    border-color: rgba(23, 79, 63, 0.14) !important;
}

.bio-admin .bio-link-form-button:hover .bio-link-main-button label:first-child input,
.bio-admin .bio-link-form-button:focus-within .bio-link-main-button label:first-child input {
    background: rgba(223, 238, 232, 0.86) !important;
    border-color: rgba(23, 79, 63, 0.22) !important;
}

.bio-admin .bio-link-form-button .bio-link-url-control,
.bio-admin .bio-link-form-social .bio-link-url-control {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(23, 79, 63, 0.11) !important;
}

.bio-admin .bio-link-form-button:hover .bio-link-url-control,
.bio-admin .bio-link-form-social:hover .bio-link-url-control,
.bio-admin .bio-link-form-button:focus-within .bio-link-url-control,
.bio-admin .bio-link-form-social:focus-within .bio-link-url-control {
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.2) !important;
}

.bio-admin .bio-link-form-button .bio-link-active,
.bio-admin .bio-link-form-social .bio-link-active {
    color: var(--muted) !important;
}

.bio-admin .bio-link-form-button .bio-link-active input[type="checkbox"],
.bio-admin .bio-link-form-social .bio-link-active input[type="checkbox"] {
    accent-color: var(--primary) !important;
}

.bio-admin .bio-links-section-buttons .bio-btn-ghost,
.bio-admin .bio-links-section-social .bio-btn-ghost {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(23, 79, 63, 0.14) !important;
}

.bio-admin .bio-links-section-buttons .bio-btn-ghost:hover,
.bio-admin .bio-links-section-social .bio-btn-ghost:hover {
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.22) !important;
    box-shadow: 0 10px 24px rgba(23, 79, 63, 0.08) !important;
}

@media (hover: none), (pointer: coarse) {
    .bio-admin .bio-link-form-social:hover,
    .bio-admin .bio-link-form-button:hover {
        background:
            radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.42), transparent 16rem),
            rgba(255, 255, 255, 0.74) !important;
        border-color: rgba(23, 79, 63, 0.14) !important;
        box-shadow: none !important;
    }
}

@media (max-width: 719px) {
    .bio-admin .bio-link-form-button .bio-link-main-button label:first-child input {
        min-height: 44px !important;
    }
}

/* End Bio Button links match Social icons production patch */

/* Bio unified Links manager and Add modal trigger patch */
/* CI_BIO_UNIFIED_LINKS_ADD_MODAL_CSS_V1 */

.bio-admin .bio-links-manager-unified {
    gap: 14px;
}

.bio-admin .bio-links-manager-unified > .bio-card-head {
    align-items: center;
}

.bio-admin .bio-links-manager-unified > .bio-card-head .bio-card-title small {
    max-width: 720px;
}

.bio-admin .bio-links-manager-unified .bio-unified-add-button {
    flex: none;
    min-width: 82px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.22), transparent 26%),
        linear-gradient(135deg, var(--primary), var(--primary-2));
    border-color: rgba(23, 79, 63, 0.2);
    box-shadow: 0 12px 28px rgba(23, 79, 63, 0.16);
}

.bio-admin .bio-links-manager-unified .bio-unified-add-button:hover {
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.25), transparent 26%),
        linear-gradient(135deg, var(--primary), var(--primary-2));
    border-color: rgba(23, 79, 63, 0.24);
    box-shadow: 0 14px 34px rgba(23, 79, 63, 0.22);
}

.bio-admin .bio-links-manager-unified .bio-links-sections {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background:
        radial-gradient(circle at 10% 0%, rgba(223, 238, 232, 0.78), transparent 18rem),
        rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(23, 79, 63, 0.12);
    border-radius: 24px;
}

.bio-admin .bio-links-manager-unified .bio-links-section {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 0;
    background: transparent !important;
    border: 0;
    border-radius: 0;
}

.bio-admin .bio-links-manager-unified .bio-links-section-head[hidden] {
    display: none !important;
}

.bio-admin .bio-links-manager-unified .bio-links-section-social + .bio-links-section-buttons {
    padding-top: 0;
}

.bio-admin .bio-links-manager-unified .bio-links-list {
    gap: 10px;
}

.bio-admin .bio-links-manager-unified .empty-state {
    min-height: 72px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px dashed rgba(23, 79, 63, 0.12);
    border-radius: 18px;
}

@media (max-width: 719px) {
    .bio-admin .bio-links-manager-unified > .bio-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .bio-admin .bio-links-manager-unified .bio-unified-add-button {
        width: 100%;
    }

    .bio-admin .bio-links-manager-unified .bio-links-sections {
        padding: 10px;
        border-radius: 22px;
    }
}

/* End Bio unified Links manager and Add modal trigger patch */



/* CI_BIO_DISPLAY_TYPE_POSITION_CSS_V1 */

/* Hide header social icons from the common Links manager.
   They are managed only through the top Bio header Social icons manager.
   Forms remain in DOM for compatibility with existing JS sync/save/delete logic. */
/* CI_BIO_HIDE_HEADER_ICONS_FROM_LINKS_MANAGER_CSS_V1 */

.bio-admin .bio-links-manager-unified .bio-links-section-social {
    display: none !important;
}


/* Hide DB-backed header social icon forms from the common Links manager.
   Social icon forms are managed only through the top Social icons manager modal. */
/* CI_BIO_HIDE_HEADER_ICON_FORMS_CSS_V1 */

.bio-admin [data-bio-link-form][data-mod-bio-header-icon-form="1"] {
    display: none !important;
}

.bio-admin .bio-links-manager-unified .bio-links-section-social {
    display: none !important;
}

/* End hide DB-backed header social icon forms patch */

/* CI_BIO_LINK_CARD_FINAL_CLEAN_CSS_V1 */

.bio-admin .bio-link-form-button.bio-link-card-row,
.bio-admin .bio-links-manager-unified .bio-link-form-button.bio-link-card-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) max-content !important;
    grid-template-areas:
        "handle main topactions"
        "handle bottom bottom"
        "panel panel panel"
        "result result result" !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 116px !important;
    padding: 14px 14px 12px 8px !important;
    overflow: visible !important;
    color: var(--text) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.42), transparent 17rem),
        rgba(255, 255, 255, 0.80) !important;
    border: 1px solid rgba(23, 79, 63, 0.13) !important;
    border-radius: 22px !important;
    box-shadow:
        0 10px 24px rgba(52, 39, 21, 0.045),
        0 1px 0 rgba(255, 255, 255, 0.84) inset !important;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease !important;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
}

.bio-admin .bio-link-form-button.bio-link-card-row:hover,
.bio-admin .bio-link-form-button.bio-link-card-row:focus-within {
    background:
        radial-gradient(circle at 0% 0%, rgba(223, 238, 232, 0.68), transparent 18rem),
        #ffffff !important;
    border-color: rgba(23, 79, 63, 0.22) !important;
    box-shadow:
        0 14px 34px rgba(23, 79, 63, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

.bio-admin .bio-link-card-row.is-bio-link-saving {
    border-color: rgba(217, 164, 65, 0.42) !important;
}

.bio-admin .bio-link-card-row.is-bio-link-dirty:not(.is-bio-link-saving) {
    border-color: rgba(23, 79, 63, 0.24) !important;
}

.bio-admin .bio-link-card-row.is-bio-link-deleting {
    opacity: 0.62 !important;
    pointer-events: none !important;
}

.bio-link-drag-handle,
.bio-admin .bio-link-card-row .bio-link-drag-handle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 8 !important;
    grid-area: handle !important;
    display: grid !important;
    grid-template-columns: repeat(2, 2.6px) !important;
    grid-auto-rows: 2.6px !important;
    align-self: center !important;
    justify-self: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 3px 3px !important;
    width: 22px !important;
    height: 46px !important;
    min-width: 22px !important;
    padding: 0 !important;
    color: rgba(31, 24, 17, 0.43) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: grab !important;
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.bio-link-drag-handle::before,
.bio-admin .bio-link-card-row .bio-link-drag-handle::before {
    position: absolute !important;
    inset: -6px -5px !important;
    content: "" !important;
    border-radius: 14px !important;
}

.bio-link-drag-handle span,
.bio-admin .bio-link-card-row .bio-link-drag-handle span {
    display: block !important;
    width: 2.6px !important;
    height: 2.6px !important;
    background: currentColor !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.bio-link-drag-handle:hover,
.bio-link-drag-handle:focus-visible,
.bio-admin .bio-link-card-row .bio-link-drag-handle:hover,
.bio-admin .bio-link-card-row .bio-link-drag-handle:focus-visible {
    color: rgba(23, 79, 63, 0.74) !important;
    background: rgba(255, 255, 255, 0.46) !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-link-drag-handle:active,
.bio-admin .bio-link-card-row .bio-link-drag-handle:active {
    cursor: grabbing !important;
    transform: none !important;
}

html.bio-link-drag-lock,
html.bio-link-drag-lock body {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.bio-admin.is-bio-link-dragging {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.bio-admin .bio-link-drag-placeholder {
    display: block !important;
    width: 100% !important;
    min-height: 58px !important;
    background: rgba(223, 238, 232, 0.24) !important;
    border: 1px dashed rgba(23, 79, 63, 0.22) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}

.bio-link-drag-ghost {
    max-width: none !important;
    opacity: 0.985 !important;
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.22) !important;
    box-shadow:
        0 18px 46px rgba(23, 79, 63, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
    pointer-events: none !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    transform-origin: 0 0 !important;
}

.bio-admin .bio-link-form.is-bio-link-drag-source {
    display: none !important;
}

.bio-link-card-main {
    grid-area: main !important;
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.bio-link-card-edit-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.bio-admin .bio-link-card-text-input {
    flex: 0 1 auto !important;
    width: auto;
    max-width: 65% !important;
    min-width: 22px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--text) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    caret-color: transparent !important;
}

.bio-admin .bio-link-card-title-input {
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
}

.bio-admin .bio-link-card-url-input {
    max-width: 65% !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 730 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em !important;
}

.bio-admin .bio-link-card-text-input::placeholder {
    color: rgba(117, 111, 101, 0.72) !important;
}

.bio-admin .bio-link-card-text-input:not([readonly]),
.bio-admin .bio-link-card-text-input:not([readonly]):focus {
    overflow: hidden !important;
    text-overflow: clip !important;
    color: var(--text) !important;
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    caret-color: var(--primary) !important;
    border-bottom-color: rgba(23, 79, 63, 0.72) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.bio-admin .bio-link-card-url-input:not([readonly]),
.bio-admin .bio-link-card-url-input:not([readonly]):focus {
    color: var(--primary) !important;
}

.bio-admin .bio-link-card-text-input::selection {
    background: rgba(23, 79, 63, 0.16) !important;
}

.bio-link-card-edit-button {
    display: inline-grid !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(23, 79, 63, 0.52) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
}

.bio-link-card-edit-button:hover,
.bio-link-card-edit-button:focus-visible {
    color: var(--primary) !important;
    background: rgba(23, 79, 63, 0.06) !important;
    outline: none !important;
}

.bio-link-card-edit-button svg {
    width: 12px !important;
    height: 12px !important;
}

.bio-link-card-top-actions {
    grid-area: topactions !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
    align-self: start !important;
    padding-top: 0 !important;
}

.bio-link-card-icon-button {
    display: inline-grid !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    place-items: center !important;
    padding: 0 !important;
    color: rgba(23, 79, 63, 0.62) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.bio-link-card-icon-button:hover,
.bio-link-card-icon-button:focus-visible {
    color: var(--primary) !important;
    background: rgba(23, 79, 63, 0.07) !important;
    outline: none !important;
}

.bio-link-card-icon-button svg {
    width: 16px !important;
    height: 16px !important;
}

.bio-link-card-switch {
    position: relative !important;
    display: inline-grid !important;
    width: 38px !important;
    height: 22px !important;
    min-width: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    cursor: pointer !important;
}

.bio-link-card-switch input {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.bio-link-card-switch-visual {
    position: relative !important;
    display: block !important;
    width: 38px !important;
    height: 22px !important;
    background: rgba(31, 24, 17, 0.14) !important;
    border: 1px solid rgba(31, 24, 17, 0.08) !important;
    border-radius: 999px !important;
    transition:
        background 0.16s ease,
        border-color 0.16s ease !important;
}

.bio-link-card-switch-visual::before {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 16px !important;
    height: 16px !important;
    content: "" !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 8px rgba(31, 24, 17, 0.14) !important;
    transition: transform 0.16s ease !important;
}

.bio-link-card-switch input:checked + .bio-link-card-switch-visual {
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    border-color: rgba(23, 79, 63, 0.2) !important;
}

.bio-link-card-switch input:checked + .bio-link-card-switch-visual::before {
    transform: translateX(16px) !important;
}

.bio-link-card-switch-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.bio-link-card-bottom-row {
    grid-area: bottom !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding-top: 3px !important;
}

.bio-link-card-type-icon {
    position: static !important;
    display: inline-grid !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    place-items: center !important;
    color: rgba(23, 79, 63, 0.78) !important;
    background: rgba(23, 79, 63, 0.055) !important;
    border: 1px solid rgba(23, 79, 63, 0.09) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-link-card-type-icon .bio-public-link-icon,
.bio-link-card-type-icon .bio-link-icon {
    position: static !important;
    display: grid !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-link-card-type-icon .bio-public-link-icon svg,
.bio-link-card-type-icon .bio-link-icon svg,
.bio-link-card-type-icon svg {
    width: 15px !important;
    height: 15px !important;
}

.bio-link-card-bottom-row .bio-link-card-trash-button {
    color: rgba(31, 24, 17, 0.46) !important;
    background: transparent !important;
}

.bio-link-card-bottom-row .bio-link-card-trash-button:hover,
.bio-link-card-bottom-row .bio-link-card-trash-button:focus-visible {
    color: var(--danger) !important;
    background: rgba(163, 58, 46, 0.08) !important;
}

.bio-link-delete-panel {
    grid-area: panel !important;
    display: grid !important;
    gap: 0 !important;
    min-width: 0 !important;
    margin-top: 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--text) !important;
    background: #eef6fb !important;
    border: 1px solid rgba(31, 24, 17, 0.08) !important;
    border-radius: 15px !important;
}

.bio-link-delete-panel[hidden] {
    display: none !important;
}

.bio-link-delete-panel-head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 36px !important;
    color: rgba(23, 20, 17, 0.86) !important;
    background: rgba(167, 205, 222, 0.38) !important;
    border-bottom: 1px solid rgba(31, 24, 17, 0.06) !important;
}

.bio-link-delete-panel-head strong {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.bio-link-delete-panel-close {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center !important;
    padding: 0 !important;
    color: rgba(23, 20, 17, 0.58) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
}

.bio-link-delete-panel-close:hover,
.bio-link-delete-panel-close:focus-visible {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    outline: none !important;
}

.bio-link-delete-panel-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.bio-link-delete-option {
    display: grid !important;
    gap: 3px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 8px 10px !important;
    text-align: center !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.bio-link-delete-option strong {
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.bio-link-delete-option span {
    display: block !important;
    color: rgba(117, 111, 101, 0.82) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
}

.bio-link-delete-confirm {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(31, 24, 17, 0.1) !important;
}

.bio-link-delete-confirm:hover,
.bio-link-delete-confirm:focus-visible {
    color: var(--danger) !important;
    background: #ffffff !important;
    border-color: rgba(163, 58, 46, 0.18) !important;
}

.bio-link-archive-button {
    color: rgba(117, 111, 101, 0.68) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    border: 1px solid rgba(31, 24, 17, 0.06) !important;
}

.bio-link-archive-button:disabled {
    opacity: 0.76 !important;
}

.bio-link-card-result {
    grid-area: result !important;
    margin: 0 !important;
}

.bio-link-card-delete-notice {
    margin-bottom: 8px !important;
}

.bio-link-card-actions,
.bio-link-card-row .bio-link-row,
.bio-link-card-row .bio-link-options,
.bio-link-card-row .bio-link-actions,
.bio-link-card-row .bio-link-active,
.bio-link-card-row .bio-link-action-buttons {
    display: none !important;
}

@media (max-width: 719px) {
    .bio-admin .bio-link-form-button.bio-link-card-row,
    .bio-admin .bio-links-manager-unified .bio-link-form-button.bio-link-card-row {
        grid-template-columns: 22px minmax(0, 1fr) max-content !important;
        column-gap: 8px !important;
        min-height: 108px !important;
        padding: 12px 12px 12px 7px !important;
        border-radius: 20px !important;
    }

    .bio-link-drag-handle,
    .bio-admin .bio-link-card-row .bio-link-drag-handle {
        width: 21px !important;
        height: 42px !important;
        grid-template-columns: repeat(2, 2.45px) !important;
        grid-auto-rows: 2.45px !important;
        gap: 3px !important;
    }

    .bio-link-card-top-actions {
        gap: 6px !important;
    }

    .bio-link-card-icon-button {
        width: 28px !important;
        height: 28px !important;
    }

    .bio-link-card-switch {
        width: 38px !important;
        min-width: 38px !important;
    }

    .bio-link-delete-panel-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .bio-link-drag-handle:hover,
    .bio-admin .bio-link-card-row .bio-link-drag-handle:hover {
        color: rgba(31, 24, 17, 0.43) !important;
        background: transparent !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bio-admin .bio-link-form-button.bio-link-card-row,
    .bio-admin .bio-link-card-row .bio-link-drag-handle,
    .bio-link-card-switch-visual,
    .bio-link-card-switch-visual::before,
    .bio-link-drag-ghost,
    .bio-admin .bio-link-drag-placeholder,
    .bio-link-card-edit-button {
        transition: none !important;
        animation: none !important;
    }
}

/* END CI_BIO_LINK_CARD_FINAL_CLEAN_CSS_V1 */

/* CI_BIO_TRANSFORM_ONLY_DRAG_CSS_V1 */

.bio-admin .bio-link-drag-placeholder,
.bio-link-drag-ghost {
    display: none !important;
}

.bio-admin .bio-link-card-row .bio-link-drag-handle,
.bio-link-drag-handle {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.bio-admin .bio-link-form.is-bio-link-drag-source {
    opacity: 0.5 !important;
    cursor: grabbing !important;
    border-color: rgba(23, 79, 63, 0.28) !important;
    box-shadow:
        0 16px 38px rgba(23, 79, 63, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
    backface-visibility: hidden !important;
    transform-origin: center center !important;
    will-change: transform !important;
}

.bio-admin .bio-link-form.is-bio-link-drag-displaced {
    will-change: transform !important;
}

.bio-admin.is-bio-link-dragging,
.bio-admin.is-bio-link-dragging [data-bio-button-links-list],
.bio-admin.is-bio-link-dragging [data-bio-social-links-list],
.bio-admin.is-bio-link-dragging [data-bio-links-list],
html.bio-link-drag-lock,
html.bio-link-drag-lock body {
    cursor: grabbing !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

html.bio-link-drag-lock,
html.bio-link-drag-lock body {
    overscroll-behavior: contain !important;
}

.bio-admin.is-bio-link-dragging [data-bio-link-form] {
    backface-visibility: hidden !important;
}

@media (hover: none), (pointer: coarse) {
    .bio-admin .bio-link-form.is-bio-link-drag-source {
        opacity: 0.5 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bio-admin .bio-link-form.is-bio-link-drag-source,
    .bio-admin .bio-link-form.is-bio-link-drag-displaced,
    .bio-admin.is-bio-link-dragging [data-bio-link-form] {
        transition: none !important;
        animation: none !important;
    }
}

/* END CI_BIO_TRANSFORM_ONLY_DRAG_CSS_V1 */

/* CI_BIO_ADMIN_LINK_CARD_DOTS_CLEAN_CSS_V1 */

.bio-admin .bio-link-form-button.bio-link-card-row::before,
.bio-admin .bio-links-manager-unified .bio-link-form-button.bio-link-card-row::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bio-admin .bio-link-form-button.bio-link-card-row,
.bio-admin .bio-links-manager-unified .bio-link-form-button.bio-link-card-row {
    grid-template-columns: 16px minmax(0, 1fr) max-content !important;
    column-gap: 8px !important;
    padding-left: 8px !important;
}

.bio-admin .bio-link-card-row .bio-link-drag-handle {
    position: relative !important;
    grid-area: handle !important;
    display: grid !important;
    grid-template-columns: repeat(2, 2px) !important;
    grid-template-rows: repeat(3, 2px) !important;
    grid-auto-rows: 2px !important;
    align-self: start !important;
    justify-self: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 3px 3px !important;
    width: 18px !important;
    height: 30px !important;
    min-width: 18px !important;
    min-height: 30px !important;
    margin-top: 20px !important;
    padding: 0 !important;
    color: rgba(31, 24, 17, 0.46) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    cursor: grab !important;
    touch-action: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.bio-admin .bio-link-card-row .bio-link-drag-handle::before {
    position: absolute !important;
    inset: -8px -7px !important;
    content: "" !important;
    border-radius: 13px !important;
    background: transparent !important;
}

.bio-admin .bio-link-card-row .bio-link-drag-handle span {
    display: block !important;
    width: 2px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 0.25px currentColor !important;
}

.bio-admin .bio-link-card-row .bio-link-drag-handle:hover,
.bio-admin .bio-link-card-row .bio-link-drag-handle:focus-visible {
    color: rgba(23, 79, 63, 0.76) !important;
    background: rgba(23, 79, 63, 0.055) !important;
    outline: none !important;
    box-shadow: none !important;
}

.bio-admin .bio-link-card-row .bio-link-drag-handle:active {
    cursor: grabbing !important;
}

@media (max-width: 719px) {
    .bio-admin .bio-link-form-button.bio-link-card-row,
    .bio-admin .bio-links-manager-unified .bio-link-form-button.bio-link-card-row {
        grid-template-columns: 15px minmax(0, 1fr) max-content !important;
        column-gap: 7px !important;
        padding-left: 7px !important;
    }

    .bio-admin .bio-link-card-row .bio-link-drag-handle {
        grid-template-columns: repeat(2, 2px) !important;
        grid-template-rows: repeat(3, 2px) !important;
        grid-auto-rows: 2px !important;
        gap: 2.8px 2.8px !important;
        width: 17px !important;
        height: 29px !important;
        min-width: 17px !important;
        min-height: 29px !important;
        margin-top: 18px !important;
    }

    .bio-admin .bio-link-card-row .bio-link-drag-handle span {
        width: 2px !important;
        height: 2px !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .bio-admin .bio-link-card-row .bio-link-drag-handle:hover {
        color: rgba(31, 24, 17, 0.46) !important;
        background: transparent !important;
    }
}

/* END CI_BIO_ADMIN_LINK_CARD_DOTS_CLEAN_CSS_V1 */

/* CI_BIO_LINK_CARD_ARCHIVE_WORKFLOW_CSS_V1 */

.bio-links-manager-actions {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.bio-links-manager-actions .bio-btn {
    gap: 6px;
    white-space: nowrap;
}

.bio-archive-open-button svg,
.bio-link-card-restore-button svg {
    flex: none;
}

.bio-admin .bio-links-manager-unified .bio-archive-open-button {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(23, 79, 63, 0.14) !important;
}

.bio-admin .bio-links-manager-unified .bio-archive-open-button:hover,
.bio-admin .bio-links-manager-unified .bio-archive-open-button:focus-visible {
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.22) !important;
    box-shadow: 0 10px 24px rgba(23, 79, 63, 0.08) !important;
    outline: none !important;
}

.bio-links-archive-view {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background:
        radial-gradient(circle at 10% 0%, rgba(223, 238, 232, 0.78), transparent 18rem),
        rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(23, 79, 63, 0.12);
    border-radius: 24px;
}

.bio-links-archive-view[hidden] {
    display: none !important;
}

.bio-links-manager-card.is-bio-archive-open > .bio-card-head,
.bio-links-manager-card.is-bio-archive-open > .bio-links-sections {
    display: none !important;
}

.bio-links-archive-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.bio-links-archive-back {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    padding: 0 4px;
    color: var(--text);
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.04em;
    background: transparent;
    border: 0;
    border-radius: 12px;
}

.bio-links-archive-back:hover,
.bio-links-archive-back:focus-visible {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.54);
    outline: none;
}

.bio-archive-links-list {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.bio-link-card-archived-row,
.bio-admin .bio-link-card-archived-row {
    grid-template-columns: 24px minmax(0, 1fr) max-content !important;
    opacity: 1 !important;
}

.bio-link-card-archived-row .bio-link-drag-spacer {
    grid-area: handle !important;
    display: block !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 46px !important;
}

.bio-link-card-archived-row .bio-link-card-top-actions-archive {
    min-width: 1px !important;
    width: 1px !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.bio-link-card-archived-row .bio-link-card-edit-row {
    pointer-events: none !important;
}

.bio-link-card-archived-row .bio-link-card-text-input,
.bio-admin .bio-link-card-archived-row .bio-link-card-text-input {
    user-select: text !important;
    -webkit-user-select: text !important;
    caret-color: transparent !important;
}

.bio-link-card-bottom-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: max-content;
}

.bio-link-card-restore-button {
    color: rgba(23, 79, 63, 0.72) !important;
    background: rgba(23, 79, 63, 0.06) !important;
}

.bio-link-card-restore-button:hover,
.bio-link-card-restore-button:focus-visible {
    color: var(--primary) !important;
    background: rgba(23, 79, 63, 0.12) !important;
    outline: none !important;
}

.bio-link-cancel-button {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 79, 63, 0.10) !important;
}

.bio-link-cancel-button:hover,
.bio-link-cancel-button:focus-visible {
    color: var(--primary-2) !important;
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.18) !important;
}

.bio-link-archive-button:not(:disabled) {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(23, 79, 63, 0.10) !important;
}

.bio-link-archive-button:not(:disabled):hover,
.bio-link-archive-button:not(:disabled):focus-visible {
    color: var(--primary-2) !important;
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.18) !important;
}

.bio-archive-empty {
    min-height: 94px !important;
    background: rgba(255, 255, 255, 0.42) !important;
    border: 1px dashed rgba(23, 79, 63, 0.12) !important;
    border-radius: 18px !important;
}

@media (max-width: 719px) {
    .bio-admin .bio-links-manager-unified > .bio-card-head {
        gap: 10px;
    }

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

    .bio-links-manager-actions .bio-btn {
        width: 100%;
        min-width: 0;
    }

    .bio-links-archive-view {
        padding: 10px;
        border-radius: 22px;
    }

    .bio-links-archive-back {
        min-height: 40px;
        font-size: 17px;
    }

    .bio-link-card-archived-row,
    .bio-admin .bio-link-card-archived-row {
        grid-template-columns: 22px minmax(0, 1fr) max-content !important;
    }

    .bio-link-card-archived-row .bio-link-drag-spacer {
        width: 21px !important;
        min-width: 21px !important;
        height: 42px !important;
    }
}

@media (max-width: 420px) {
    .bio-links-manager-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* END CI_BIO_LINK_CARD_ARCHIVE_WORKFLOW_CSS_V1 */



/* CI_BIO_SOCIAL_ICON_POSITION_ORDER_CSS_V1
   Fix: old Bio CSS globally forced every .bio-public-social-links block to order:1.
   The Social icon position feature now renders two explicit blocks:
   - data-bio-public-social-position="top" / data-bio-preview-social-position="top"
   - data-bio-public-social-position="bottom" / data-bio-preview-social-position="bottom"
   Keep admin top strip unchanged. Only public Bio and preview order are affected here.
*/

.public-card-bio .bio-public-social-links[data-bio-public-social-position="top"],
.public-card-bio-only .bio-public-social-links[data-bio-public-social-position="top"],
.public-card-bio-chat .bio-public-social-links[data-bio-public-social-position="top"],
.bio-preview-card .bio-public-social-links[data-bio-preview-social-position="top"] {
    order: 1 !important;
}

.public-card-bio .bio-public-links,
.public-card-bio-only .bio-public-links,
.public-card-bio-chat .bio-public-links,
.bio-preview-card .bio-public-links {
    order: 2 !important;
}

.public-card-bio .bio-public-social-links[data-bio-public-social-position="bottom"],
.public-card-bio-only .bio-public-social-links[data-bio-public-social-position="bottom"],
.public-card-bio-chat .bio-public-social-links[data-bio-public-social-position="bottom"],
.bio-preview-card .bio-public-social-links[data-bio-preview-social-position="bottom"] {
    order: 3 !important;
}

.public-card-bio .bio-public-contact,
.public-card-bio-only .bio-public-contact,
.public-card-bio-chat .bio-public-contact,
.bio-preview-card .bio-public-contact {
    order: 4 !important;
}

.public-card-bio .bio-public-join-cta,
.public-card-bio-only .bio-public-join-cta,
.public-card-bio-chat .bio-public-join-cta {
    order: 5 !important;
}

.public-card-bio .bio-public-links + .bio-public-social-links[data-bio-public-social-position="bottom"],
.public-card-bio-only .bio-public-links + .bio-public-social-links[data-bio-public-social-position="bottom"],
.public-card-bio-chat .bio-public-links + .bio-public-social-links[data-bio-public-social-position="bottom"],
.bio-preview-card .bio-public-links + .bio-public-social-links[data-bio-preview-social-position="bottom"] {
    margin-top: clamp(10px, 1.6vw, 18px) !important;
}

/* END CI_BIO_SOCIAL_ICON_POSITION_ORDER_CSS_V1 */


/* CI_BIO_PREVIEW_JOIN_FOOTER_CSS_V1 */

.bio-preview-card .bio-public-join-cta {
    order: 5 !important;
}

.bio-preview-card .bio-public-join-cta .bio-public-join-text {
    cursor: default !important;
}

/* END CI_BIO_PREVIEW_JOIN_FOOTER_CSS_V1 */


/* CI_BIO_COVER_SETTINGS_FILES_CSS_V4 */

.public-card-bio .bio-public-card.bio-cover-size-small,
.public-card-bio-only .bio-public-card.bio-cover-size-small,
.public-card-bio-chat .bio-public-card.bio-cover-size-small {
    --bio-cover-height: clamp(118px, 30vw, 178px) !important;
}

.public-card-bio .bio-public-card.bio-cover-size-medium,
.public-card-bio-only .bio-public-card.bio-cover-size-medium,
.public-card-bio-chat .bio-public-card.bio-cover-size-medium {
    --bio-cover-height: clamp(168px, 46vw, 250px) !important;
}

.public-card-bio .bio-public-card.bio-cover-size-large,
.public-card-bio-only .bio-public-card.bio-cover-size-large,
.public-card-bio-chat .bio-public-card.bio-cover-size-large {
    --bio-cover-height: clamp(220px, 56vw, 340px) !important;
}

.bio-preview-card.bio-cover-size-small .bio-public-cover {
    height: 82px !important;
    min-height: 82px !important;
}

.bio-preview-card.bio-cover-size-medium .bio-public-cover {
    height: 108px !important;
    min-height: 108px !important;
}

.bio-preview-card.bio-cover-size-large .bio-public-cover {
    height: 146px !important;
    min-height: 146px !important;
}

@media (prefers-reduced-motion: no-preference) {
    .public-card-bio .bio-public-card.bio-cover-animated .bio-public-cover,
    .public-card-bio-only .bio-public-card.bio-cover-animated .bio-public-cover,
    .public-card-bio-chat .bio-public-card.bio-cover-animated .bio-public-cover,
    .bio-preview-card.bio-cover-animated .bio-public-cover {
        animation: bioSoftPulse 7s ease-in-out infinite !important;
        transform-origin: center center !important;
        will-change: opacity, transform !important;
    }
}

.public-card-bio .bio-public-card.bio-cover-static .bio-public-cover,
.public-card-bio-only .bio-public-card.bio-cover-static .bio-public-cover,
.public-card-bio-chat .bio-public-card.bio-cover-static .bio-public-cover,
.bio-preview-card.bio-cover-static .bio-public-cover {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* END CI_BIO_COVER_SETTINGS_FILES_CSS_V4 */


/* CI_BIO_PUBLIC_COVER_SHIMMER_MATCH_ADMIN_FIX_V2
   Public Bio only:
   Real public shimmer now matches admin top card logic:
   - the cover container itself does not animate/dim;
   - the actual cover image is duplicated into a dedicated ::before visual layer;
   - that ::before layer uses the existing bioSoftPulse keyframes.
*/

.public-card-bio .bio-public-cover.bio-public-cover-has-image,
.public-card-bio-only .bio-public-cover.bio-public-cover-has-image,
.public-card-bio-chat .bio-public-cover.bio-public-cover-has-image {
    position: relative !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(217, 164, 65, 0.28), transparent 18rem),
        linear-gradient(135deg, rgba(23, 79, 63, 0.14), rgba(223, 238, 232, 0.68)) !important;
}

.public-card-bio .bio-public-cover.bio-public-cover-has-image::before,
.public-card-bio-only .bio-public-cover.bio-public-cover-has-image::before,
.public-card-bio-chat .bio-public-cover.bio-public-cover-has-image::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    content: "";
    background-image: var(--bio-public-cover-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0.97;
    transform: scale(1);
    transform-origin: center center;
    pointer-events: none;
    will-change: auto;
    backface-visibility: hidden;
}

.public-card-bio .bio-public-cover.bio-public-cover-has-image img,
.public-card-bio-only .bio-public-cover.bio-public-cover-has-image img,
.public-card-bio-chat .bio-public-cover.bio-public-cover-has-image img {
    position: relative !important;
    z-index: 1 !important;
    opacity: 0 !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
    .public-card-bio .bio-public-card.bio-cover-animated .bio-public-cover,
    .public-card-bio-only .bio-public-card.bio-cover-animated .bio-public-cover,
    .public-card-bio-chat .bio-public-card.bio-cover-animated .bio-public-cover {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    .public-card-bio .bio-public-card.bio-cover-animated .bio-public-cover.bio-public-cover-has-image::before,
    .public-card-bio-only .bio-public-card.bio-cover-animated .bio-public-cover.bio-public-cover-has-image::before,
    .public-card-bio-chat .bio-public-card.bio-cover-animated .bio-public-cover.bio-public-cover-has-image::before {
        animation: bioSoftPulse 7s ease-in-out infinite !important;
        transform-origin: center center !important;
        will-change: opacity, transform !important;
    }
}

.public-card-bio .bio-public-card.bio-cover-static .bio-public-cover.bio-public-cover-has-image,
.public-card-bio-only .bio-public-card.bio-cover-static .bio-public-cover.bio-public-cover-has-image,
.public-card-bio-chat .bio-public-card.bio-cover-static .bio-public-cover.bio-public-cover-has-image {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

.public-card-bio .bio-public-card.bio-cover-static .bio-public-cover.bio-public-cover-has-image::before,
.public-card-bio-only .bio-public-card.bio-cover-static .bio-public-cover.bio-public-cover-has-image::before,
.public-card-bio-chat .bio-public-card.bio-cover-static .bio-public-cover.bio-public-cover-has-image::before {
    animation: none !important;
    opacity: 0.97 !important;
    transform: scale(1) !important;
    will-change: auto !important;
}

/* END CI_BIO_PUBLIC_COVER_SHIMMER_MATCH_ADMIN_FIX_V2 */


/* CI_BIO_PREVIEW_COVER_SIZE_STABILITY_CSS_V1_REMOVED_BY_PUBLIC_COPY */



/* CI_BIO_ADMIN_PREVIEW_PUBLIC_COPY_V1 */
.bio-admin-side .bio-preview-public-copy.public-card-bio-only {
    --bio-page-inset: 0px !important;
    --bio-page-gap: 0px !important;
    --bio-card-pad: 16px !important;
    --bio-card-radius: 28px !important;
    --bio-cover-bleed: var(--bio-card-pad) !important;
    --bio-cover-top-offset: calc(0px - var(--bio-card-pad)) !important;
    --bio-cover-radius: 28px 28px 20px 20px !important;
    --bio-link-max-width: 100% !important;
    --bio-link-side-inset: 0px !important;
    display: grid !important;
    width: min(100%, 390px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.bio-admin-side .bio-preview-public-copy .bio-public-shell,
.bio-admin-side .bio-preview-public-copy .bio-public-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
}
.bio-admin-side .bio-preview-public-copy .bio-public-card {
    padding: var(--bio-card-pad) !important;
    gap: 12px !important;
    border-radius: var(--bio-card-radius) !important;
    box-shadow: var(--shadow-soft) !important;
    pointer-events: none !important;
}
.bio-admin-side .bio-preview-public-copy .bio-public-cover {
    position: relative !important;
    inset: auto !important;
    order: -10 !important;
    display: block !important;
    width: calc(100% + var(--bio-cover-bleed) + var(--bio-cover-bleed)) !important;
    height: var(--bio-cover-height) !important;
    min-height: var(--bio-cover-height) !important;
    margin: var(--bio-cover-top-offset) calc(0px - var(--bio-cover-bleed)) 0 !important;
    overflow: hidden !important;
    border-radius: var(--bio-cover-radius) !important;
    animation: none !important;
    transform: none !important;
    pointer-events: none !important;
    contain: paint !important;
}
.bio-admin-side .bio-preview-public-copy .bio-public-avatar {
    width: clamp(70px, 21vw, 88px) !important;
    height: clamp(70px, 21vw, 88px) !important;
    margin-top: calc(0px - (clamp(70px, 21vw, 88px) / 2)) !important;
    border-radius: clamp(22px, 6.5vw, 29px) !important;
    font-size: clamp(29px, 8vw, 39px) !important;
}
.bio-admin-side .bio-preview-public-copy .bio-public-name { font-size: clamp(26px, 8vw, 38px) !important; line-height: .96 !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-text { font-size: clamp(12px, 3.35vw, 14px) !important; line-height: 1.38 !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-link { min-height: clamp(50px, 14vw, 62px) !important; padding: 0 14px !important; border-radius: 20px !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-link-label { font-size: clamp(14px, 4vw, 17px) !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-social-links { width: 100% !important; gap: 8px !important; margin-top: 2px !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-social-link { width: 36px !important; height: 36px !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-social-link .bio-public-link-icon,
.bio-admin-side .bio-preview-public-copy .bio-public-social-link .bio-link-icon { width: 18px !important; height: 18px !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-join-cta {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    color: var(--text) !important;
    pointer-events: none !important;
    overflow: visible !important;
}
.bio-admin-side .bio-preview-public-copy .bio-public-join-cta::before,
.bio-admin-side .bio-preview-public-copy .bio-public-join-cta::after,
.bio-admin-side .bio-preview-public-copy .bio-public-join-pill,
.bio-admin-side .bio-preview-public-copy .bio-public-top-actions,
.bio-admin-side .bio-preview-public-copy .bio-claim-modal { display: none !important; content: none !important; }
.bio-admin-side .bio-preview-public-copy .bio-public-join-text {
    display: inline-flex !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(31,24,17,.10) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(52,39,21,.10) !important;
    pointer-events: none !important;
}
.bio-admin-side .bio-preview-public-copy .bio-cover-size-small { --bio-cover-height: 82px !important; }
.bio-admin-side .bio-preview-public-copy .bio-cover-size-medium { --bio-cover-height: 108px !important; }
.bio-admin-side .bio-preview-public-copy .bio-cover-size-large { --bio-cover-height: 146px !important; }
@media (max-width: 719px) { .bio-admin-side .bio-preview-public-copy.public-card-bio-only { width: min(100%, 360px) !important; } }
/* END CI_BIO_ADMIN_PREVIEW_PUBLIC_COPY_V1 */


/* CI_BIO_ADMIN_PREVIEW_LINK_ICON_POSITION_FIX_V1
   Admin preview public-copy only:
   The public Bio link-card layout depends on --bio-link-* variables from the public shell.
   The admin preview wrapper is intentionally smaller, so define those variables locally and
   force link-card icon/label/arrow positioning inside preview only.
*/

.bio-admin-side .bio-preview-public-copy.public-card-bio-only {
    --bio-link-height: clamp(50px, 14vw, 62px) !important;
    --bio-link-radius: 20px !important;
    --bio-link-pad-x: 14px !important;
    --bio-link-icon-size: clamp(32px, 8vw, 40px) !important;
    --bio-link-icon-radius: 14px !important;
    --bio-link-icon-left: 12px !important;
    --bio-link-action-size: 24px !important;
    --bio-link-action-right: 12px !important;
    --bio-link-label-size: clamp(14px, 4vw, 17px) !important;
    --bio-link-label-weight: 680 !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--bio-link-height) !important;
    padding: 0 var(--bio-link-pad-x) !important;
    overflow: hidden !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-link .bio-public-link-main {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: calc(var(--bio-link-action-size) + 14px) !important;
    padding-left: calc(var(--bio-link-icon-size) + 14px) !important;
    gap: 0 !important;
    text-align: center !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-link .bio-public-link-icon {
    position: absolute !important;
    top: 50% !important;
    left: var(--bio-link-icon-left) !important;
    display: grid !important;
    width: var(--bio-link-icon-size) !important;
    height: var(--bio-link-icon-size) !important;
    min-width: var(--bio-link-icon-size) !important;
    min-height: var(--bio-link-icon-size) !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: var(--bio-link-icon-radius) !important;
    transform: translateY(-50%) !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-link .bio-public-link-icon svg {
    width: min(22px, calc(var(--bio-link-icon-size) * 0.52)) !important;
    height: min(22px, calc(var(--bio-link-icon-size) * 0.52)) !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-link .bio-public-link-label {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: var(--bio-link-label-size) !important;
    font-weight: var(--bio-link-label-weight) !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-link .bio-public-link-arrow {
    position: absolute !important;
    top: 50% !important;
    right: var(--bio-link-action-right) !important;
    display: grid !important;
    width: var(--bio-link-action-size) !important;
    height: var(--bio-link-action-size) !important;
    place-items: center !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 719px) {
    .bio-admin-side .bio-preview-public-copy.public-card-bio-only {
        --bio-link-icon-size: 34px !important;
        --bio-link-icon-left: 11px !important;
        --bio-link-action-right: 11px !important;
        --bio-link-action-size: 22px !important;
    }
}

/* END CI_BIO_ADMIN_PREVIEW_LINK_ICON_POSITION_FIX_V1 */


/* CI_BIO_ADMIN_PREVIEW_JOIN_CTA_MOBILE_FIX_V1
   Admin preview public-copy only:
   public mobile Join CTA is fixed/fullscreen on real public pages.
   Inside admin preview it must stay as a normal centered pill inside the card.
*/

.bio-admin-side .bio-preview-public-copy .bio-public-join-cta,
.bio-admin-side .bio-preview-public-copy.public-card-bio-only .bio-public-join-cta,
.bio-admin-side .bio-preview-public-copy .bio-public-card .bio-public-join-cta {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    order: 100 !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-items: center !important;
    color: var(--primary) !important;
    overflow: visible !important;
    isolation: auto !important;
    transform: none !important;
    pointer-events: none !important;
    background: transparent !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-join-cta::before,
.bio-admin-side .bio-preview-public-copy .bio-public-join-cta::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-join-cta-inner {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-join-pill {
    display: none !important;
    content: none !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-join-text {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 320px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    overflow: hidden !important;
    color: var(--primary) !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    font-weight: 780 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(31, 24, 17, 0.1) !important;
    border-radius: 999px !important;
    box-shadow:
        0 10px 24px rgba(52, 39, 21, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
    text-shadow: none !important;
    transform: none !important;
    animation: none !important;
    cursor: default !important;
    pointer-events: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.bio-admin-side .bio-preview-public-copy .bio-public-join-text:hover,
.bio-admin-side .bio-preview-public-copy .bio-public-join-text:active,
.bio-admin-side .bio-preview-public-copy .bio-public-join-text:focus,
.bio-admin-side .bio-preview-public-copy .bio-public-join-text:focus-visible {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
        0 10px 24px rgba(52, 39, 21, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
    outline: none !important;
    transform: none !important;
}

@media (max-width: 719px) {
    .bio-admin-side .bio-preview-public-copy .bio-public-join-cta,
    .bio-admin-side .bio-preview-public-copy.public-card-bio-only .bio-public-join-cta,
    .bio-admin-side .bio-preview-public-copy .bio-public-card .bio-public-join-cta {
        position: relative !important;
        inset: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 1 !important;
        min-height: 0 !important;
        margin-top: 12px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-items: center !important;
        overflow: visible !important;
    }

    .bio-admin-side .bio-preview-public-copy .bio-public-join-cta-inner {
        width: 100% !important;
        justify-items: center !important;
    }

    .bio-admin-side .bio-preview-public-copy .bio-public-join-text {
        width: min(100%, 310px) !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        font-size: clamp(12px, 3.45vw, 13px) !important;
        line-height: 1.1 !important;
    }
}

/* END CI_BIO_ADMIN_PREVIEW_JOIN_CTA_MOBILE_FIX_V1 */


/* CI_BIO_BRANDING_FOOTER_ADMIN_BLOCK_CSS_V1 */

.bio-admin .bio-branding-footer-admin-row {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 86px !important;
    padding: 16px 16px 16px 10px !important;
    margin-top: 14px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 42px rgba(52, 39, 21, 0.07) !important;
}

.bio-admin .bio-branding-footer-drag-spacer {
    width: 18px !important;
    min-width: 18px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bio-admin .bio-branding-footer-admin-main {
    display: grid !important;
    gap: 9px !important;
    min-width: 0 !important;
}

.bio-admin .bio-branding-footer-admin-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 3px 7px !important;
    color: var(--primary) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    background: rgba(223, 238, 232, 0.78) !important;
    border: 1px solid rgba(23, 79, 63, 0.1) !important;
    border-radius: 8px !important;
}

.bio-admin .bio-branding-footer-admin-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: var(--text) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

.bio-admin .bio-branding-footer-admin-brand strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.bio-admin .bio-branding-footer-admin-mark,
.bio-admin .bio-branding-footer-admin-mark-fallback {
    display: grid !important;
    flex: none !important;
    width: 20px !important;
    height: 20px !important;
    place-items: center !important;
    color: var(--primary) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    border-radius: 7px !important;
}

.bio-admin .bio-branding-footer-admin-mark svg,
.bio-admin .bio-branding-footer-admin-mark path {
    max-width: 20px !important;
    max-height: 20px !important;
}

.bio-admin .bio-branding-footer-admin-actions {
    align-self: start !important;
    justify-self: end !important;
}

.bio-admin .bio-branding-footer-result {
    grid-column: 2 / -1 !important;
    margin: -2px 0 0 !important;
}

@media (max-width: 560px) {
    .bio-admin .bio-branding-footer-admin-row {
        grid-template-columns: 14px minmax(0, 1fr) auto !important;
        min-height: 78px !important;
        gap: 8px !important;
        padding: 14px 13px 14px 8px !important;
        border-radius: 22px !important;
    }

    .bio-admin .bio-branding-footer-drag-spacer {
        width: 14px !important;
        min-width: 14px !important;
    }

    .bio-admin .bio-branding-footer-admin-kicker {
        font-size: 10px !important;
    }

    .bio-admin .bio-branding-footer-admin-brand {
        font-size: 14px !important;
    }
}

/* END CI_BIO_BRANDING_FOOTER_ADMIN_BLOCK_CSS_V1 */


/* CI_BIO_BRANDING_FOOTER_MINI_FIX_V1 */

/* The public-copy preview uses display rules with !important, so hidden must win explicitly. */
.bio-admin [data-bio-preview] [data-bio-preview-branding-footer][hidden],
.bio-admin [data-bio-preview] [data-bio-public-join-cta][hidden],
.bio-admin-side .bio-preview-public-copy [data-bio-preview-branding-footer][hidden],
.bio-admin-side .bio-preview-public-copy [data-bio-public-join-cta][hidden],
.bio-preview-public-copy [data-bio-preview-branding-footer][hidden],
.bio-preview-public-copy [data-bio-public-join-cta][hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Footer admin row is a system block, not a draggable user link. */
.bio-admin .bio-branding-footer-admin-row,
.bio-admin .bio-branding-footer-admin-row.bio-link-card-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-areas:
        "main topactions"
        "result result" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 15px 14px !important;
    margin-top: 14px !important;
}

.bio-admin .bio-branding-footer-admin-row::before {
    display: none !important;
    content: none !important;
}

.bio-admin .bio-branding-footer-drag-spacer {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bio-admin .bio-branding-footer-admin-main {
    grid-area: main !important;
    display: grid !important;
    justify-items: start !important;
    align-content: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: left !important;
}

.bio-admin .bio-branding-footer-admin-actions {
    grid-area: topactions !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: max-content !important;
    padding-top: 0 !important;
}

.bio-admin .bio-branding-footer-admin-kicker {
    margin: 0 !important;
    text-align: left !important;
}

.bio-admin .bio-branding-footer-admin-brand {
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

.bio-admin .bio-branding-footer-result {
    grid-area: result !important;
    grid-column: auto !important;
    width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 560px) {
    .bio-admin .bio-branding-footer-admin-row,
    .bio-admin .bio-branding-footer-admin-row.bio-link-card-row {
        grid-template-columns: minmax(0, 1fr) max-content !important;
        grid-template-areas:
            "main topactions"
            "result result" !important;
        column-gap: 8px !important;
        min-height: 76px !important;
        padding: 13px 12px !important;
    }
}

/* END CI_BIO_BRANDING_FOOTER_MINI_FIX_V1 */


/* CI_BIO_LINK_ICON_THUMBNAIL_ADMIN_CSS_V1 */

.public-card-bio .bio-public-link.bio-public-link-no-icon .bio-public-link-main,
.public-card-bio-only .bio-public-link.bio-public-link-no-icon .bio-public-link-main,
.public-card-bio-chat .bio-public-link.bio-public-link-no-icon .bio-public-link-main {
    padding-left: calc(var(--bio-link-action-size) + 20px) !important;
}

.bio-public-link-icon.bio-link-icon-custom-url,
.bio-link-icon-custom-url {
    overflow: hidden !important;
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(23, 79, 63, 0.10) !important;
}

.bio-public-link-icon.bio-link-icon-custom-url img,
.bio-link-icon-custom-url img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.bio-link-card-title-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.bio-link-card-title-line .bio-link-card-edit-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.bio-link-card-title-icon {
    display: inline-grid !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    place-items: center !important;
    overflow: hidden !important;
    color: rgba(23, 79, 63, 0.82) !important;
    background: rgba(23, 79, 63, 0.055) !important;
    border: 1px solid rgba(23, 79, 63, 0.09) !important;
    border-radius: 9px !important;
}

.bio-link-card-title-icon.is-bio-link-card-title-icon-hidden {
    display: none !important;
}

.bio-link-card-title-icon .bio-public-link-icon,
.bio-link-card-title-icon .bio-link-icon {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-link-card-title-icon .bio-public-link-icon svg,
.bio-link-card-title-icon .bio-link-icon svg {
    width: 15px !important;
    height: 15px !important;
}

.bio-link-card-thumbnail-button {
    color: rgba(23, 79, 63, 0.64) !important;
}

.bio-link-card-bottom-spacer {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}

.bio-link-card-thumbnail-button:hover,
.bio-link-card-thumbnail-button:focus-visible {
    color: var(--primary) !important;
    background: rgba(23, 79, 63, 0.07) !important;
}

.bio-link-icon-panel {
    grid-area: panel !important;
    display: grid !important;
    gap: 0 !important;
    min-width: 0 !important;
    margin-top: 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--text) !important;
    background: #eef6fb !important;
    border: 1px solid rgba(31, 24, 17, 0.08) !important;
    border-radius: 15px !important;
}

.bio-link-icon-panel[hidden] {
    display: none !important;
}

.bio-link-icon-panel-head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 36px !important;
    color: rgba(23, 20, 17, 0.86) !important;
    background: rgba(167, 205, 222, 0.38) !important;
    border-bottom: 1px solid rgba(31, 24, 17, 0.06) !important;
}

.bio-link-icon-panel-head strong {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.bio-link-icon-panel-close {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center !important;
    padding: 0 !important;
    color: rgba(23, 20, 17, 0.58) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
}

.bio-link-icon-panel-close:hover,
.bio-link-icon-panel-close:focus-visible {
    color: var(--text) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    outline: none !important;
}

.bio-link-icon-panel-body {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.42) !important;
}

.bio-link-icon-panel-body span {
    min-width: 0 !important;
    color: rgba(117, 111, 101, 0.86) !important;
    font-size: 11px !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
}

.bio-link-icon-panel-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    min-width: 112px !important;
    padding: 0 16px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    border: 1px solid rgba(23, 79, 63, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(23, 79, 63, 0.16) !important;
}

.bio-link-icon-panel-button:hover,
.bio-link-icon-panel-button:focus-visible {
    box-shadow: 0 12px 26px rgba(23, 79, 63, 0.22) !important;
    outline: none !important;
}

.bio-link-icon-modal-open,
.bio-link-icon-modal-open body {
    overflow: hidden !important;
}

.bio-link-icon-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99980 !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
    background: rgba(18, 31, 28, 0.34) !important;
    backdrop-filter: blur(12px) !important;
}

.bio-link-icon-modal-backdrop[hidden] {
    display: none !important;
}

.bio-link-icon-dialog {
    position: relative !important;
    display: grid !important;
    gap: 14px !important;
    width: min(460px, 100%) !important;
    max-height: min(720px, calc(100vh - 36px)) !important;
    padding: 18px !important;
    overflow: auto !important;
    color: var(--text) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(223, 238, 232, 0.92), transparent 18rem),
        rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 26px !important;
    box-shadow:
        0 30px 80px rgba(18, 31, 28, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

.bio-link-icon-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    padding: 0 !important;
    color: rgba(23, 20, 17, 0.58) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(31, 24, 17, 0.08) !important;
    border-radius: 999px !important;
}

.bio-link-icon-modal-close:hover,
.bio-link-icon-modal-close:focus-visible {
    color: var(--text) !important;
    background: #ffffff !important;
    outline: none !important;
}

.bio-link-icon-modal-head {
    display: grid !important;
    gap: 4px !important;
    padding: 4px 44px 0 2px !important;
}

.bio-link-icon-modal-head h2 {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
}

.bio-link-icon-options {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.bio-link-icon-option {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    color: var(--text) !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(23, 79, 63, 0.10) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.bio-link-icon-option:hover,
.bio-link-icon-option:focus-visible,
.bio-link-icon-option.is-selected {
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.24) !important;
    box-shadow: 0 12px 26px rgba(23, 79, 63, 0.07) !important;
    outline: none !important;
}

.bio-link-icon-option-art {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    overflow: hidden !important;
    color: var(--primary) !important;
    background: rgba(23, 79, 63, 0.055) !important;
    border: 1px solid rgba(23, 79, 63, 0.09) !important;
    border-radius: 15px !important;
}

.bio-link-icon-option-art .bio-public-link-icon,
.bio-link-icon-option-art .bio-link-icon {
    position: static !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    place-items: center !important;
    margin: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    transform: none !important;
}

.bio-link-icon-option-art .bio-public-link-icon svg,
.bio-link-icon-option-art .bio-link-icon svg,
.bio-link-icon-option-art > svg {
    width: 20px !important;
    height: 20px !important;
}

.bio-link-icon-option-art-none {
    color: rgba(117, 111, 101, 0.78) !important;
    background: rgba(31, 24, 17, 0.045) !important;
}

.bio-link-icon-option-copy {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.bio-link-icon-option-copy strong {
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 920 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

.bio-link-icon-option-copy small {
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

.bio-link-icon-option-radio {
    position: relative !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid rgba(23, 79, 63, 0.24) !important;
    border-radius: 999px !important;
}

.bio-link-icon-option.is-selected .bio-link-icon-option-radio {
    border-color: var(--primary) !important;
}

.bio-link-icon-option.is-selected .bio-link-icon-option-radio::after {
    position: absolute !important;
    inset: 4px !important;
    content: "" !important;
    background: var(--primary) !important;
    border-radius: 999px !important;
}

.bio-link-icon-custom-fields {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(23, 79, 63, 0.10) !important;
    border-radius: 18px !important;
}

.bio-link-icon-custom-fields[hidden] {
    display: none !important;
}

.bio-link-icon-custom-fields label {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.bio-link-icon-custom-fields label > span {
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.bio-link-icon-custom-fields input {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(23, 79, 63, 0.14) !important;
    border-radius: 15px !important;
    outline: none !important;
    box-shadow: none !important;
}

.bio-link-icon-custom-fields input:focus {
    background: #ffffff !important;
    border-color: rgba(23, 79, 63, 0.34) !important;
    box-shadow: 0 0 0 4px rgba(23, 79, 63, 0.08) !important;
}

.bio-link-icon-custom-preview {
    display: grid !important;
    width: 56px !important;
    height: 56px !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.bio-link-icon-custom-preview[hidden] {
    display: none !important;
}

.bio-link-icon-custom-preview .bio-public-link-icon,
.bio-link-icon-custom-preview .bio-link-icon {
    position: static !important;
    display: grid !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    place-items: center !important;
    margin: 0 !important;
    border-radius: 18px !important;
    transform: none !important;
}

.bio-link-icon-modal-result {
    margin: 0 !important;
}

.bio-link-icon-modal-footer {
    display: flex !important;
    justify-content: stretch !important;
    min-width: 0 !important;
}

.bio-link-icon-modal-save {
    width: 100% !important;
    min-height: 46px !important;
}

@media (max-width: 719px) {
    .bio-link-icon-modal-backdrop {
        align-items: end !important;
        padding: 12px !important;
    }

    .bio-link-icon-dialog {
        width: 100% !important;
        max-height: min(680px, calc(100vh - 24px)) !important;
        border-radius: 24px !important;
    }

    .bio-link-icon-panel-body {
        display: grid !important;
    }

    .bio-link-icon-panel-button {
        width: 100% !important;
    }
}

/* END CI_BIO_LINK_ICON_THUMBNAIL_ADMIN_CSS_V1 */