/**
 * LNX Base Styles
 *
 * Unified CSS for public profile pages.
 * Uses --lnx-* prefix for all CSS variables.
 */

/* ==================== */
/* CSS RESET            */
/* ==================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* ==================== */
/* UNIFIED CSS VARIABLES */
/* ==================== */

:root {
    /* Colors - Unified */
    --lnx-color-primary: #374151;
    --lnx-color-primary-hover: #1f2937;
    --lnx-color-brand-dark: #616e7d;
    --lnx-color-brand-light: #aad4c8;
    --lnx-color-bg: #ffffff;
    --lnx-color-bg-page: #f0f0f0;
    --lnx-color-text: #111827;
    --lnx-color-text-secondary: #6b7280;
    --lnx-color-border: #e5e7eb;
    --lnx-color-accent: var(--lnx-color-primary);

    /* Typography - Unified */
    --lnx-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lnx-font-tagline: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lnx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Customizable Font Sizes */
    --lnx-font-size-title: 1.875rem;
    --lnx-font-size-tagline: 0.875rem;
    --lnx-font-size-body: 0.9375rem;

    /* Font Sizes - Unified */
    --lnx-text-xs: 0.75rem;
    --lnx-text-sm: 0.875rem;
    --lnx-text-base: 1rem;
    --lnx-text-lg: 1.125rem;
    --lnx-text-xl: 1.25rem;
    --lnx-text-2xl: 1.5rem;
    --lnx-text-3xl: 2rem;
    --lnx-text-4xl: 2.5rem;

    /* Spacing - Unified */
    --lnx-spacing-xs: 0.25rem;
    --lnx-spacing-sm: 0.5rem;
    --lnx-spacing-md: 1rem;
    --lnx-spacing-lg: 1.5rem;
    --lnx-spacing-xl: 2rem;
    --lnx-spacing-2xl: 3rem;

    /* Border Radius - Unified */
    --lnx-radius-sm: 0.25rem;
    --lnx-radius-md: 0.5rem;
    --lnx-radius-lg: 0.75rem;
    --lnx-radius-xl: 1rem;
    --lnx-radius-full: 9999px;

    /* Shadows - Unified */
    --lnx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --lnx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --lnx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Layout - Unified */
    --lnx-layout-max-width: 28rem;
    --lnx-layout-padding: var(--lnx-spacing-md);

    /* Transitions - Unified */
    --lnx-transition-fast: 150ms ease;
    --lnx-transition-normal: 250ms ease;

    /* ======================== */
    /* LEGACY ALIASES           */
    /* For backwards compatibility with old templates */
    /* ======================== */
    --color-primary: var(--lnx-color-primary);
    --color-primary-hover: var(--lnx-color-primary-hover);
    --color-bg-primary: var(--lnx-color-bg);
    --color-bg-secondary: var(--lnx-color-bg-page);
    --color-text-primary: var(--lnx-color-text);
    --color-text-secondary: var(--lnx-color-text-secondary);
    --color-border: var(--lnx-color-border);
    --color-accent: var(--lnx-color-accent);
    --font-display: var(--lnx-font-display);
    --font-body: var(--lnx-font-body);
    --text-xs: var(--lnx-text-xs);
    --text-sm: var(--lnx-text-sm);
    --text-base: var(--lnx-text-base);
    --text-lg: var(--lnx-text-lg);
    --text-xl: var(--lnx-text-xl);
    --text-2xl: var(--lnx-text-2xl);
    --text-3xl: var(--lnx-text-3xl);
    --text-4xl: var(--lnx-text-4xl);
    --spacing-xs: var(--lnx-spacing-xs);
    --spacing-sm: var(--lnx-spacing-sm);
    --spacing-md: var(--lnx-spacing-md);
    --spacing-lg: var(--lnx-spacing-lg);
    --spacing-xl: var(--lnx-spacing-xl);
    --spacing-2xl: var(--lnx-spacing-2xl);
    --radius-sm: var(--lnx-radius-sm);
    --radius-md: var(--lnx-radius-md);
    --radius-lg: var(--lnx-radius-lg);
    --radius-xl: var(--lnx-radius-xl);
    --radius-full: var(--lnx-radius-full);
    --shadow-sm: var(--lnx-shadow-sm);
    --shadow-md: var(--lnx-shadow-md);
    --shadow-lg: var(--lnx-shadow-lg);
    --layout-max-width: var(--lnx-layout-max-width);
    --layout-padding: var(--lnx-layout-padding);
    --transition-fast: var(--lnx-transition-fast);
    --transition-normal: var(--lnx-transition-normal);
}

/* ==================== */
/* BASE STYLES          */
/* ==================== */

body {
    font-family: var(--lnx-font-body);
    font-size: var(--lnx-text-base);
    color: var(--lnx-color-text);
    background-color: var(--lnx-color-bg-page);
    min-height: 100vh;
}

a {
    color: var(--lnx-color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==================== */
/* PAGE WRAPPER         */
/* ==================== */

.lnx-page,
.page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lnx-spacing-xl) var(--lnx-spacing-md);
    overflow-x: hidden;
    width: 100%;
}

/* ==================== */
/* PROFILE CONTAINER    */
/* ==================== */

.lnx-container,
.profile-container {
    width: var(--lnx-layout-max-width);
    max-width: calc(100vw - 2rem);
    background-color: var(--lnx-color-bg);
    border-radius: var(--lnx-radius-xl);
    padding: var(--lnx-spacing-lg);
    box-shadow: var(--lnx-shadow-lg);
}

/* ==================== */
/* LAYOUT STYLES        */
/* ==================== */

