.webplus-health-badge{--health-color:#22c55e;display:inline-flex;border:1px solid color-mix(in srgb,var(--health-color)45%,transparent);background:color-mix(in srgb,var(--health-color)14%,var(--surface,#111));border-radius:0;align-items: center;gap:.4rem;min-height:2rem;padding:.2rem .55rem;transition:border-color .15s,background .15s;text-decoration:none!important}.webplus-health-badge:hover{border-color:var(--health-color);background:color-mix(in srgb,var(--health-color)24%,var(--surface,#111))}.webplus-health-badge__heart{display:inline-flex;color:var(--health-color);transform-origin:center center;animation:1.1s ease-in-out infinite webplus-health-beat;flex-shrink:0;justify-content:center;align-items: center;width:14px;height:14px;line-height:0}.webplus-health-badge--warn .webplus-health-badge__heart{animation-duration:.85s}.webplus-health-badge--bad .webplus-health-badge__heart{animation-duration:.65s}.webplus-health-badge__svg{display:block;overflow:visible;width:100%;height:100%}.webplus-health-badge__score{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:.9rem;font-weight:750;line-height:1;color:var(--health-color)!important}@keyframes webplus-health-beat{0%,to{transform:scale(1)}12%{transform:scale(1.35)}24%{transform:scale(1)}36%{transform:scale(1.22)}48%{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.webplus-health-badge__heart{animation:none}}.webplus-share__grid{display:grid;gap:1.25rem}@media (min-width:960px){.webplus-share__grid{grid-template-columns:minmax(0,1fr)minmax(280px,340px);align-items: start}.webplus-share__preview{position:sticky;top:1rem}}.webplus-share__fields{display:flex;flex-direction:column;gap:1rem;min-width:0}.webplus-share__preview-label{margin:0 0 .5rem;font-size:.8rem;font-weight:650}.webplus-og-preview__tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.65rem}.webplus-og-preview__tab{appearance:none;border:1px solid var(--gereq-line,#d4d4d8);background:var(--surface,#fff);color:inherit;font:inherit;cursor:pointer;border-radius:0;padding:.3rem .55rem;font-size:.78rem;font-weight:600}.webplus-og-preview__tab.is-active{border-color:var(--primary,#2563eb);background:color-mix(in srgb,var(--primary,#2563eb)12%,transparent)}.webplus-og-preview__fallbacks{font-size:var(--grq-text-sm);display:flex;flex-direction:column;gap:.15rem;margin:0 0 .55rem}.webplus-og-card{color:#050505;overflow:hidden;background:#fff;border:1px solid #e4e6eb;font-family:Helvetica,Arial,sans-serif}.webplus-og-card__chrome{display:flex;align-items: center;gap:.55rem;padding:.65rem .75rem .35rem}.webplus-og-card__avatar{background:linear-gradient(135deg,#1877f2,#42b72a);border-radius:50%;flex-shrink:0;width:36px;height:36px}.webplus-og-card__poster{font-size:.85rem;font-weight:700;line-height:1.2}.webplus-og-card__meta{color:#65676b;font-size:.72rem}.webplus-og-card__media{position:relative;aspect-ratio:1.91;overflow:hidden;background:#f0f2f5}.webplus-og-card__media img{object-fit:cover;display:block;width:100%;height:100%}.webplus-og-card__media--compact{aspect-ratio:16/9}.webplus-og-card__placeholder{position:absolute;display:grid;color:#8a8d91;text-align:center;place-items: center;padding:.75rem;font-size:.78rem;inset:0}.webplus-og-card__body{background:#f0f2f5;padding:.65rem .75rem .8rem}.webplus-og-card__host{color:#65676b;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.15rem;font-size:.72rem}.webplus-og-card__title{color:#050505;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;-webkit-box-orient:vertical;font-size:.95rem;font-weight:700;line-height:1.25}.webplus-og-card__desc{color:#65676b;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;-webkit-box-orient:vertical;margin-top:.2rem;font-size:.8rem}.webplus-og-card--messenger{background:0 0;border:none;padding:.35rem 0}.webplus-og-card__bubble{overflow:hidden;background:#fff;border:1px solid #e4e6eb;border-radius:18px;max-width:280px;margin-left:auto;box-shadow:0 1px 2px #00000014}.webplus-og-card--messenger .webplus-og-card__body{background:#fff}.webplus-og-card--twitter{background:#fff;border-color:#cfd9de;border-radius:16px}.webplus-og-card--twitter .webplus-og-card__body{background:#fff}.webplus-og-card--twitter .webplus-og-card__host{text-transform:none;color:#536471}.webplus-og-card--twitter.is-large .webplus-og-card__media{aspect-ratio:2}.webplus-og-card__row{display:grid;grid-template-columns:120px minmax(0,1fr);min-height:100px}.webplus-og-card__thumb{overflow:hidden;background:#eff3f4}.webplus-og-card__thumb img{object-fit:cover;display:block;width:100%;height:100%}.webplus-og-card__thumb.is-empty{min-height:100px}.webplus-og-card--linkedin{border-color:#e0e0e0}.webplus-og-card--linkedin .webplus-og-card__media{aspect-ratio:1.91}.webplus-og-card--linkedin .webplus-og-card__body{background:#fff}.webplus-og-card--linkedin .webplus-og-card__host{text-transform:none;color:#0009}

/* color-mix-fix */
/**
 * Soft semantic fills — appended AFTER Tailwind/LightningCSS minify.
 *
 * LightningCSS breaks `color-mix(..., var(--x) N%, var(--y))` into solid
 * `var(--x)` fallbacks inside incomplete `@supports` blocks. This file is
 * concatenated raw onto the built CSS so soft tints stay soft.
 */

.badge--ok {
    background: color-mix(in srgb, var(--success, #4ade80) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--success, #4ade80) 36%, var(--border));
    color: color-mix(in srgb, var(--success, #4ade80) 72%, var(--text));
}
.badge--warn {
    background: color-mix(in srgb, var(--warning, #fbbf24) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--warning, #fbbf24) 36%, var(--border));
    color: color-mix(in srgb, var(--warning, #fbbf24) 72%, var(--text));
}
.badge--danger {
    background: color-mix(in srgb, var(--danger, #f87171) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--danger, #f87171) 34%, var(--border));
    color: color-mix(in srgb, var(--danger, #f87171) 78%, var(--text));
}
.badge--muted {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--surface));
}
.badge--info {
    background: color-mix(in srgb, #38bdf8 16%, var(--surface));
    border-color: color-mix(in srgb, #38bdf8 34%, var(--border));
    color: color-mix(in srgb, #38bdf8 68%, var(--text));
}
.badge--signal {
    background: color-mix(in srgb, var(--primary) 78%, var(--surface));
}

.status-chip--tone-success {
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.status-chip--tone-warn,
.status-chip--tone-warning {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 38%, var(--border));
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--surface));
}
.status-chip--tone-danger {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 34%, var(--border));
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--surface));
    color: color-mix(in srgb, var(--danger, #ef4444) 72%, var(--text));
}
.status-chip--tone-info {
    border-color: color-mix(in srgb, var(--info, #3b82f6) 34%, var(--border));
    background: color-mix(in srgb, var(--info, #3b82f6) 10%, var(--surface));
}
.status-chip--tone-indigo {
    border-color: color-mix(in srgb, #6366f1 36%, var(--border));
    background: color-mix(in srgb, #6366f1 10%, var(--surface));
}

.table .badge--ok,
.table .badge--warn,
.table .badge--danger,
.table .badge--info,
.table .badge--muted {
    color: color-mix(in srgb, var(--primary) 40%, var(--text));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}

.table .badge--ok {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.table .badge--warn {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}
.table .badge--danger {
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
    background: var(--danger-bg, color-mix(in srgb, var(--danger) 10%, var(--surface)));
}

.bulk-bar {
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

/* Row actions: surface + tinted icon (no color-mix fills — LightningCSS solidifies them) */
.table__action-btn--primary,
.table__action-btns > form > button.table__action-btn--primary,
.table__action-btns > a.table__action-btn--primary,
.table__action-btn--success,
.table__action-btns > form > button.table__action-btn--success,
.table__action-btns > a.table__action-btn--success,
.table__action-btn--warn,
.table__action-btns > form > button.table__action-btn--warn,
.table__action-btns > a.table__action-btn--warn,
.table__action-btn--danger,
.table__action-btns > form > button.table__action-btn--danger,
.table__action-btns > a.table__action-btn--danger,
.table__action-btns > .table__action-form > button {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
.table__action-btn--primary,
.table__action-btns > form > button.table__action-btn--primary,
.table__action-btns > a.table__action-btn--primary {
    color: var(--primary) !important;
}
.table__action-btn--success,
.table__action-btns > form > button.table__action-btn--success,
.table__action-btns > a.table__action-btn--success {
    color: var(--success) !important;
}
.table__action-btn--warn,
.table__action-btns > form > button.table__action-btn--warn,
.table__action-btns > a.table__action-btn--warn {
    color: var(--warning) !important;
}
.table__action-btn--danger,
.table__action-btns > form > button.table__action-btn--danger,
.table__action-btns > a.table__action-btn--danger,
.table__action-btns > .table__action-form > button {
    color: var(--danger) !important;
}

.btn--soft {
    --btn-bg: color-mix(in srgb, var(--primary) 28%, var(--surface));
    --btn-hover-bg: color-mix(in srgb, var(--primary) 40%, var(--surface));
    --btn-active-bg: color-mix(in srgb, var(--primary) 48%, var(--surface));
}
.btn--success {
    --btn-bg: color-mix(in srgb, var(--success) 16%, var(--surface));
    --btn-fg: color-mix(in srgb, var(--success) 82%, var(--text));
    --btn-border: color-mix(in srgb, var(--success) 38%, var(--border));
    --btn-hover-bg: color-mix(in srgb, var(--success) 24%, var(--surface));
    --btn-hover-fg: color-mix(in srgb, var(--success) 82%, var(--text));
    --btn-hover-border: color-mix(in srgb, var(--success) 48%, var(--border));
}
.btn--warning {
    --btn-bg: color-mix(in srgb, var(--warning) 16%, var(--surface));
    --btn-fg: color-mix(in srgb, var(--warning) 82%, var(--text));
    --btn-border: color-mix(in srgb, var(--warning) 40%, var(--border));
    --btn-hover-bg: color-mix(in srgb, var(--warning) 24%, var(--surface));
    --btn-hover-fg: color-mix(in srgb, var(--warning) 82%, var(--text));
    --btn-hover-border: color-mix(in srgb, var(--warning) 50%, var(--border));
}
.btn--primary:hover {
    --btn-hover-bg: color-mix(in srgb, var(--primary) 88%, #fff);
    --btn-hover-border: color-mix(in srgb, var(--primary) 88%, #fff);
    --btn-active-bg: color-mix(in srgb, var(--primary) 82%, var(--text));
    --btn-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}
.btn--danger:hover {
    --btn-hover-bg: color-mix(in srgb, var(--danger) 88%, #fff);
    --btn-hover-border: color-mix(in srgb, var(--danger) 88%, #fff);
    --btn-active-bg: color-mix(in srgb, var(--danger) 82%, #000);
}
.btn--danger-outline {
    --btn-border: color-mix(in srgb, var(--danger) 45%, var(--border));
    --btn-hover-bg: var(--danger-bg, color-mix(in srgb, var(--danger) 10%, var(--surface)));
}

.customer-edit__tab.is-active,
.design-tabs [aria-selected="true"] {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.customer-edit__tab--ok.is-active {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.customer-edit__tab--warn.is-active {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.customer-edit__hero {
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent, var(--primary)) 10%, transparent), transparent 55%),
        var(--surface);
}