.lnx-layout-list,
.layout-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lnx-spacing-md);
}

.lnx-layout-list .lnx-block,
.layout-list .block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.lnx-layout-editorial,
.layout-editorial {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-lg);
}

.layout-editorial .editorial-content {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-lg);
}

.layout-grid-page {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-xl);
}

.layout-grid-page .grid-page-header {
    text-align: center;
}

.lnx-layout-grid,
.layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lnx-spacing-sm);
}

/* ==================== */
/* CONTENT AREA         */
/* ==================== */

.lnx-content {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

/* Override flex with grid when grid layout is active */
.lnx-content.lnx-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Make social_icons wrapper transparent so buttons get gap from parent */
.lnx-block--social_icons {
    display: contents;
}

/* ==================== */
/* HEADER / HERO AREA   */
/* ==================== */

.lnx-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
}

.lnx-header--left {
    align-items: flex-start;
    text-align: left;
}

.lnx-header--right {
    align-items: flex-end;
    text-align: right;
}

/* Profile photo */
.lnx-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--lnx-spacing-md);
    border: 4px solid white;
    box-shadow: var(--lnx-shadow-lg);
}

.lnx-photo--square {
    border-radius: 0;
}

.lnx-photo--rounded {
    border-radius: var(--lnx-radius-lg);
}

.lnx-photo--small {
    width: 80px;
    height: 80px;
}

.lnx-photo--medium {
    width: 120px;
    height: 120px;
}

.lnx-photo--large {
    width: 160px;
    height: 160px;
}

/* Title */
.lnx-title {
    font-family: var(--lnx-font-display);
    font-size: var(--lnx-font-size-title);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--lnx-spacing-xs);
    color: var(--lnx-color-text);
}

/* Subtitle / Tagline */
.lnx-subtitle {
    font-family: var(--lnx-font-tagline);
    font-size: var(--lnx-font-size-tagline);
    color: var(--lnx-color-text);
    opacity: 0.7;
    margin-bottom: var(--lnx-spacing-sm);
}

/* Bio text */
.lnx-bio {
    max-width: 100%;
    line-height: 1.6;
    font-family: var(--lnx-font-body);
    font-size: var(--lnx-font-size-body);
    color: var(--lnx-color-text);
    opacity: 0.8;
}

.lnx-bio p {
    margin-bottom: var(--lnx-spacing-sm);
}

.lnx-bio p:last-child {
    margin-bottom: 0;
}

/* ==================== */
/* HERO IMAGE SECTION   */
/* ==================== */

.lnx-hero {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: #4b5563;
}

.lnx-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3) 50%, transparent);
    pointer-events: none;
}

.lnx-hero__content {
    position: relative;
    z-index: 10;
    padding: var(--lnx-spacing-md);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.lnx-hero .lnx-title {
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lnx-hero .lnx-subtitle {
    color: white;
    font-style: italic;
    opacity: 0.8;
}

/* ==================== */
/* MARGIN UTILITIES     */
/* ==================== */

.lnx-mt-none, .margin-top-none { margin-top: 0; }
.lnx-mt-sm, .margin-top-small { margin-top: var(--lnx-spacing-sm); }
.lnx-mt-md, .margin-top-medium { margin-top: var(--lnx-spacing-md); }
.lnx-mt-lg, .margin-top-large { margin-top: var(--lnx-spacing-xl); }

.lnx-mb-none, .margin-bottom-none { margin-bottom: 0; }
.lnx-mb-sm, .margin-bottom-small { margin-bottom: var(--lnx-spacing-sm); }
.lnx-mb-md, .margin-bottom-medium { margin-bottom: var(--lnx-spacing-md); }
.lnx-mb-lg, .margin-bottom-large { margin-bottom: var(--lnx-spacing-xl); }

/* ==================== */
/* TEXT UTILITIES       */
/* ==================== */

.lnx-text-left, .text-left { text-align: left; }
.lnx-text-center, .text-center { text-align: center; }
.lnx-text-right, .text-right { text-align: right; }

.lnx-font-small, .font-small { font-size: var(--lnx-text-sm); }
.lnx-font-medium, .font-medium { font-size: var(--lnx-text-base); }
.lnx-font-large, .font-large { font-size: var(--lnx-text-lg); }

/* ==================== */
/* LEGACY: PROFILE HEADER */
/* ==================== */

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--lnx-spacing-xl);
    width: 100%;
}

.profile-header__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--lnx-spacing-md);
    border: 4px solid white;
    box-shadow: var(--lnx-shadow-lg);
}

.profile-header__title {
    font-family: var(--lnx-font-display);
    font-size: var(--lnx-text-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--lnx-spacing-xs);
    color: var(--lnx-color-text);
}

.profile-header__subtitle {
    font-size: var(--lnx-text-sm);
    color: var(--lnx-color-text);
    opacity: 0.7;
    margin-bottom: var(--lnx-spacing-sm);
}

.profile-header__bio {
    max-width: 100%;
    line-height: 1.6;
    font-size: var(--lnx-text-sm);
    color: var(--lnx-color-text);
    opacity: 0.8;
}

.profile-header__bio p {
    margin-bottom: var(--lnx-spacing-sm);
}

.profile-header__bio p:last-child {
    margin-bottom: 0;
}

/* ==================== */
/* BLOCK: HEADER        */
/* ==================== */

.lnx-block-header,
.block-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lnx-block-header--left,
.block-header.text-left { align-items: flex-start; }
.lnx-block-header--right,
.block-header.text-right { align-items: flex-end; }

.lnx-block-header__cover,
.block-header__cover {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: var(--lnx-radius-lg);
    margin-bottom: var(--lnx-spacing-lg);
}

.lnx-block-header__cover-image,
.block-header__cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lnx-block-header__photo-wrapper,
.block-header__photo-wrapper {
    margin-bottom: var(--lnx-spacing-md);
}

.lnx-block-header__photo,
.block-header__photo {
    object-fit: cover;
}

.lnx-block-header__photo--circle,
.block-header__photo--circle {
    border-radius: 50%;
}

.lnx-block-header__photo--square,
.block-header__photo--square {
    border-radius: 0;
}

.lnx-block-header__photo--rounded,
.block-header__photo--rounded {
    border-radius: var(--lnx-radius-lg);
}

.lnx-block-header__photo--small,
.block-header__photo--small {
    width: 80px;
    height: 80px;
}

.lnx-block-header__photo--medium,
.block-header__photo--medium {
    width: 120px;
    height: 120px;
}

.lnx-block-header__photo--large,
.block-header__photo--large {
    width: 160px;
    height: 160px;
}

.lnx-block-header__title,
.block-header__title {
    font-family: var(--lnx-font-display);
    font-size: var(--lnx-text-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--lnx-spacing-xs);
}

.lnx-block-header__subtitle,
.block-header__subtitle {
    font-size: var(--lnx-text-lg);
    color: var(--lnx-color-text-secondary);
}

/* ==================== */
/* BLOCK: BIO TEXT      */
/* ==================== */

.lnx-block-bio,
.block-bio-text__content {
    line-height: 1.7;
}

.lnx-block-bio p,
.block-bio-text__content p {
    margin-bottom: var(--lnx-spacing-md);
}

.lnx-block-bio p:last-child,
.block-bio-text__content p:last-child {
    margin-bottom: 0;
}

.lnx-block-bio a,
.block-bio-text__content a {
    color: var(--lnx-color-accent);
    text-decoration: underline;
}

.lnx-block-bio strong,
.block-bio-text__content strong {
    font-weight: 600;
}

/* ==================== */
/* BLOCK: LINK          */
/* ==================== */

.lnx-block-link,
.block-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border-radius: var(--lnx-radius-lg);
    font-weight: 500;
    text-decoration: none;
    transition: transform var(--lnx-transition-fast), box-shadow var(--lnx-transition-fast);
}

.lnx-block-link:hover,
.block-link:hover {
    transform: scale(1.02);
    box-shadow: var(--lnx-shadow-md);
    text-decoration: none;
}

.lnx-block-link--solid,
.block-link--solid {
    background-color: var(--lnx-color-primary);
    color: white;
}

.lnx-block-link--outline,
.block-link--outline {
    background-color: transparent;
    border: 2px solid var(--lnx-color-primary);
    color: var(--lnx-color-primary);
}

.lnx-block-link--ghost,
.block-link--ghost {
    background-color: var(--lnx-color-bg-page);
    color: var(--lnx-color-text);
}

.lnx-block-link--pill,
.block-link--pill {
    background-color: var(--lnx-color-primary);
    color: white;
    border-radius: var(--lnx-radius-full);
}

.lnx-block-link--featured {
    padding: 1.25rem;
    font-size: var(--lnx-text-lg);
}

.lnx-block-link__thumbnail,
.block-link__thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--lnx-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.lnx-block-link__thumbnail img,
.block-link__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lnx-block-link__icon,
.block-link__icon {
    font-size: 1.25em;
    flex-shrink: 0;
}

.lnx-block-link__icon--platform,
.block-link__icon--platform {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lnx-block-link__icon--platform svg,
.block-link__icon--platform svg {
    width: 20px;
    height: 20px;
}

.lnx-block-link__content,
.block-link__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lnx-block-link__label,
.block-link__label {
    font-weight: 500;
}

.lnx-block-link__description,
.block-link__description {
    font-size: var(--lnx-text-sm);
    opacity: 0.8;
}

/* ==================== */
/* BLOCK: DIVIDER       */
/* ==================== */

.lnx-block-divider,
.block-divider {
    width: var(--divider-width, 100%);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lnx-spacing-md);
}

.lnx-block-divider__line,
.block-divider__line {
    flex: 1;
    border: none;
    border-top: 1px solid var(--lnx-color-border);
}

.lnx-block-divider__line--thin,
.block-divider__line--thin { border-top-width: 1px; }
.lnx-block-divider__line--medium,
.block-divider__line--medium { border-top-width: 2px; }
.lnx-block-divider__line--thick,
.block-divider__line--thick { border-top-width: 4px; }

.lnx-block-divider--dotted .lnx-block-divider__line,
.block-divider--dotted .block-divider__line {
    border-top-style: dotted;
}

.lnx-block-divider--dashed .lnx-block-divider__line,
.block-divider--dashed .block-divider__line {
    border-top-style: dashed;
}

.lnx-block-divider--space,
.block-divider--space {
    height: var(--lnx-spacing-xl);
}

.lnx-block-divider__icon,
.block-divider__icon {
    font-size: 1.5rem;
}

.lnx-block-divider__label,
.block-divider__label {
    font-size: var(--lnx-text-sm);
    color: var(--lnx-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ==================== */
/* BLOCK: SOCIAL ICONS  */
/* ==================== */

.lnx-block-social,
.block-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lnx-spacing-md);
}

.lnx-block-social--left,
.align-left { justify-content: flex-start; }
.lnx-block-social--center,
.align-center { justify-content: center; }
.lnx-block-social--right,
.align-right { justify-content: flex-end; }
.lnx-block-social--between,
.align-space_between { justify-content: space-between; }

.lnx-block-social__link,
.block-social-icons__link {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-xs);
    color: var(--lnx-color-text);
    transition: opacity var(--lnx-transition-fast);
}

.lnx-block-social__link:hover,
.block-social-icons__link:hover {
    opacity: 0.7;
    text-decoration: none;
}

.lnx-block-social__icon,
.block-social-icons__icon {
    display: flex;
}

.lnx-block-social__icon svg,
.block-social-icons__icon svg {
    width: 1em;
    height: 1em;
}

.lnx-block-social--small .lnx-block-social__icon,
.block-social-icons--small .block-social-icons__icon { font-size: 1.25rem; }
.lnx-block-social--medium .lnx-block-social__icon,
.block-social-icons--medium .block-social-icons__icon { font-size: 1.5rem; }
.lnx-block-social--large .lnx-block-social__icon,
.block-social-icons--large .block-social-icons__icon { font-size: 2rem; }

.lnx-block-social__label,
.block-social-icons__label {
    font-size: var(--lnx-text-sm);
    display: none;
}

.lnx-block-social--with-labels .lnx-block-social__label,
.block-social-icons--icons_labels .block-social-icons__label {
    display: inline;
}

/* Social icons as buttons in list layout */
.lnx-layout-list .lnx-block-social,
.layout-list .block-social-icons {
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
    width: 100%;
}

.lnx-layout-list .lnx-block-social__link,
.layout-list .block-social-icons__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lnx-spacing-sm);
    width: 100%;
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    border-radius: var(--lnx-radius-xl);
    font-weight: 500;
    text-decoration: none;
    background-color: var(--lnx-color-primary);
    color: white;
    transition: transform var(--lnx-transition-fast), box-shadow var(--lnx-transition-fast);
}

.lnx-layout-list .lnx-block-social__link:hover,
.layout-list .block-social-icons__link:hover {
    transform: scale(1.02);
    box-shadow: var(--lnx-shadow-md);
    opacity: 1;
    background-color: var(--lnx-color-primary-hover);
}

.lnx-layout-list .lnx-block-social__label,
.layout-list .block-social-icons__label {
    display: inline;
    font-size: var(--lnx-text-base);
}

/* ==================== */
/* BLOCK: MESSENGER     */
/* ==================== */

.lnx-block-messenger,
.block-messenger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lnx-spacing-sm);
    width: 100%;
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    border-radius: var(--lnx-radius-xl);
    font-weight: 500;
    text-decoration: none;
    transition: transform var(--lnx-transition-fast);
}

.lnx-block-messenger:hover,
.block-messenger:hover {
    transform: scale(1.02);
    box-shadow: var(--lnx-shadow-md);
    text-decoration: none;
}

.lnx-block-messenger--branded,
.block-messenger--branded {
    background-color: var(--messenger-color);
    color: white;
}

.lnx-block-messenger--minimal,
.block-messenger--minimal {
    background-color: var(--lnx-color-bg-page);
    color: var(--lnx-color-text);
}

.lnx-block-messenger--icon-only,
.block-messenger--icon_only {
    width: auto;
    padding: var(--lnx-spacing-md);
    border-radius: 50%;
    background-color: var(--messenger-color);
    color: white;
}

.lnx-block-messenger--icon-only .lnx-block-messenger__label,
.block-messenger--icon_only .block-messenger__label {
    display: none;
}

.lnx-block-messenger__icon,
.block-messenger__icon {
    display: flex;
}

.lnx-block-messenger__icon svg,
.block-messenger__icon svg {
    width: 1.25em;
    height: 1.25em;
}

/* ==================== */
/* GRID BLOCKS          */
/* ==================== */

.lnx-grid-container,
.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
    gap: var(--lnx-spacing-sm);
}

.lnx-grid-item,
.grid-item {
    display: block;
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--lnx-radius-xl);
    grid-column: span var(--span, 1);
}

.lnx-grid-item img,
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--lnx-transition-normal);
}

.lnx-grid-item__image,
.grid-item__image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--lnx-transition-normal);
}

.lnx-grid-item:hover img,
.grid-item:hover img,
.lnx-grid-item:hover .lnx-grid-item__image,
.grid-item:hover .grid-item__image {
    transform: scale(1.05);
}

.lnx-grid-item__overlay,
.grid-item__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--lnx-spacing-md);
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
}

/* ==================== */
/* PROSE (Markdown)     */
/* ==================== */

.lnx-prose h1, .lnx-prose h2, .lnx-prose h3, .lnx-prose h4,
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: var(--lnx-font-display);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.lnx-prose h1, .prose h1 { font-size: var(--lnx-text-2xl); }
.lnx-prose h2, .prose h2 { font-size: var(--lnx-text-xl); }
.lnx-prose h3, .prose h3 { font-size: var(--lnx-text-lg); }

.lnx-prose ul, .lnx-prose ol,
.prose ul, .prose ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.lnx-prose li,
.prose li {
    margin-bottom: 0.25em;
}

.lnx-prose blockquote,
.prose blockquote {
    border-left: 3px solid var(--lnx-color-border);
    padding-left: 1em;
    font-style: italic;
    color: var(--lnx-color-text-secondary);
}

.lnx-prose code,
.prose code {
    background-color: var(--lnx-color-bg-page);
    padding: 0.125em 0.25em;
    border-radius: var(--lnx-radius-sm);
    font-size: 0.9em;
}

.lnx-prose pre,
.prose pre {
    background-color: var(--lnx-color-bg-page);
    padding: 1em;
    border-radius: var(--lnx-radius-md);
    overflow-x: auto;
}

/* ==================== */
/* THEME: DEFAULT       */
/* ==================== */

.lnx-theme-default .lnx-container {
    padding-top: 80px;
    overflow: visible;
    margin-top: 60px;
}

.lnx-theme-default .lnx-header,
.theme-default__header {
    text-align: center;
    margin-bottom: 0;
    position: relative;
}

.lnx-theme-default .lnx-photo,
.theme-default__photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 auto var(--lnx-spacing-md);
    border: none;
    box-shadow: var(--lnx-shadow-lg);
    position: relative;
    z-index: 10;
    margin-top: -145px;
}

.lnx-theme-default .lnx-title,
.theme-default__title {
    font-size: var(--lnx-font-size-title);
    font-weight: 700;
    margin-bottom: var(--lnx-spacing-xs);
    color: var(--lnx-color-text);
}

.lnx-theme-default .lnx-subtitle,
.theme-default__subtitle {
    font-size: var(--lnx-font-size-tagline);
    color: var(--lnx-color-text);
    opacity: 0.7;
    padding-bottom: var(--lnx-spacing-md);
    margin-bottom: var(--lnx-spacing-md);
    position: relative;
    display: block;
    width: 100%;
}

/* Separator line after subtitle */
.lnx-theme-default .lnx-subtitle::after,
.theme-default__subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--lnx-color-border);
}

.lnx-theme-default .lnx-bio,
.theme-default__bio {
    text-align: left;
    margin-top: var(--lnx-spacing-md);
    margin-bottom: var(--lnx-spacing-lg);
    font-size: var(--lnx-font-size-body);
    line-height: 1.6;
    color: var(--lnx-color-text);
    opacity: 0.8;
}

.lnx-theme-default .lnx-content,
.theme-default__links {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

/* Grid layout override for default theme */
.lnx-theme-default .lnx-content.lnx-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* ==================== */
/* THEME: BOXY          */
/* ==================== */

.lnx-theme-boxy .lnx-container,
.profile-container--boxy {
    padding: 0;
    overflow: hidden;
    border-radius: 0;
}

.lnx-theme-boxy .lnx-hero,
.theme-boxy__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: #4b5563;
    display: flex;
    align-items: flex-end;
}

.lnx-theme-boxy .lnx-hero__gradient,
.theme-boxy__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3) 50%, transparent);
    pointer-events: none;
}

.lnx-theme-boxy .lnx-hero__content,
.theme-boxy__overlay-text {
    position: relative;
    z-index: 10;
    padding: var(--lnx-spacing-md);
    color: white;
}

.lnx-theme-boxy .lnx-hero .lnx-title,
.theme-boxy__title {
    font-size: var(--lnx-font-size-title);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--lnx-spacing-xs);
    color: white;
}

.lnx-theme-boxy .lnx-hero .lnx-subtitle,
.theme-boxy__subtitle {
    font-size: var(--lnx-font-size-tagline);
    font-style: normal;
    opacity: 0.8;
    color: white;
}

.lnx-theme-boxy .lnx-body,
.theme-boxy__content {
    padding: var(--lnx-spacing-lg);
}

.lnx-theme-boxy .lnx-bio,
.theme-boxy__bio {
    margin-bottom: var(--lnx-spacing-lg);
    font-size: var(--lnx-font-size-body);
    line-height: 1.6;
    color: var(--lnx-color-text);
    opacity: 0.8;
}

.lnx-theme-boxy .lnx-content,
.theme-boxy__links {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

/* Grid layout override for boxy theme */
.lnx-theme-boxy .lnx-content.lnx-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* ==================== */
/* THEME: BIG IMAGE     */
/* ==================== */

.lnx-theme-big-image .lnx-container,
.profile-container--big-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    max-width: 56rem;
}

.lnx-theme-big-image .lnx-side-photo,
.theme-big-image__photo {
    background-size: cover;
    background-position: center;
    background-color: #6b7280;
}

.lnx-theme-big-image .lnx-body,
.theme-big-image__content {
    padding: var(--lnx-spacing-lg);
    background-color: var(--lnx-color-bg);
    display: flex;
    flex-direction: column;
}

.lnx-theme-big-image .lnx-title,
.theme-big-image__title {
    font-size: var(--lnx-font-size-title);
    font-weight: 700;
    margin-bottom: var(--lnx-spacing-xs);
    color: var(--lnx-color-text);
}

.lnx-theme-big-image .lnx-subtitle,
.theme-big-image__subtitle {
    font-size: var(--lnx-font-size-tagline);
    color: var(--lnx-color-text);
    opacity: 0.7;
    margin-bottom: var(--lnx-spacing-md);
}

.lnx-theme-big-image .lnx-bio,
.theme-big-image__bio {
    margin-bottom: var(--lnx-spacing-md);
    font-size: var(--lnx-font-size-body);
    line-height: 1.6;
    color: var(--lnx-color-text);
    opacity: 0.8;
}

.lnx-theme-big-image .lnx-content,
.theme-big-image__links {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

/* Override for grid layout in Big Image theme */
.lnx-theme-big-image .lnx-content.lnx-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Responsive: stack on smaller screens (including editor preview) */
@media (max-width: 768px) {
    .lnx-theme-big-image .lnx-container,
    .profile-container--big-image {
        grid-template-columns: 1fr;
    }

    .lnx-theme-big-image .lnx-side-photo,
    .theme-big-image__photo {
        aspect-ratio: 16 / 9;
        min-height: auto;
        max-height: 300px;
    }
}

/* ==================== */
/* GRID LAYOUT BUTTONS  */
/* ==================== */

/* Make all buttons in grid layout uniform square size with bottom-left labels */
.lnx-layout-grid .lnx-block-link,
.lnx-layout-grid .block-link,
.layout-grid .block-link {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    overflow: hidden;
}

/* Icon stays centered */
.lnx-layout-grid .lnx-block-link__icon,
.lnx-layout-grid .block-link__icon,
.layout-grid .block-link__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Content wrapper positioned at bottom */
.lnx-layout-grid .lnx-block-link__content,
.lnx-layout-grid .block-link__content,
.layout-grid .block-link__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--lnx-spacing-sm);
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    flex-direction: column;
    align-items: flex-start;
}

.lnx-layout-grid .lnx-block-link__label,
.lnx-layout-grid .block-link__label,
.layout-grid .block-link__label {
    font-size: var(--lnx-text-sm);
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: white;
}

.lnx-layout-grid .lnx-block-link__description,
.lnx-layout-grid .block-link__description,
.layout-grid .block-link__description {
    display: none;
}

/* Social icons as square buttons in grid layout */
.lnx-layout-grid .lnx-block-social,
.lnx-layout-grid .block-social-icons,
.layout-grid .block-social-icons {
    display: contents;
}

.lnx-layout-grid .lnx-block-social__link,
.lnx-layout-grid .block-social-icons__link,
.layout-grid .block-social-icons__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--lnx-radius-lg);
    font-weight: 500;
    text-decoration: none;
    background-color: var(--lnx-color-primary);
    color: white;
    overflow: hidden;
    transition: transform var(--lnx-transition-fast), box-shadow var(--lnx-transition-fast);
}

.lnx-layout-grid .lnx-block-social__link:hover,
.lnx-layout-grid .block-social-icons__link:hover,
.layout-grid .block-social-icons__link:hover {
    transform: scale(1.02);
    box-shadow: var(--lnx-shadow-md);
    opacity: 1;
    background-color: var(--lnx-color-primary-hover);
}

.lnx-layout-grid .lnx-block-social__icon,
.lnx-layout-grid .block-social-icons__icon,
.layout-grid .block-social-icons__icon {
    font-size: 1.5rem;
}

.lnx-layout-grid .lnx-block-social__label,
.lnx-layout-grid .block-social-icons__label,
.layout-grid .block-social-icons__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--lnx-spacing-sm);
    font-size: var(--lnx-text-sm);
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* ==================== */
/* CIRCLES LAYOUT       */
/* ==================== */

.lnx-content.lnx-layout-circles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lnx-spacing-sm);
}

.lnx-circle-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--lnx-radius-full);
    background-color: var(--lnx-color-primary);
    color: white;
    transition: transform var(--lnx-transition-fast), box-shadow var(--lnx-transition-fast), background-color var(--lnx-transition-fast);
    flex-shrink: 0;
    text-decoration: none;
}

.lnx-circle-link svg {
    width: 20px;
    height: 20px;
}

.lnx-circle-link:hover {
    transform: scale(1.1);
    box-shadow: var(--lnx-shadow-md);
    background-color: var(--lnx-color-primary-hover);
}

/* Hide the block wrapper in circles layout to prevent extra gaps */
.lnx-layout-circles .lnx-block {
    display: contents;
}

/* ==================== */
/* LNX FOOTER           */
/* ==================== */

.lnx-footer {
    position: fixed;
    bottom: var(--lnx-spacing-md);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.lnx-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    font-size: var(--lnx-text-xs);
    color: #666;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--lnx-radius-full);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all var(--lnx-transition-fast);
    pointer-events: auto;
}

.lnx-footer__link:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.lnx-footer__logo {
    height: 1.2em;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* ==================== */
/* FUNCTION/TOOL CARD   */
/* ==================== */

.lnx-function-card {
    width: 100%;
    background-color: var(--lnx-color-bg-page);
    border: 1px solid var(--lnx-color-border);
    border-radius: var(--lnx-radius-lg);
    overflow: hidden;
}

.lnx-function-card__header {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-sm);
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    background-color: var(--lnx-color-bg);
    border-bottom: 1px solid var(--lnx-color-border);
}

.lnx-function-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lnx-color-primary);
}

.lnx-function-card__icon svg {
    width: 20px;
    height: 20px;
}

.lnx-function-card__name {
    font-family: var(--lnx-font-display);
    font-size: var(--lnx-text-lg);
    font-weight: 600;
    color: var(--lnx-color-text);
}

.lnx-function-card__description {
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    color: var(--lnx-color-text-secondary);
    font-size: var(--lnx-text-sm);
    line-height: 1.5;
    margin: 0;
    border-bottom: 1px solid var(--lnx-color-border);
}

.lnx-function-card__params {
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
}

.lnx-function-card__params-header {
    font-size: var(--lnx-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lnx-color-text-secondary);
    margin-bottom: var(--lnx-spacing-sm);
    padding-bottom: var(--lnx-spacing-xs);
    border-bottom: 1px solid var(--lnx-color-border);
}

.lnx-function-card__params-list {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

.lnx-function-card__param {
    padding: var(--lnx-spacing-sm);
    background-color: var(--lnx-color-bg);
    border-radius: var(--lnx-radius-sm);
}

.lnx-function-card__param-header {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-xs);
    flex-wrap: wrap;
}

.lnx-function-card__param-name {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-sm);
    font-weight: 600;
    color: var(--lnx-color-text);
}

.lnx-function-card__param-required {
    color: #ef4444;
    font-weight: 700;
}

.lnx-function-card__param-type {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-xs);
    color: var(--lnx-color-primary);
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: var(--lnx-radius-sm);
    margin-left: auto;
}

.lnx-function-card__param-desc {
    font-size: var(--lnx-text-xs);
    color: var(--lnx-color-text-secondary);
    margin-top: var(--lnx-spacing-xs);
    line-height: 1.4;
}

.lnx-function-card__required-note {
    font-size: var(--lnx-text-xs);
    color: var(--lnx-color-text-secondary);
    margin-top: var(--lnx-spacing-sm);
    font-style: italic;
}

.lnx-function-card__endpoint {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-sm);
    padding: var(--lnx-spacing-sm) var(--lnx-spacing-lg);
    background-color: var(--lnx-color-bg);
    border-top: 1px solid var(--lnx-color-border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-xs);
    overflow-x: auto;
}

.lnx-function-card__method {
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: var(--lnx-radius-sm);
    text-transform: uppercase;
    flex-shrink: 0;
}

.lnx-function-card__method--get {
    background-color: #10b981;
    color: white;
}

.lnx-function-card__method--post {
    background-color: #3b82f6;
    color: white;
}

.lnx-function-card__method--put {
    background-color: #f59e0b;
    color: white;
}

.lnx-function-card__method--patch {
    background-color: #8b5cf6;
    color: white;
}

.lnx-function-card__method--delete {
    background-color: #ef4444;
    color: white;
}

.lnx-function-card__url {
    color: var(--lnx-color-text-secondary);
    word-break: break-all;
}

/* ==================== */
/* COLLAPSIBLE FUNCTION */
/* ==================== */

/* Force function blocks to be full width in list layout */
.lnx-layout-list .lnx-function,
.lnx-layout-list .lnx-block--link .lnx-function {
    width: 100% !important;
    min-width: 100%;
}

.lnx-layout-list .lnx-block--link button.lnx-function__trigger,
.lnx-layout-list button.lnx-function__trigger {
    width: 100% !important;
    min-width: 100%;
    box-sizing: border-box;
}

.lnx-function {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* The trigger button - uses existing block-link styles but needs adjustments */
.lnx-function__trigger {
    width: 100%;
    cursor: pointer;
    position: relative;
    justify-content: center;
    border: none;
    background: inherit;
    flex-shrink: 0;
}

/* Ensure button styles override the trigger defaults */
.lnx-function__trigger.lnx-block-link--solid {
    background-color: var(--lnx-color-primary);
    color: white;
}

.lnx-function__trigger.lnx-block-link--outline {
    background-color: transparent;
    border: 2px solid var(--lnx-color-primary);
    color: var(--lnx-color-primary);
}

.lnx-function__trigger.lnx-block-link--ghost {
    background-color: var(--lnx-color-bg-page);
    color: var(--lnx-color-text);
}

.lnx-function__trigger.lnx-block-link--pill {
    background-color: var(--lnx-color-primary);
    color: white;
    border-radius: var(--lnx-radius-full);
}

/* Adjust button content - centered like regular links */
.lnx-function__trigger .lnx-block-link__content {
    align-items: center;
}

/* Chevron icon styling - positioned absolutely so it doesn't affect centering */
.lnx-function__chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--lnx-transition-fast);
    flex-shrink: 0;
}

/* Rotate chevron when expanded - maintain vertical centering */
.lnx-function--expanded .lnx-function__chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* Details panel - hidden by default */
.lnx-function__details {
    display: none;
    background-color: var(--lnx-color-bg-page);
    border: 1px solid var(--lnx-color-border);
    border-top: none;
    border-radius: 0 0 var(--lnx-radius-lg) var(--lnx-radius-lg);
    overflow: hidden;
}

/* Show details when expanded */
.lnx-function--expanded .lnx-function__details {
    display: block;
}

/* Adjust button border radius when expanded */
.lnx-function--expanded .lnx-function__trigger {
    border-radius: var(--lnx-radius-lg) var(--lnx-radius-lg) 0 0;
}

/* Pill style keeps rounded top corners when expanded */
.lnx-function--expanded .lnx-function__trigger.lnx-block-link--pill {
    border-radius: var(--lnx-radius-full) var(--lnx-radius-full) 0 0;
}

/* Details panel rounded corners match the trigger style */
.lnx-function--expanded .lnx-function__trigger.lnx-block-link--pill + .lnx-function__details {
    border-radius: 0 0 var(--lnx-radius-xl) var(--lnx-radius-xl);
}

/* Description section */
.lnx-function__description {
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    color: var(--lnx-color-text-secondary);
    font-size: var(--lnx-text-sm);
    line-height: 1.5;
    border-bottom: 1px solid var(--lnx-color-border);
}

/* Parameters section */
.lnx-function__params {
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
}

.lnx-function__params-header {
    font-size: var(--lnx-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lnx-color-text-secondary);
    margin-bottom: var(--lnx-spacing-sm);
    padding-bottom: var(--lnx-spacing-xs);
    border-bottom: 1px solid var(--lnx-color-border);
}

.lnx-function__params-list {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

.lnx-function__param {
    padding: var(--lnx-spacing-sm);
    background-color: var(--lnx-color-bg);
    border-radius: var(--lnx-radius-sm);
}

.lnx-function__param-header {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-xs);
    flex-wrap: wrap;
}

.lnx-function__param-name {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-sm);
    font-weight: 600;
    color: var(--lnx-color-text);
}

.lnx-function__param-required {
    color: #ef4444;
    font-weight: 700;
}

.lnx-function__param-type {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-xs);
    color: var(--lnx-color-primary);
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: var(--lnx-radius-sm);
    margin-left: auto;
}

.lnx-function__param-desc {
    font-size: var(--lnx-text-xs);
    color: var(--lnx-color-text-secondary);
    margin-top: var(--lnx-spacing-xs);
    line-height: 1.4;
}

.lnx-function__required-note {
    font-size: var(--lnx-text-xs);
    color: var(--lnx-color-text-secondary);
    margin-top: var(--lnx-spacing-sm);
    font-style: italic;
}

/* Endpoint section */
.lnx-function__endpoint {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-sm);
    padding: var(--lnx-spacing-sm) var(--lnx-spacing-lg);
    background-color: var(--lnx-color-bg);
    border-top: 1px solid var(--lnx-color-border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-xs);
    overflow-x: auto;
}

.lnx-function__method {
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: var(--lnx-radius-sm);
    text-transform: uppercase;
    flex-shrink: 0;
}

.lnx-function__method--get {
    background-color: #10b981;
    color: white;
}

.lnx-function__method--post {
    background-color: #3b82f6;
    color: white;
}

.lnx-function__method--put {
    background-color: #f59e0b;
    color: white;
}

.lnx-function__method--patch {
    background-color: #8b5cf6;
    color: white;
}

.lnx-function__method--delete {
    background-color: #ef4444;
    color: white;
}

.lnx-function__url {
    color: var(--lnx-color-text-secondary);
    word-break: break-all;
}

/* ==================== */
/* FUNCTION MODAL       */
/* ==================== */

/* Modal container - hidden by default */
.lnx-function-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.lnx-function-modal.lnx-function-modal--visible {
    display: block;
}

/* Backdrop - click to close */
.lnx-function-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* Modal content box */
.lnx-function-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: var(--lnx-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modal header */
.lnx-function-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    border-bottom: 1px solid #e5e7eb;
}

.lnx-function-modal__title {
    font-family: var(--lnx-font-display);
    font-size: var(--lnx-text-lg);
    font-weight: 600;
    color: #111827;
}

.lnx-function-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    border-radius: var(--lnx-radius-sm);
    transition: background-color var(--lnx-transition-fast);
}

.lnx-function-modal__close:hover {
    background-color: #f3f4f6;
    color: #111827;
}

/* Modal description */
.lnx-function-modal__description {
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
    color: #374151;
    font-size: var(--lnx-text-sm);
    line-height: 1.5;
    border-bottom: 1px solid #e5e7eb;
    margin: 0;
}

/* Modal parameters */
.lnx-function-modal__params {
    padding: var(--lnx-spacing-md) var(--lnx-spacing-lg);
}

.lnx-function-modal__params-header {
    font-size: var(--lnx-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #374151;
    margin-bottom: var(--lnx-spacing-sm);
    padding-bottom: var(--lnx-spacing-xs);
    border-bottom: 1px solid #e5e7eb;
}

.lnx-function-modal__params-list {
    display: flex;
    flex-direction: column;
    gap: var(--lnx-spacing-sm);
}

.lnx-function-modal__param {
    padding: var(--lnx-spacing-sm);
    background-color: #f9fafb;
    border-radius: var(--lnx-radius-sm);
}

.lnx-function-modal__param-header {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-xs);
    flex-wrap: wrap;
}

.lnx-function-modal__param-name {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-sm);
    font-weight: 600;
    color: #111827;
}

.lnx-function-modal__param-required {
    color: #ef4444;
    font-weight: 700;
}

.lnx-function-modal__param-type {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-xs);
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: var(--lnx-radius-sm);
    margin-left: auto;
}

.lnx-function-modal__param-desc {
    font-size: var(--lnx-text-xs);
    color: #4b5563;
    margin-top: var(--lnx-spacing-xs);
    line-height: 1.4;
}

.lnx-function-modal__required-note {
    font-size: var(--lnx-text-xs);
    color: #6b7280;
    margin-top: var(--lnx-spacing-sm);
    font-style: italic;
}

/* Modal endpoint */
.lnx-function-modal__endpoint {
    display: flex;
    align-items: center;
    gap: var(--lnx-spacing-sm);
    padding: var(--lnx-spacing-sm) var(--lnx-spacing-lg);
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--lnx-text-xs);
    overflow-x: auto;
}

.lnx-function-modal__method {
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: var(--lnx-radius-sm);
    text-transform: uppercase;
    flex-shrink: 0;
}

.lnx-function-modal__method--get {
    background-color: #10b981;
    color: white;
}

.lnx-function-modal__method--post {
    background-color: #3b82f6;
    color: white;
}

.lnx-function-modal__method--put {
    background-color: #f59e0b;
    color: white;
}

.lnx-function-modal__method--patch {
    background-color: #8b5cf6;
    color: white;
}

.lnx-function-modal__method--delete {
    background-color: #ef4444;
    color: white;
}

.lnx-function-modal__url {
    color: #4b5563;
    word-break: break-all;
}

/* ==================== */
/* FUNCTION GRID TILE   */
/* ==================== */

.lnx-function-grid-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lnx-spacing-sm);
    aspect-ratio: 1;
    width: 100%;
    padding: var(--lnx-spacing-md);
    border: none;
    border-radius: var(--lnx-radius-lg);
    background-color: var(--lnx-color-primary);
    color: white;
    cursor: pointer;
    transition: transform var(--lnx-transition-fast), box-shadow var(--lnx-transition-fast);
    text-align: center;
    overflow: hidden;
}

.lnx-function-grid-tile:hover {
    transform: scale(1.02);
    box-shadow: var(--lnx-shadow-md);
}

.lnx-function-grid-tile svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.lnx-function-grid-tile__label {
    font-size: var(--lnx-text-xs);
    font-weight: 500;
    line-height: 1.2;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}