/*!
 * LoginArmor v2.0.0 - Admin design system
 * Light theme (Apple Security / High-End Light Mode)
 * Author: Fabrice Ducarme - wpformation.com
 * License: GPLv2 or later
 */

/* ============================================================================ */
/* === LOT 18 SHELL ========================================================== */
/* ============================================================================ */

body.login-armor-page {
	background: var(--la-paper);
	color: var(--la-slate-900);
	font-family: var(--la-font-sans);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
body.login-armor-page #wpcontent { padding-left: 0; background: var(--la-paper); }
body.login-armor-page #wpfooter { display: none; }
body.login-armor-page .la-root * { box-sizing: border-box; }

.la-root { min-width: 0; }

/* Topbar (scoped under #la-root to win over legacy .la-topbar base rule lower in file — Task 14 will remove the legacy) */
#la-root .la-topbar {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 16px 32px;
	background: #fff;
	border-bottom: 1px solid var(--la-slate-200);
	position: sticky;
	top: 32px; /* WP admin bar height desktop */
	z-index: 10;
}
#la-root .la-topbar > .la-topnav { justify-self: end; }
@media screen and (max-width: 782px) {
	#la-root .la-topbar {
		display: flex;
		top: 46px;
		padding: 12px 16px;
		gap: 12px;
		flex-wrap: wrap;
	}
}

/* Brand — navigates back to Overview (V10.15). Pure click area, no
   underline / no text color change on hover — user explicitly doesn't
   want a visible link affordance (V10.15.1). #la-root prefix + all
   pseudo-classes to beat WP admin's `a:hover { text-decoration: underline }`. */
#la-root .la-brand,
#la-root .la-brand:link,
#la-root .la-brand:visited,
#la-root .la-brand:hover,
#la-root .la-brand:focus,
#la-root .la-brand:focus-visible,
#la-root .la-brand:active {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	box-shadow: none;
}
#la-root .la-brand:focus-visible {
	outline: 2px solid var(--la-emerald, #10b981);
	outline-offset: 2px;
	border-radius: 6px;
}
/* <img> is a replaced element — ::after does not render on it. Wrap in span. */
.la-brand__logo-wrap {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}
.la-brand__logo {
	width: 40px;
	height: 40px;
	display: block;
}
.la-brand__logo-wrap::after {
	content: '';
	position: absolute;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--la-emerald);
	right: -2px; top: -2px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
	animation: la-brand-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes la-brand-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
	70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.la-brand__text { display: flex; flex-direction: column; line-height: 1; }
.la-brand__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--la-slate-900);
}
.la-brand__tag {
	font-size: 9px;
	color: var(--la-slate-500);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 3px;
}

/* Pill nav */
.la-topnav { display: flex; gap: 2px; flex-wrap: wrap; }
#la-root .la-topnav__item,
#la-root .la-topnav__item:link,
#la-root .la-topnav__item:visited {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--la-slate-600);
	text-decoration: none;
	border-radius: var(--la-r-btn-lg);
	transition: background-color 0.15s, color 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}
#la-root .la-topnav__item:hover,
#la-root .la-topnav__item:focus-visible {
	background: var(--la-slate-100);
	color: var(--la-slate-900);
	outline: none;
}
#la-root .la-topnav__item.is-active,
#la-root .la-topnav__item.is-active:link,
#la-root .la-topnav__item.is-active:visited {
	background: var(--la-slate-900);
	color: #fff;
}
#la-root .la-topnav__item.is-active:hover,
#la-root .la-topnav__item.is-active:focus-visible {
	background: var(--la-slate-900);
	color: #fff;
}
.la-topnav__badge {
	display: inline-block;
	background: var(--la-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 8px;
	line-height: 1.4;
}

/* Quick jump ⌘K trigger + .la-topbar__right removed in Lot 18 V10.5 —
   the button was non-actionable (no handler, no palette, no shortcut).
   A real command palette is scoped for a future Lot if needed. */

/* Content container */
#la-root .la-content {
	padding: 28px 32px 60px;
	max-width: 1400px;
}

/* ---------- Scoped reset ---------- */
#la-root,
#la-root * {
    box-sizing: border-box;
    color-scheme: light only;
}

#la-root {
    /* Common tokens */
    --la-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Helvetica Neue', Arial, sans-serif;
    --la-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
                    Menlo, Consolas, 'Liberation Mono', monospace;

    --la-radius-sm: 3px;
    --la-radius:    6px;
    --la-radius-lg: 10px;

    --la-space-1: 4px;
    --la-space-2: 8px;
    --la-space-3: 12px;
    --la-space-4: 16px;
    --la-space-5: 24px;
    --la-space-6: 32px;

    /* Light theme colors */
    --la-bg-0:          #F0F0F1;
    --la-bg-1:          #FFFFFF;
    --la-bg-2:          #F6F7F7;
    --la-bg-3:          #EDEDED;

    --la-border-subtle: #F0F0F1;
    --la-border:        #DCDCDE;
    --la-border-strong: #C3C4C7;

    --la-text:          #1D2327;
    --la-text-muted:    #50575E;
    --la-text-dim:      #8C8F94;

    --la-normal:        #2E7D32;
    --la-elevated:      #B26A00;
    --la-attack:        #B32D2E;
    --la-critical:      #991B1B;
    --la-info:          #2271B1;

    --la-accent:        #E84A2E;
    --la-accent-hover:  #C73D24;

    font-family: var(--la-font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--la-text);
    background: var(--la-bg-0);
    min-height: 100vh;
}

#la-root h1, #la-root h2, #la-root h3,
#la-root h4, #la-root p, #la-root ul {
    margin: 0;
    padding: 0;
}

#la-root button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

#la-root a {
    text-decoration: none;
}

#la-root a:hover {
    text-decoration: underline;
}

/* Content links (prose inside cards, meta text links) — explicit class.
   The global a { color: var(--la-info) } rule was colorizing every anchor
   blue, including button-styled anchors on dark backgrounds (action banner
   CTA, primary-btn, danger-btn, score CTA). Button anchor variants declare
   their own color explicitly — use .la-link for prose links that should
   keep the WP info blue. */
#la-root .la-link {
    color: var(--la-info);
}
#la-root .la-link:hover {
    text-decoration: underline;
}

/* ---------- Layout ---------- */
#la-root {
    padding: 0;
}

.la-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--la-space-4) var(--la-space-6);
    background: var(--la-bg-1);
    border-bottom: 1px solid var(--la-border);
    font-size: 13px;
}

.la-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--la-space-3);
    color: var(--la-text);
}

.la-topbar__logo {
    flex-shrink: 0;
    display: block;
}

.la-topbar__logo-img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
}

.la-topbar__brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.la-topbar__brand-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--la-text);
    letter-spacing: -0.2px;
}

.la-topbar__brand-tagline {
    font-family: var(--la-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--la-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.la-topbar__meta {
    display: flex;
    align-items: center;
    gap: var(--la-space-4);
    color: var(--la-text-muted);
    font-family: var(--la-font-mono);
    font-size: 12px;
}

/* Tabs */
#la-root .la-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--la-space-6);
    background: var(--la-bg-1);
    border-bottom: 1px solid var(--la-border);
}

#la-root .la-tabs__link {
    padding: var(--la-space-3) var(--la-space-4);
    color: #64748B;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid transparent;
    transition: all 150ms;
    text-decoration: none;
}

#la-root .la-tabs__link:hover {
    color: var(--la-text);
    text-decoration: none;
}

#la-root .la-tabs__link[aria-current="page"] {
    color: #000000;
    font-weight: 700;
    border-bottom: 3px solid var(--la-accent);
}

/* Layout: main + sidebar */
.la-layout {
    display: flex;
    gap: 0;
    padding: var(--la-space-5) var(--la-space-6);
}

.la-main {
    flex: 1;
    min-width: 0;
    max-width: 1000px;
}

#la-root[data-la-active-tab="settings"] .la-main {
    padding-bottom: 100px;
}

/* ---------- Sidebar (Lot 18 — container removed from page.php; .la-sidebar__title
   and below still used inside admin/views/sidebar/*.php which now mount inside
   the new .la-guide wrapper via dual-selector rules) ---------- */

.la-sidebar__title {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    padding: 0 0 14px 0;
    border-bottom: 2px solid var(--la-accent, #E84A2E);
    letter-spacing: -0.01em;
}

.la-sidebar__section:first-of-type {
    margin-top: 24px;
}

.la-sidebar__section {
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid #F1F5F9;
}

.la-sidebar__section:last-child {
    border-bottom: none;
}

/* Accordion (<details>/<summary>) — native, no JS. */
details.la-sidebar__section {
    /* Reset the browser default padding introduced by <details>. */
}

/* Hide the browser-default triangle marker. */
details.la-sidebar__section > summary {
    list-style: none;
}

details.la-sidebar__section > summary::-webkit-details-marker {
    display: none;
}

.la-sidebar__section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
    margin: 0;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.la-sidebar__section-title:hover,
details[open] > .la-sidebar__section-title {
    color: var(--la-accent, #E84A2E);
}

.la-sidebar__section-title:focus-visible {
    outline: 2px solid var(--la-accent, #E84A2E);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Chevron on the right side of the summary. */
.la-sidebar__section-title::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transform-origin: center;
    transition: transform 180ms ease;
    flex-shrink: 0;
    opacity: 0.5;
}

details[open] > .la-sidebar__section-title::after {
    transform: rotate(-135deg) translate(-2px, -2px);
    opacity: 1;
}

/* Body content shown when [open]. Padding-bottom restores the original breathing room. */
details.la-sidebar__section[open] > :not(summary) {
    padding-bottom: 4px;
}

details.la-sidebar__section[open] {
    padding-bottom: 12px;
}

.la-sidebar__text {
    font-size: 13px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 8px 0;
    padding: 0;
}

.la-sidebar__text:last-child {
    margin-bottom: 0;
}

.la-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.la-sidebar__list li {
    position: relative;
    padding: 6px 0 6px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    border-bottom: 1px solid #F8FAFC;
}

.la-sidebar__list li:last-child {
    border-bottom: none;
}

.la-sidebar__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00F59B;
}

.la-sidebar__list li strong {
    color: #1E293B;
    font-weight: 600;
}

/* Tab-specific backgrounds */
#la-root[data-la-active-tab="settings"] {
    --la-bg-0: #FFFFFF;
}

#la-root[data-la-active-tab="overview"] {
    --la-bg-0: #F8FAFC;
}

.la-placeholder {
    padding: var(--la-space-6) var(--la-space-5);
    background: var(--la-bg-1);
    border: 1px dashed var(--la-border);
    border-radius: var(--la-radius);
    color: var(--la-text-muted);
    text-align: center;
    font-family: var(--la-font-mono);
    font-size: 12px;
}

/* Buttons */
.la-btn,
#la-root a.la-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--la-space-1);
    padding: 6px 14px;
    background: var(--la-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--la-radius);
    font-family: var(--la-font-mono);
    font-size: 13px;
    font-weight: 500;
    transition: background 150ms;
}

.la-btn:hover,
#la-root a.la-btn:hover {
    background: var(--la-accent-hover);
    color: #FFFFFF;
    text-decoration: none;
}

.la-btn--primary {
    background: var(--la-accent);
    color: #FFFFFF;
    border: 1px solid var(--la-accent);
}

.la-btn--primary:hover {
    background: var(--la-accent-hover);
    border-color: var(--la-accent-hover);
    color: #FFFFFF;
}

.la-btn--secondary {
    background: transparent;
    border: 1px solid var(--la-border-strong);
    color: var(--la-text);
}

.la-btn--secondary:hover {
    background: var(--la-bg-2);
    border-color: var(--la-text-muted);
    color: var(--la-text);
}

.la-btn--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--la-text-muted);
    font-weight: 400;
}

.la-btn--ghost:hover {
    background: var(--la-bg-2);
    color: var(--la-text);
}

.la-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inputs */
.la-input {
    width: 100%;
    max-width: 420px;
    padding: 8px 12px;
    background: var(--la-bg-0);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    color: var(--la-text);
    font-family: var(--la-font-sans);
    font-size: 13px;
    transition: border-color 150ms, box-shadow 150ms;
}

.la-input--mono {
    font-family: var(--la-font-mono);
}

.la-input:focus {
    outline: none;
    border-color: var(--la-accent);
    box-shadow: 0 0 0 2px rgba(232, 74, 46, 0.25);
}

/* ---------- Dashboard cards ---------- */
.la-card {
    background: var(--la-bg-1);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    padding: var(--la-space-5);
    margin-bottom: var(--la-space-4);
}

/* ---------- Health Bento Grid (Overview Block 1) ---------- */
/*
 * 8 modules: Hide Login · Brute Force · Hardening · Detection
 *            Activity  · 2FA         · Login Headers · Salt Rotation
 * Desktop 4×2, tablet 3×3 (last row half-empty — acceptable), small tablet 2×4, mobile 1×8.
 */
.la-bento-health {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: var(--la-space-4);
    background: #E2E8F0;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

@media screen and (max-width: 1280px) {
    .la-bento-health {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .la-bento-health {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .la-bento-health {
        grid-template-columns: 1fr;
    }
}

.la-bento-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #FFFFFF;
    transition: background-color 150ms;
}

#la-root a.la-bento-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

#la-root a.la-bento-card:hover {
    text-decoration: none;
    color: inherit;
}

.la-bento-card:hover {
    background: #F8FAFC;
}

.la-bento-card__indicator {
    position: absolute;
    top: 8px;
    right: 8px;
}

.la-bento-card__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.la-bento-card__dot--on {
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    animation: la-dot-pulse 2.5s ease-in-out infinite;
}

.la-bento-card__dot--off {
    background: #F59E0B;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

@keyframes la-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 12px rgba(16, 185, 129, 0.3); }
}

.la-bento-card__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.la-bento-card--on .la-bento-card__icon {
    stroke: #10B981;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.35));
}

.la-bento-card--off .la-bento-card__icon {
    stroke: #F59E0B;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
    opacity: 0.7;
}

.la-bento-card--off .la-bento-card__name {
    opacity: 0.7;
}

.la-bento-card__name {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
}

.la-bento-card__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
    margin-left: auto;
    letter-spacing: 0.02em;
}

.la-bento-card__badge--on {
    color: #059669;
    background: #ECFDF5;
}

.la-bento-card__badge--off {
    color: #D97706;
    background: #FFFBEB;
}

.la-bento-card__badge--amber {
    background: #FEF3C7;
    color: #92400E;
}

/* ---------- Security Pulse Card (Overview Block 2) ---------- */
.la-pulse-card {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

.la-pulse-card__grid {
    display: grid;
    grid-template-columns: 260px 1fr;
}

@media screen and (max-width: 700px) {
    .la-pulse-card__grid {
        grid-template-columns: 1fr;
    }
}

.la-pulse-card__hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 28px;
    border-right: 1px solid #E2E8F0;
}

.la-pulse-card__hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.la-pulse-card__hero-number {
    font-size: 72px;
    font-weight: 900;
    color: #000000;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}

.la-pulse-card__hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #00F59B;
    animation: la-dot-pulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

.la-pulse-card__hero-label {
    font-size: 11px;
    font-weight: 800;
    color: #10B981;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.la-pulse-card__hero-sub {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.la-pulse-card__hero-sub svg {
    width: 14px;
    height: 14px;
    stroke: #10B981;
}

.la-pulse-card__hero-checked {
    margin-top: 12px;
    font-size: 11px;
    color: #94A3B8;
    font-family: var(--la-font-mono);
}

.la-pulse-card__chart {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.la-pulse-card__chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.la-pulse-card__chart-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-pulse-card__counters {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #64748B;
}

.la-pulse-card__counters strong {
    color: #0F172A;
    font-weight: 700;
}

/* Area chart SVG */
.la-area-chart {
    width: 100%;
    height: 90px;
    display: block;
    border-radius: 6px;
}

.la-area-chart__pulse {
    animation: la-dot-pulse 2.5s ease-in-out infinite;
}

/* ---------- Summary text (Overview) ---------- */
#la-root .la-summary-text {
    margin: 0;
    padding: 14px 24px;
    border-top: 1px solid #E2E8F0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

/* ---------- Threat bar (dominant, full-container width) ---------- */
.la-status {
    display: flex;
    align-items: center;
    gap: var(--la-space-4);
    min-height: 72px;
    padding: var(--la-space-4) var(--la-space-5);
    border: 1px solid #E2E8F0;
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--la-bg-1);
    margin-bottom: var(--la-space-4);
    font-size: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.la-status__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--la-text-muted);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.la-status__label {
    font-family: var(--la-font-mono);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--la-text);
}

.la-status__context {
    color: var(--la-text-muted);
    font-size: 13px;
    font-family: var(--la-font-mono);
}

.la-status--normal   { border-left-color: var(--la-normal); background: color-mix(in srgb, var(--la-normal) 8%, var(--la-bg-1)); }
.la-status--normal   .la-status__dot { background: var(--la-normal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--la-normal) 20%, transparent); }
.la-status--elevated { border-left-color: var(--la-elevated); background: color-mix(in srgb, var(--la-elevated) 10%, var(--la-bg-1)); }
.la-status--elevated .la-status__dot { background: var(--la-elevated); box-shadow: 0 0 0 4px color-mix(in srgb, var(--la-elevated) 25%, transparent); }
.la-status--attack   { border-left-color: var(--la-attack); background: color-mix(in srgb, var(--la-attack) 10%, var(--la-bg-1)); }
.la-status--attack   .la-status__dot { background: var(--la-attack); box-shadow: 0 0 0 4px color-mix(in srgb, var(--la-attack) 25%, transparent); }
.la-status--critical { border-left-color: var(--la-critical); background: color-mix(in srgb, var(--la-critical) 12%, var(--la-bg-1)); }
.la-status--critical .la-status__dot { background: var(--la-critical); box-shadow: 0 0 0 4px color-mix(in srgb, var(--la-critical) 30%, transparent); }

/* ---------- Summary card (stats + sparkline combined) ---------- */
.la-summary__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, max-content)) 1fr;
    gap: var(--la-space-5);
    align-items: end;
}

.la-stat__number {
    font-family: var(--la-font-mono);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--la-text);
}

.la-stat__label {
    margin-top: var(--la-space-2);
    color: var(--la-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.la-summary__spark {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

@media screen and (max-width: 900px) {
    .la-summary__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .la-summary__spark {
        grid-column: 1 / -1;
    }
}

/* ---------- Alert card (active incidents) ---------- */
.la-alert {
    background: var(--la-bg-1);
    border: 1px solid #E2E8F0;
    border-left-width: 4px;
    border-left-color: var(--la-text-muted);
    border-radius: 10px;
    padding: var(--la-space-4) var(--la-space-5);
    margin-bottom: var(--la-space-3);
    transition: box-shadow 150ms, border-color 150ms;
}

.la-alert:last-child {
    margin-bottom: 0;
}

.la-alert:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: #CBD5E1;
}

.la-alert--low      { border-left-color: var(--la-text-muted); }
.la-alert--medium   { border-left-color: var(--la-elevated); }
.la-alert--high     { border-left-color: var(--la-attack); }
.la-alert--critical { border-left-color: var(--la-critical); }

.la-alert__header {
    display: flex;
    align-items: center;
    gap: var(--la-space-3);
    padding-bottom: var(--la-space-3);
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: var(--la-space-3);
}

.la-alert__sev {
    font-family: var(--la-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--la-radius-sm);
    color: var(--la-text);
    background: var(--la-bg-2);
    text-transform: uppercase;
}

.la-alert--low      .la-alert__sev { color: var(--la-text-muted); }
.la-alert--medium   .la-alert__sev { color: var(--la-elevated); background: color-mix(in srgb, var(--la-elevated) 15%, transparent); }
.la-alert--high     .la-alert__sev { color: var(--la-attack);   background: color-mix(in srgb, var(--la-attack) 15%, transparent); }
.la-alert--critical .la-alert__sev { color: var(--la-critical); background: color-mix(in srgb, var(--la-critical) 15%, transparent); }

.la-alert__pattern {
    font-family: var(--la-font-mono);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--la-text);
    flex: 1;
}

.la-alert__time {
    font-family: var(--la-font-mono);
    font-size: 12px;
    color: var(--la-text-muted);
}

.la-alert__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-4);
    margin-bottom: var(--la-space-3);
    font-family: var(--la-font-mono);
    font-size: 13px;
    color: var(--la-text-muted);
}

.la-alert__metrics strong {
    color: var(--la-text);
    font-weight: 700;
    font-size: 15px;
}

.la-alert__details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--la-space-1) var(--la-space-4);
    margin: 0 0 var(--la-space-4) 0;
    font-size: 13px;
}

.la-alert__details dt {
    color: var(--la-text-muted);
    font-family: var(--la-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: center;
}

.la-alert__details dd {
    margin: 0;
    color: var(--la-text);
    font-family: var(--la-font-mono);
}

.la-alert__footer {
    display: flex;
    gap: var(--la-space-2);
    flex-wrap: wrap;
}

/* ---------- Badge (status pill) ---------- */
.la-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 2px 8px;
    font-family: var(--la-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: var(--la-radius-sm);
    background: var(--la-bg-2);
    color: var(--la-text-muted);
}

.la-badge--ok   { color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; }
.la-badge--fail { color: #DC2626; background: #FEF2F2; border: 1px solid #FECACA; }
.la-badge--lock { color: #9F1239; background: #FFF1F2; border: 1px solid #FECDD3; }

/* Data table */
.la-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.la-table thead th {
    padding: var(--la-space-2) var(--la-space-3);
    text-align: left;
    background: var(--la-bg-3);
    border-bottom: 1px solid var(--la-border);
    color: var(--la-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.la-table tbody td {
    padding: var(--la-space-2) var(--la-space-3);
    border-bottom: 1px solid var(--la-border-subtle);
    vertical-align: middle;
    font-family: var(--la-font-mono);
}

.la-table tbody tr:nth-child(even) td {
    background: var(--la-bg-1);
}

.la-table tbody tr:hover td {
    background: var(--la-bg-2);
}

/* ---------- Card header (shared) ---------- */
.la-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: calc(var(--la-space-5) * -1) calc(var(--la-space-5) * -1) var(--la-space-4);
    padding: var(--la-space-3) var(--la-space-5);
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
    border-radius: 12px 12px 0 0;
}

.la-card-header h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--la-text-muted);
}

.la-card-header h2 .la-muted {
    color: var(--la-text-dim);
    font-weight: 400;
}

.la-card-header__right {
    display: flex;
    align-items: center;
    gap: var(--la-space-3);
}

.la-card-header__link {
    font-family: var(--la-font-mono);
    font-size: 12px;
    color: var(--la-text-muted);
    text-decoration: none;
}

.la-card-header__link:hover {
    color: var(--la-accent);
}

/* ---------- Sparkline (compact, inside summary card) ---------- */
.la-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
}

.la-sparkline__bar {
    flex: 1 1 0;
    min-height: 2px;
    background: var(--la-text-dim);
    border-radius: 2px 2px 0 0;
    transition: background 150ms;
}

.la-sparkline__bar:hover {
    background: var(--la-text-muted);
}

.la-sparkline__bar--now {
    background: var(--la-accent);
}

.la-sparkline__bar--now:hover {
    background: var(--la-accent-hover);
}

.la-sparkline-axis {
    display: flex;
    justify-content: space-between;
    font-family: var(--la-font-mono);
    font-size: 10px;
    color: var(--la-text-dim);
    padding-top: var(--la-space-1);
}

.la-sparkline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    font-family: var(--la-font-mono);
    font-size: 12px;
    color: var(--la-text-dim);
    border: 1px dashed var(--la-border-subtle);
    border-radius: var(--la-radius-sm);
}

/* ---------- Live events (card, row = time + badge + ip + user + ago) ---------- */
.la-live-events {
    font-family: var(--la-font-mono);
    font-size: 13px;
}

.la-live-events__header {
    display: grid;
    grid-template-columns: 70px 55px 140px 1fr 70px;
    gap: var(--la-space-3);
    padding: 7px 16px;
    font-size: 10px;
    font-weight: 800;
    color: #64748B;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px solid #E2E8F0;
    background: #F1F5F9;
}

.la-live-events__row {
    display: grid;
    grid-template-columns: 70px 55px 140px 1fr 70px;
    gap: var(--la-space-3);
    padding: 8px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: var(--la-text);
    align-items: center;
    transition: background 0.3s ease;
}

.la-live-events__row:last-child {
    border-bottom: none;
}

.la-live-events__row:hover {
    background: #F8FAFC;
}

.la-live-events__time {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    color: #94A3B8;
    font-size: 11px;
}

.la-live-events__ago {
    text-align: right;
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    color: #94A3B8;
    font-size: 10px;
}

.la-live-events__ip {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 11px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 4px;
}

.la-live-events__globe {
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    stroke: #94A3B8 !important;
    fill: none !important;
    flex-shrink: 0;
    display: inline-block;
}

.la-live-events__user {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #F1F5F9;
    padding: 1px 8px;
    border-radius: 4px;
    max-width: max-content;
}

.la-live-events__empty {
    padding: var(--la-space-5);
    text-align: center;
    color: var(--la-text-muted);
    font-family: var(--la-font-mono);
    font-size: 13px;
}

/* Pull card padding from live events rows so they stretch edge-to-edge */
.la-card--flush > .la-live-events__header,
.la-card--flush > .la-live-events,
.la-card--flush > .la-card-header + .la-live-events__header,
.la-card--flush > .la-card-header + .la-live-events__header + .la-live-events {
    margin-left: calc(var(--la-space-5) * -1);
    margin-right: calc(var(--la-space-5) * -1);
}

.la-card--flush > .la-live-events {
    margin-bottom: calc(var(--la-space-5) * -1);
}

.la-card--flush > .la-live-events__header {
    padding-left: var(--la-space-5);
    padding-right: var(--la-space-5);
}

.la-card--flush > .la-live-events .la-live-events__row {
    padding-left: var(--la-space-5);
    padding-right: var(--la-space-5);
}

/* ---------- Buttons used in Overview ---------- */
.la-btn--xs {
    padding: 4px 10px;
    font-size: 11px;
    background: transparent;
    color: var(--la-text-muted);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
}

.la-btn--xs:hover {
    background: var(--la-bg-2);
    color: var(--la-text);
    border-color: var(--la-border-strong);
}

.la-btn[disabled],
.la-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Filters row (Incidents + Events tabs) ---------- */
.la-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--la-space-3);
    padding: var(--la-space-3) var(--la-space-4);
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin-bottom: var(--la-space-4);
    align-items: end;
}

.la-filters label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--la-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--la-text-muted);
}

.la-filters select,
.la-filters input[type="text"] {
    min-width: 140px;
    padding: 6px 8px;
    font-family: var(--la-font-mono);
    font-size: 12px;
    background: var(--la-bg-1);
    color: var(--la-text);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
}

.la-filters__actions {
    display: flex;
    gap: var(--la-space-2);
    margin-left: auto;
    align-items: center;
}

/* ---------- Pagination ---------- */
.la-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--la-space-4);
    padding-top: var(--la-space-3);
    border-top: 1px solid #E2E8F0;
    font-family: var(--la-font-mono);
    font-size: 12px;
    color: var(--la-text-muted);
}

.la-pagination__links {
    display: flex;
    gap: var(--la-space-2);
}

.la-pagination__links a,
.la-pagination__links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius-sm);
    background: var(--la-bg-1);
    color: var(--la-text);
    text-decoration: none;
}

.la-pagination__links a:hover {
    background: var(--la-bg-2);
    border-color: var(--la-border-strong);
}

.la-pagination__links .la-pagination__current {
    background: var(--la-accent);
    color: #fff;
    border-color: var(--la-accent);
}

/* ---------- Incident drill-down ---------- */
.la-drill__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--la-space-4);
}

.la-drill__back {
    font-family: var(--la-font-mono);
    font-size: 12px;
    color: var(--la-text-muted);
    text-decoration: none;
}

.la-drill__back:hover {
    color: var(--la-accent);
}

.la-drill__timeline {
    font-family: var(--la-font-mono);
    font-size: 12px;
    max-height: 400px;
    overflow-y: auto;
    background: #F8FAFC;
    padding: var(--la-space-3);
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}

.la-drill__timeline-row {
    display: grid;
    grid-template-columns: 180px 60px 140px 1fr;
    gap: var(--la-space-3);
    padding: 4px 0;
    border-bottom: 1px dashed var(--la-border-subtle);
    color: var(--la-text);
}

.la-drill__timeline-row:last-child {
    border-bottom: none;
}

.la-drill__ua-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--la-font-mono);
    font-size: 11px;
    color: var(--la-text-muted);
}

.la-drill__ua-list li {
    padding: 4px 0;
    border-bottom: 1px dashed var(--la-border-subtle);
    word-break: break-all;
}

.la-drill__ua-list li:last-child {
    border-bottom: none;
}

/* ---------- Protection tab — status grid ---------- */
.la-protection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media screen and (max-width: 700px) {
    .la-protection-grid {
        grid-template-columns: 1fr;
    }
}

.la-protection-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    transition: border-color 150ms, box-shadow 150ms;
}

.la-protection-item:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.la-protection-item--on {
    border-left: 3px solid #10B981;
}

.la-protection-item--off {
    border-left: 3px solid #F59E0B;
}

.la-protection-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.la-protection-item__icon svg {
    width: 18px;
    height: 18px;
    stroke: #475569;
}

.la-protection-item--on .la-protection-item__icon svg {
    stroke: #10B981;
}

.la-protection-item--off .la-protection-item__icon svg {
    stroke: #F59E0B;
}

.la-protection-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-protection-item__info strong {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.la-protection-item__status {
    font-size: 12px;
    font-weight: 600;
}

.la-protection-item__status--on {
    color: #059669;
}

.la-protection-item__status--off {
    color: #D97706;
}

.la-protection-item__detail {
    font-size: 11px;
    color: #64748B;
    font-family: var(--la-font-mono);
}

#la-root .la-protection-item__action {
    font-size: 12px;
    font-weight: 600;
    color: var(--la-info);
}

#la-root .la-protection-item__action:hover {
    color: var(--la-accent);
}

/* ---------- Toast notifications ---------- */
/*
 * V2.1.2 hotfix: previously top:48px right:20px which landed on top of the
 * LoginArmor admin tabs nav (Réglages, Activité, etc.) — text became
 * unreadable behind the dark Réglages tab. Switched to bottom-right
 * (Gutenberg snackbar convention) and bumped z-index above any future
 * sticky-bar / nav element.
 */
.la-toast-zone {
    position: fixed;
    bottom: 24px;
    right: 24px;
    top: auto;
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--la-space-2);
    pointer-events: none;
    max-width: calc(100vw - 48px);
}

.la-toast {
    padding: var(--la-space-3) var(--la-space-4);
    background: var(--la-bg-1);
    color: var(--la-text);
    border: 1px solid var(--la-border);
    border-left: 3px solid var(--la-accent);
    border-radius: var(--la-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: var(--la-font-mono);
    font-size: 12px;
    animation: la-toast-in 200ms ease-out;
    pointer-events: auto;
}

.la-toast--success { border-left-color: var(--la-normal); }
.la-toast--error   { border-left-color: var(--la-attack); }

@keyframes la-toast-in {
    /* V2.1.2 hotfix: enter from bottom-right matches the new bottom-right
       anchor; the previous translateX(12px) was tuned for top-right entry. */
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ---------- Full-bleed override on LoginArmor page only ---------- */
body.login-armor-page #wpcontent {
    padding-left: 0;
}

body.login-armor-page #wpbody-content {
    padding-bottom: 0;
}

body.login-armor-page .wrap,
body.login-armor-page .notice {
    /* Belt and suspenders: if any notice slips through, hide it. */
    display: none !important;
}

body.login-armor-page #la-root {
    display: block;
    margin-left: -20px;
    margin-right: 0;
}

@media screen and (max-width: 782px) {
    body.login-armor-page #la-root {
        margin-left: -10px;
    }
}

/* ========================================================================
   Lot 5bis — Settings redesign (validated mock v7)
   Design: Apple Security / High-End Light Mode
   ======================================================================== */

/* --- Design tokens (Lot 5bis — Apple Security light) --- */
#la-root {
    --la-amber: #FFD600;
    --la-amber-dark: #F5C800;
    --la-amber-bg: rgba(255,214,0,.08);
    --la-amber-border: rgba(255,214,0,.35);
    --la-emerald: #10B981;
    --la-emerald-bg: rgba(16,185,129,.06);
    --la-emerald-border: rgba(16,185,129,.2);
    --la-emerald-glow: rgba(16,185,129,.15);
    --la-wash: #F8FAFC;
    --la-line: #E2E8F0;
    --la-faint: #CBD5E1;
    --la-slate: #475569;
    --la-slate-light: #64748B;
    --la-red: #EF4444;
    --la-red-bg: rgba(239,68,68,.05);
}

/* --- Section card (Settings tab) --- */
#la-root .la-card--section {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 0;
    background: #FFFFFF;
    margin-bottom: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.03), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
    overflow: visible;
    transition: border-color 0.2s ease;
}

#la-root .la-card--section:hover {
    border-color: #CBD5E1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

/* --- Card header (Lot 5bis override — higher specificity to beat Lot 1-4 base) --- */
#la-root .la-card--section > .la-card-header {
    padding: 24px 28px;
    margin: 0;
    border-bottom: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.la-card-header--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px 24px;
}

.la-card-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.la-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--la-wash);
    border: 1px solid var(--la-line);
}

.la-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--la-text);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#la-root .la-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--la-text);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.03em;
    text-transform: none;
}

.la-card-subtitle {
    font-size: 13px;
    color: var(--la-slate-light);
    margin-top: 2px;
}

/* --- Card body & footer --- */
#la-root .la-card-body {
    padding: 24px 28px 28px;
}

.la-card-sep {
    height: 1px;
    background: var(--la-line);
    margin: 0 32px;
}

.la-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 32px;
    background: var(--la-wash);
    border-top: 1px solid var(--la-line);
}

/* --- Status pill --- */
.la-status-pill {
    font-family: var(--la-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.la-status-pill--on {
    background: var(--la-emerald-bg);
    color: #059669;
    border: 1.5px solid var(--la-emerald-border);
}

.la-status-pill--on::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--la-emerald);
    box-shadow: 0 0 6px var(--la-emerald-glow), 0 0 12px var(--la-emerald-glow);
    animation: la-pulse 2.5s ease-in-out infinite;
}

@keyframes la-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.la-status-pill--off {
    background: var(--la-wash);
    color: var(--la-text-dim);
    border: 1px solid var(--la-line);
}

/* --- Button variants (Lot 5bis — #la-root prefix beats base .la-btn) --- */
#la-root .la-btn--primary {
    background: var(--la-amber);
    color: var(--la-text);
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    font-weight: 700;
}

#la-root .la-btn--primary:hover {
    background: var(--la-amber-dark);
    color: var(--la-text);
    box-shadow: 0 4px 12px rgba(255,214,0,.3);
}

#la-root .la-btn--ghost {
    background: transparent;
    border: none;
    color: var(--la-slate-light);
    font-weight: 500;
}

#la-root .la-btn--ghost:hover {
    color: var(--la-text);
    background: var(--la-wash);
}

#la-root .la-btn--outline {
    background: var(--la-bg-1);
    color: var(--la-slate);
    border: 1px solid var(--la-line);
}

#la-root .la-btn--outline:hover {
    background: var(--la-wash);
    border-color: var(--la-faint);
}

#la-root .la-btn--danger {
    padding: 6px 16px !important;
    color: #DC2626 !important;
    background: #FEF2F2 !important;
    border: 1px solid #FEE2E2 !important;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 600;
}

#la-root .la-btn--danger:hover {
    background: #FEE2E2 !important;
}

/* --- Field component --- */
.la-field {
    margin-bottom: 28px;
}

.la-field:last-child {
    margin-bottom: 0;
}

#la-root fieldset.la-field {
    border: none;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

.la-field__label,
#la-root legend.la-field__label,
#la-root h4.la-field__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--la-slate-900);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 4px;
    padding: 0;
    line-height: 1.4;
}

#la-root .la-field__desc {
    font-size: 13px;
    color: var(--la-slate-light);
    margin-bottom: 18px;
    line-height: 1.5;
}

.la-field__help {
    font-size: 12px;
    color: var(--la-text-dim);
    margin-top: 6px;
    line-height: 1.6;
}


/* --- Clean Lab (slug input) --- */
#la-root .la-lab {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #FACC15;
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    min-height: 60px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.03);
}

.la-lab__row {
    display: flex;
    align-items: stretch;
}

#la-root .la-lab__prefix {
    display: flex;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
    color: var(--la-text-dim);
}

#la-root .la-lab__prefix svg {
    width: 22px;
    height: 22px;
    stroke: #64748B;
    fill: none;
    stroke-width: 1.5;
}

#la-root .la-lab__input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0;
    background: transparent;
    border: none !important;
    outline: none;
    color: #0F172A;
    letter-spacing: 0.05em;
}

.la-lab__input::selection {
    background: var(--la-amber);
    color: var(--la-text);
}

#la-root .la-lab__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#la-root .la-lab__btn {
    padding: 10px 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
}

.la-lab__btn:hover {
    background: var(--la-wash);
    border-color: var(--la-faint);
    color: var(--la-text);
}

.la-lab__btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.la-lab__btn--copied {
    background: var(--la-emerald-bg) !important;
    color: var(--la-emerald) !important;
    border-color: var(--la-emerald-border) !important;
}

/* --- URL result block --- */
.la-slug-result {
    margin-top: 14px;
    padding: 14px 18px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#la-root .la-slug-result__label {
    font-size: 11px;
    font-weight: 600;
    color: #15803D;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#la-root .la-slug-result__url {
    font-family: var(--la-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: #166534;
    text-decoration: none;
}

#la-root .la-slug-result__url:hover {
    text-decoration: underline;
}

#la-root .la-slug-result__note {
    font-size: 11px;
    color: #16A34A;
}

/* --- Radio cards --- */
.la-radio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.la-radio-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

#la-root .la-radio-opt {
    padding: 14px 18px !important;
    background: #FFFFFF !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: border-color 0.2s ease;
    display: block !important;
}

#la-root .la-radio-opt:hover {
    border-color: #CBD5E1;
}

#la-root .la-radio-opt--active {
    border-color: #FACC15 !important;
    background: #FFFBEB !important;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2) !important;
}

.la-radio-opt__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.la-radio-opt__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--la-text);
}

.la-radio-opt__desc {
    font-size: 11px;
    color: var(--la-text-dim);
}

.la-radio-opt__tag {
    font-family: var(--la-font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--la-amber-dark);
    background: var(--la-bg-1);
    border: 1px solid var(--la-amber-border);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#la-root .la-radio-opt__url,
#la-root .la-card--section input[type="url"] {
    width: 100%;
    padding: 8px 12px !important;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #0F172A;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

#la-root .la-radio-opt__url:focus,
#la-root .la-card--section input[type="url"]:focus {
    border-color: #FACC15;
    outline: none;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

/* --- Recovery panel --- */
#la-root .la-recovery {
    margin-bottom: 24px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.la-recovery summary {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--la-slate-light);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-user-select: none;
    user-select: none;
}

.la-recovery summary:hover {
    color: var(--la-slate);
}

.la-recovery summary::-webkit-details-marker {
    display: none;
}

.la-recovery summary .la-arr {
    font-size: 9px;
    color: var(--la-text-dim);
    transition: transform .2s;
    display: inline-block;
}

.la-recovery[open] summary .la-arr {
    transform: rotate(90deg);
}

.la-recovery__body {
    padding: 0 20px 18px;
    font-size: 13px;
    color: var(--la-slate);
    line-height: 1.7;
}

.la-recovery__body ol {
    margin: 10px 0;
    padding-left: 18px;
}

.la-recovery__body ol li {
    margin-bottom: 14px;
    line-height: 1.45;
}

.la-recovery__body strong {
    color: var(--la-text);
    display: block;
}

.la-recovery__body .la-recovery__desc {
    display: block;
    color: var(--la-slate);
    margin: 2px 0 6px;
    font-size: 12.5px;
}

/* Code snippet on its own line inside the recovery list — block, full width,
   mono, subtle emerald accent to signal "run this". */
#la-root .la-recovery__body .la-cli {
    display: block;
    margin-top: 4px;
    padding: 6px 10px;
    font-family: var(--la-font-mono);
    font-size: 11.5px;
    color: var(--la-emerald);
    background: #0f172a;
    border: 1px solid var(--la-slate-200);
    border-radius: 5px;
    overflow-x: auto;
    word-break: break-all;
}

.la-recovery__body code:not(.la-cli) {
    font-family: var(--la-font-mono);
    font-size: 11px;
    background: var(--la-bg-1);
    color: var(--la-emerald);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--la-line);
}

.la-recovery__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.la-recovery__hint {
    font-size: 11px;
    color: var(--la-text-dim);
}

/* --- Disabled CTA (Hide Login off) --- */
.la-hide-disabled {
    padding: 0;
}

.la-hide-disabled__warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 24px;
    background: #FEF3C7;
    border-bottom: 1px solid #FDE68A;
    border-radius: 16px 16px 0 0;
}

.la-hide-disabled__warning-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FDE68A;
    border-radius: 10px;
}

.la-hide-disabled__warning-icon svg {
    width: 20px;
    height: 20px;
    stroke: #B45309;
    fill: none;
}

.la-hide-disabled__warning-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.la-hide-disabled__warning-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #92400E;
}

.la-hide-disabled__warning-text span {
    font-size: 13px;
    color: #A16207;
    line-height: 1.5;
}

.la-hide-disabled__body {
    padding: 24px 28px;
}

.la-hide-disabled__desc {
    font-size: 13px;
    color: var(--la-slate);
    line-height: 1.6;
    margin-bottom: 16px;
}

.la-hide-disabled__preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.la-hide-disabled__preview-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--la-slate-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.la-hide-disabled__preview-url {
    display: inline-block;
    font-family: var(--la-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 12px 20px;
    border-radius: 10px;
    letter-spacing: -0.2px;
}

.la-hide-disabled__note {
    font-size: 12px;
    color: var(--la-text-dim);
    line-height: 1.5;
    margin-bottom: 0;
}

.la-hide-disabled__actions {
    padding: 0 28px 24px;
    display: flex;
    gap: 10px;
}

/* Amber CTA button — high specificity to beat .la-btn--primary */
#la-root .la-btn.la-btn--amber {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #FACC15 0%, #EAB308 100%);
    color: #422006;
    border: 1px solid #D4A50A;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 44px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(234,179,8,.25), 0 6px 16px rgba(234,179,8,.15);
    transition: all 150ms;
    letter-spacing: -0.2px;
    font-family: var(--la-font-sans);
}

#la-root .la-btn.la-btn--amber:hover {
    background: linear-gradient(135deg, #FDE047 0%, #FACC15 100%);
    box-shadow: 0 4px 8px rgba(234,179,8,.35), 0 8px 24px rgba(234,179,8,.2);
    transform: none;
    text-decoration: none;
    color: #422006;
}

/* --- Bento layout (Hardening) --- */
#la-root .la-bento-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

#la-root .la-bento-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

#la-root .la-score-block {
    width: 200px;
    flex-shrink: 0;
}

/* --- Harden card --- */
#la-root .la-harden-card {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 18px 16px;
    background: #FFFFFF;
    display: flex;
    min-height: 90px;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease;
    cursor: default;
    min-height: 100px;
}

#la-root .la-harden-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
}

#la-root .la-harden-card--off {
    opacity: 0.55;
    border: 1px dashed #CBD5E1;
    background: #F8FAFC;
}

#la-root .la-harden-card--off:hover {
    opacity: 0.75;
    border-color: #CBD5E1;
    border-style: solid;
}

#la-root .la-harden-card--on {
    opacity: 1;
    border: 1.5px solid #00F59B;
    background: #FFFFFF;
    box-shadow: none;
}

#la-root .la-harden-card--on:hover {
    border-color: #00D68A;
}

#la-root .la-harden-card--full {
    grid-column: 1 / span 2;
}

.la-hardening-defaults {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9;
}

.la-hardening-defaults__hint {
    font-size: 12px;
    color: #94A3B8;
    font-style: italic;
}

.la-harden-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--la-wash);
    border: 1px solid var(--la-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.la-harden-card__icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--la-text-dim);
    fill: none;
    stroke-width: 1.5;
}

.la-harden-card--on .la-harden-card__icon {
    background: var(--la-emerald-bg);
    border-color: var(--la-emerald-border);
}

.la-harden-card--on .la-harden-card__icon svg {
    stroke: var(--la-emerald);
}

.la-harden-card__text {
    flex: 1;
    min-width: 0;
}

.la-harden-card__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--la-text);
    margin-bottom: 2px;
}

.la-harden-card__desc {
    font-size: 11px;
    color: var(--la-text-dim);
    line-height: 1.4;
}

/* --- Toggle switch --- */
.la-toggle {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    align-self: center;
}

.la-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.la-toggle__track {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--la-faint);
    border-radius: 12px;
    transition: background .3s ease;
    position: relative;
}

.la-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--la-bg-1);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    transition: transform .3s ease;
}

.la-toggle input:checked + .la-toggle__track {
    background: var(--la-emerald);
}

.la-toggle input:checked + .la-toggle__track::after {
    transform: translateX(20px);
}

/* --- Score ring --- */
.la-score-block {
    background: var(--la-bg-1);
    border: 1px solid var(--la-line);
    border-radius: 16px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.03), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
    min-height: 100%;
    overflow: visible;
}

#la-root .la-score-block::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 245, 155, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(24px);
    pointer-events: none;
    animation: la-score-glow 4s ease-in-out infinite;
}

@keyframes la-score-glow {
    0%, 100% { opacity: .7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Legacy Hardening score ring — scoped to .la-score-block so it doesn't
   leak onto the Lot 18 Security Score ring in Settings (which uses the
   same __bg class name but with r=44 + stroke-width=8 inline). */
.la-score-block .la-score-ring__svg {
    width: 130px;
    height: 130px;
    transform: rotate(-90deg);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 15px rgba(0, 245, 155, 0.15));
}

.la-score-block .la-score-ring__bg {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 10;
}

#la-root .la-score-block .la-score-ring__fill {
    fill: none;
    stroke: url(#la-emerald-grad);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset .8s ease;
    filter: drop-shadow(0 0 15px rgba(0, 245, 155, 0.15));
}

#la-root .la-score-block .la-score-ring__value {
    font-size: 64px;
    font-weight: 900;
    color: #0F172A;
    margin-top: 14px;
    letter-spacing: -0.05em;
    position: relative;
    z-index: 1;
    line-height: 1;
}

#la-root .la-score-block .la-score-ring__label {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

/* --- Placeholder section --- */
.la-card--placeholder {
    opacity: .35;
}

.la-placeholder {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: var(--la-text-dim);
    border: 1px dashed var(--la-faint);
    border-radius: 10px;
}

/* --- Sticky save bar (Settings tab) --- */
#la-root .la-sticky-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 160px;
    z-index: 9999;
    height: 72px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 40px;
    gap: 12px;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 250ms ease, opacity 250ms ease;
}

#la-root .la-sticky-bar.la-sticky-bar--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* WP admin collapsed sidebar */
.folded #la-root .la-sticky-bar {
    left: 36px;
}

.la-sticky-bar__hint {
    font-size: 13px;
    font-weight: 600;
    color: var(--la-text);
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.la-sticky-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--la-amber);
    box-shadow: 0 0 8px rgba(255,214,0,.4);
    animation: la-pulse 2s ease-in-out infinite;
}

#la-root .la-sticky-bar .la-btn--primary {
    background: #FACC15;
    color: #000000;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.3);
}

#la-root .la-sticky-bar .la-btn--primary:hover {
    background: #F5C800;
    box-shadow: 0 6px 20px rgba(255, 214, 0, 0.4);
}

/* --- WP Admin reset for Settings tab --- */
#la-root .la-card--section *,
#la-root .la-lab *,
#la-root .la-harden-card *,
#la-root .la-sticky-bar * {
    box-sizing: border-box;
}

#la-root .la-card--section input,
#la-root .la-card--section label {
    margin: 0;
    padding: 0;
}


/* ========================================================================
   Lot 6 — Brute Force Protection + Detection & Logs
   ======================================================================== */

/* --- Number fields grid --- */
.la-numbers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.la-number-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--la-wash);
    border: 1px solid var(--la-line);
    border-radius: 10px;
    transition: border-color 150ms;
}

.la-number-field:focus-within {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

#la-root .la-number-field__input {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid var(--la-line);
    border-radius: 6px;
    font-family: var(--la-font-mono);
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    text-align: center;
    background: #FFFFFF;
    outline: none;
}

#la-root .la-number-field__input:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.15);
}

#la-root .la-number-field__input::-webkit-inner-spin-button,
#la-root .la-number-field__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#la-root .la-number-field__input[type="number"] {
    -moz-appearance: textfield;
}

.la-number-field__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.la-number-field__unit {
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.la-number-field__hint {
    font-size: 11px;
    color: #94A3B8;
}

.la-number-field--full {
    grid-column: 1 / -1;
}

/* --- Summary box --- */
.la-summary-box {
    margin-top: 14px;
    padding: 14px 18px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    font-size: 12px;
    color: #166534;
    line-height: 1.6;
}

.la-summary-box strong {
    font-weight: 800;
    color: #15803D;
}

/* --- Inner separator --- */
.la-inner-sep {
    height: 1px;
    background: var(--la-line);
    margin: 28px 0;
}

/* --- Textarea --- */
#la-root .la-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    background: var(--la-wash);
    border: 1px solid var(--la-line);
    border-radius: 10px;
    font-family: var(--la-font-mono);
    font-size: 12px;
    color: #334155;
    resize: vertical;
    outline: none;
    transition: border-color 150ms;
}

#la-root .la-textarea:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

#la-root .la-textarea::placeholder {
    color: var(--la-faint);
}

/* --- Inline fields row --- */
.la-inline-fields {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.la-inline-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-inline-field--grow {
    flex: 1;
}

.la-inline-field__label {
    font-family: var(--la-font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#la-root .la-inline-field__input {
    padding: 8px 12px;
    border: 1px solid var(--la-line);
    border-radius: 8px;
    font-family: var(--la-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    background: #FFFFFF;
    outline: none;
    width: 80px;
    text-align: center;
}

#la-root .la-inline-field__input:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.15);
}

#la-root .la-inline-field__input--wide {
    width: 100%;
    text-align: left;
    font-weight: 500;
}

#la-root .la-inline-field__input--wide::placeholder {
    color: var(--la-faint);
}

.la-inline-field__suffix {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
}

/* --- Select (Detection retention) --- */
#la-root .la-select {
    padding: 8px 12px;
    border: 1px solid var(--la-line);
    border-radius: 8px;
    font-family: var(--la-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
    background: #FFFFFF;
    outline: none;
    cursor: pointer;
}

#la-root .la-select:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.15);
}

/* --- Actions row --- */
.la-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--la-line);
}

#la-root .la-btn--recommend {
    padding: 10px 24px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    cursor: pointer;
    transition: all 150ms;
}

#la-root .la-btn--recommend:hover {
    background: #D1FAE5;
}

#la-root .la-btn--reset-defaults {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--la-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--la-slate-light);
    cursor: pointer;
    transition: all 150ms;
}

#la-root .la-btn--reset-defaults:hover {
    background: var(--la-wash);
}

/* --- Small action button (Add current IP) --- */
#la-root .la-btn--small-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #FFFFFF;
    border: 1px solid var(--la-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--la-slate);
    cursor: pointer;
    transition: all 150ms;
    margin-top: 8px;
}

#la-root .la-btn--small-action:hover {
    background: var(--la-wash);
    border-color: var(--la-faint);
}

#la-root .la-btn--small-action svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* --- Section scroll highlight --- */
@keyframes la-section-highlight {
    0% { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.4); }
    100% { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.03), 0 10px 10px -5px rgba(0, 0, 0, 0.01); }
}

.la-setting-wrapper.la-highlight > .la-setting-row {
    animation: la-section-highlight 1.5s ease-out;
}

/* Legacy Lot 17 section-level collapse removed Lot 18 V10 — the new
   `.la-setting-wrapper` (<details>/<summary>) pattern handles expansion
   natively. The old `.la-collapsed` class used to hide `.la-card-body`
   silently, which broke every module's expansion panel when the outer
   wrapper was opened. */

/* ---------- Notifications section (Lot 7) ---------- */
.la-input--wide { max-width: 560px; }

.la-notif-test-result {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
}
.la-notif-test-result--ok { color: var(--la-success); }
.la-notif-test-result--err { color: var(--la-locked); }

.la-notif-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--la-locked) 8%, transparent);
    font-size: 13px;
    color: var(--la-locked);
}
.la-notif-error__icon { font-size: 16px; }

/* ---------- Pedagogical cards (Lot 8b) ---------- */
/* Color system: info = amber, alert = red, success = green */
.la-pedagogy {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: var(--la-space-4);
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left: 4px solid #F59E0B;
    border-radius: 12px;
}

.la-pedagogy__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #D97706;
    margin-top: 1px;
}

.la-pedagogy__icon svg {
    width: 24px;
    height: 24px;
}

.la-pedagogy__body {
    flex: 1;
    min-width: 0;
}

.la-pedagogy__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #92400E;
    margin-bottom: 8px;
}

.la-pedagogy__desc {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.6;
    color: #78350F;
}

.la-pedagogy__action {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #92400E;
    padding-top: 8px;
    border-top: 1px solid #FDE68A;
}

/* ---------- Activity Log table (Lot 9) ---------- */
.la-activity-log__header,
.la-activity-log__row {
	display: grid;
	grid-template-columns: 100px 150px 100px 1fr 120px;
	align-items: center;
	gap: var(--la-space-2);
	padding: var(--la-space-2) var(--la-space-5);
}

.la-activity-log__header {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--la-text-muted);
	border-bottom: 1px solid var(--la-border);
}

.la-activity-log__row {
	font-size: 13px;
	border-bottom: 1px solid var(--la-border-light, #f1f5f9);
	cursor: default;
}

.la-activity-log__row:hover {
	background: var(--la-hover, #f8fafc);
}

.la-activity-log__time {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.la-activity-log__ago {
	font-size: 11px;
	color: var(--la-text-muted);
}

.la-activity-log__user {
	display: flex;
	align-items: center;
	gap: var(--la-space-1);
	min-width: 0;
}

.la-activity-log__user img {
	border-radius: 50%;
	flex-shrink: 0;
}

.la-activity-log__role {
	font-size: 11px;
	color: var(--la-text-muted);
}

.la-activity-log__object {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.la-activity-log__ip {
	font-family: var(--la-font-mono, monospace);
	font-size: 12px;
	color: var(--la-text-muted);
}

.la-badge--info {
	background: rgba(59, 130, 246, 0.1);
	color: #2563eb;
}

.la-badge--warn {
	background: rgba(245, 158, 11, 0.1);
	color: #d97706;
}

/* ────────────────────────────────────────────────────────────────
   Lot 13 — Login Page Security Headers
   ──────────────────────────────────────────────────────────────── */

.la-code-preview {
    background: var(--la-bg-0);
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    padding: 12px 14px;
    font-family: var(--la-font-mono);
    font-size: 12px;
    line-height: 1.65;
    color: var(--la-text);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 320px;
    overflow: auto;
}

.la-code-preview__header {
    color: #8B5A00;
    font-weight: 600;
}

.la-code-preview__value {
    color: var(--la-text);
}

.la-save-hint {
    display: inline-block;
    margin-left: 12px;
    font-size: 12px;
    color: var(--la-text-muted);
    transition: color 150ms;
}

.la-save-hint--ok {
    color: var(--la-success, #2E7D32);
}

.la-save-hint--err {
    color: var(--la-locked, #B71C1C);
}

/* ────────────────────────────────────────────────────────────────
   Lot 11 — Salt Keys Rotator
   ──────────────────────────────────────────────────────────────── */

.la-kv-grid {
    border: 1px solid var(--la-border);
    border-radius: var(--la-radius);
    overflow: hidden;
    background: var(--la-bg-1);
}

.la-kv-row {
    display: flex;
    align-items: baseline;
    padding: 10px 14px;
    gap: 16px;
    border-bottom: 1px solid var(--la-border);
    font-size: 13px;
}

.la-kv-row:last-child {
    border-bottom: none;
}

.la-kv-row__key {
    color: var(--la-text-muted);
    flex: 0 0 140px;
    font-weight: 500;
}

.la-kv-row__val {
    color: var(--la-text);
    flex: 1;
    word-break: break-all;
    min-width: 0;
}

.la-kv-row__val code {
    font-size: 12px;
    padding: 2px 6px;
    background: var(--la-bg-0);
    border-radius: 4px;
}

.la-error-banner {
    background: rgba(183, 28, 28, 0.08);
    border: 1px solid rgba(183, 28, 28, 0.25);
    border-radius: var(--la-radius);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--la-locked, #B71C1C);
}

.la-error-banner strong {
    margin-right: 6px;
}

/* Offset anchor scroll so section titles clear the wp-admin-bar + topbar
   when deep-linked from Overview bento cards. */
#la-root[data-la-active-tab="settings"] .la-card--section {
    scroll-margin-top: 100px;
}

/* ---------- Overview — All Quiet variant (Lot 17 / U4) ---------- */
.la-allquiet {
    padding: 40px 32px 32px;
    text-align: center;
}

.la-allquiet__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.la-allquiet__halo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46,125,50,0.18) 0%, rgba(46,125,50,0) 70%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--la-normal, #2E7D32);
}

.la-allquiet__shield { width: 40px; height: 40px; }

.la-allquiet__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--la-text, #1D2327);
}

.la-allquiet__sub {
    margin: 0;
    font-size: 14px;
    color: var(--la-text-muted, #50575E);
}

.la-allquiet__baseline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px auto 0;
    max-width: 400px;
    padding: 16px 0 4px;
}

.la-allquiet__baseline-line {
    flex: 1;
    height: 1px;
    background: var(--la-normal, #2E7D32);
    opacity: 0.5;
}

.la-allquiet__baseline-label {
    font-size: 11px;
    font-family: var(--la-font-mono, monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--la-text-dim, #8C8F94);
}

.la-allquiet__advice {
    margin-top: 28px;
    padding: 20px;
    background: var(--la-bg-2, #F6F7F7);
    border: 1px solid var(--la-border, #DCDCDE);
    border-radius: 8px;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.la-allquiet__advice-text { flex: 1 1 240px; min-width: 240px; }

.la-allquiet__advice-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--la-text, #1D2327);
}

.la-allquiet__advice-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--la-text-muted, #50575E);
}

.la-allquiet__advice-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Lot 14 — Hardening sub-panel (username blacklist) */
.la-sub-panel {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--la-border, #DCDCDE);
    border-radius: var(--la-radius, 6px);
    background: #FAFAFB;
}
.la-sub-panel[hidden] { display: none; }
.la-sub-panel__head { margin-bottom: 10px; }
.la-sub-panel__title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
}
.la-sub-panel__desc {
    margin: 0;
    font-size: 12px;
    color: var(--la-text-muted, #50575E);
}
.la-sub-panel__counter {
    margin: 8px 0 0;
    font-size: 12px;
}
.la-sub-panel .la-input {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}
.la-warning-banner {
    margin-top: 12px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #FFF8E1;
    border: 1px solid #F2C94C;
    border-radius: var(--la-radius, 6px);
    font-size: 13px;
    line-height: 1.45;
    color: #5B4200;
}
.la-warning-banner[hidden] { display: none; }
.la-warning-banner__icon {
    flex-shrink: 0;
    color: #B45309;
    margin-top: 1px;
}

/* ---------- Salt Rotator — first-rotation backup nag (Lot 15 / I) ---------- */
.la-salt-backup-nag {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 20px;
    background: #FFF8E1;
    border: 1px solid #FFD54F;
    border-left: 4px solid #F9A825;
    border-radius: 6px;
    color: #5D4E2A;
    font-size: 13px;
    line-height: 1.5;
}

.la-salt-backup-nag__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #F9A825;
    margin-top: 2px;
}

.la-salt-backup-nag__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-salt-backup-nag__text strong {
    font-size: 14px;
    color: #3E2F0F;
    font-weight: 600;
}

.la-salt-backup-nag__text span {
    color: #5D4E2A;
}

/* ============================================================================ */
/* === LOT 18 OVERVIEW HERO ================================================== */
/* ============================================================================ */

.la-hero {
	background: linear-gradient(135deg, var(--la-navy) 0%, var(--la-navy-2) 100%);
	color: #fff;
	border-radius: var(--la-r-hero);
	padding: 40px 44px;
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 48px;
	align-items: center;
	position: relative;
	overflow: hidden;
	box-shadow: var(--la-shadow-hero);
}
.la-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 40%, rgba(16,185,129,0.18), transparent 55%),
		radial-gradient(circle at 15% 90%, rgba(244,208,63,0.08), transparent 50%);
	pointer-events: none;
}
.la-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 100%);
	mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 100%);
	pointer-events: none;
}

.la-hero__num {
	font-size: 104px;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.9;
	color: var(--la-emerald);
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
}
.la-hero__trend {
	font-size: 16px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
	margin-top: 12px;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.la-hero__trend-note {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	opacity: 0.75;
}
.la-hero__trend--up {
	color: var(--la-red);
	background: rgba(220,38,38,0.15);
	border: 1px solid rgba(220,38,38,0.3);
}
.la-hero__trend--down {
	color: var(--la-emerald);
	background: rgba(16,185,129,0.15);
	border: 1px solid rgba(16,185,129,0.3);
}

.la-hero__mid { position: relative; z-index: 1; }
.la-hero__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: var(--la-slate-400);
	text-transform: uppercase;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.la-hero__live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--la-emerald);
	font-size: 9px;
}
.la-hero__live::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--la-emerald);
	animation: la-hero-blink 1.6s ease-in-out infinite;
}
@keyframes la-hero-blink {
	0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--la-emerald); }
	50%      { opacity: 0.4; box-shadow: 0 0 0 transparent; }
}
.la-hero__title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: #fff;
}
.la-hero__sub {
	font-size: 14px;
	color: var(--la-slate-300);
	margin: 0;
	line-height: 1.5;
	max-width: 440px;
}
.la-hero__sub [data-la-last-check] { color: #fff; font-weight: 500; }

.la-hero__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(16,185,129,0.15);
	border: 1px solid rgba(16,185,129,0.35);
	color: #6ee7b7;
	font-size: 11px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--la-r-pill);
	margin-top: 14px;
	letter-spacing: 0.02em;
}
.la-hero__status::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--la-emerald);
	box-shadow: 0 0 10px var(--la-emerald);
}
.la-hero--elevated .la-hero__status { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #fde68a; }
.la-hero--elevated .la-hero__status::before { background: var(--la-amber); box-shadow: 0 0 10px var(--la-amber); }
.la-hero--attack .la-hero__status { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.35); color: #fecaca; }
.la-hero--attack .la-hero__status::before { background: var(--la-red); box-shadow: 0 0 10px var(--la-red); }

.la-hero__metrics {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	column-gap: 32px;
	row-gap: 14px;
	position: relative;
	z-index: 1;
	justify-content: end;
	align-content: center;
}
.la-hero__m {
	text-align: right;
	padding-left: 28px;
	border-left: 1px solid rgba(255,255,255,0.1);
}
/* In the 2×2 grid the first column (items 1 and 3) has no left border. */
.la-hero__m:nth-child(2n+1) { border-left: none; padding-left: 0; }
.la-hero__m b {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	display: block;
	line-height: 1;
	margin-bottom: 4px;
	color: #fff;
}
.la-hero__m--alert b { color: var(--la-amber); }
.la-hero__m--alert span { color: var(--la-amber); opacity: 0.9; }
.la-hero__m span {
	font-size: 10px;
	color: var(--la-slate-400);
	text-transform: uppercase;
	letter-spacing: 1.8px;
	font-weight: 600;
}

@media (max-width: 1100px) {
	.la-hero {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 32px;
		padding: 32px 32px;
	}
	.la-hero__metrics {
		grid-column: 1 / -1;
		border-top: 1px solid rgba(255,255,255,0.08);
		padding-top: 20px;
		margin-top: 4px;
		width: 100%;
		justify-content: space-between;
		grid-template-columns: repeat(4, max-content);
	}
	.la-hero__m:nth-child(2n+1) { border-left: 1px solid rgba(255,255,255,0.1); padding-left: 28px; }
	.la-hero__m:first-child { border-left: none; padding-left: 0; }
}
@media (max-width: 720px) {
	.la-hero {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 28px 24px;
	}
	.la-hero__num { font-size: 80px; }
	.la-hero__title { font-size: 26px; }
	.la-hero__metrics { grid-template-columns: repeat(2, max-content); column-gap: 20px; row-gap: 14px; }
	.la-hero__m { padding-left: 18px; }
	.la-hero__m:nth-child(2n+1) { border-left: none; padding-left: 0; }
}

/* ============================================================================ */
/* === LOT 18 OVERVIEW MODULES + CHART ======================================= */
/* ============================================================================ */

.la-row { display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.la-row--modules-chart { grid-template-columns: 2fr 1fr; }
@media (max-width: 1000px) {
	.la-row--modules-chart { grid-template-columns: 1fr; }
}

.la-card {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	padding: 22px;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s;
}
.la-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 12px;
}
.la-card__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--la-slate-900);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.la-card__title-tiny {
	font-size: 10px;
	color: var(--la-slate-400);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
}
#la-root .la-linkbtn {
	font-size: 12px;
	color: var(--la-slate-700);
	text-decoration: none;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background-color 0.15s, color 0.15s;
}
#la-root .la-linkbtn:hover { background: var(--la-slate-100); color: var(--la-slate-900); text-decoration: none; }
.la-meta { font-size: 12px; color: var(--la-slate-500); }
.la-meta b { color: var(--la-slate-900); font-weight: 600; }

/* Modules */
.la-modgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
@media (max-width: 600px) { .la-modgrid { grid-template-columns: 1fr; } }
.la-mod {
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card-sm);
	padding: 12px 14px;
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 12px;
	align-items: center;
	background: #fff;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* #la-root prefix mandatory — `#la-root a:hover { text-decoration: underline }`
 * at the top of this file has specificity (1,2,0), so a bare `.la-mod:hover`
 * (0,2,0) loses and the title + subtitle get underlined on hover. */
#la-root .la-mod:hover {
	border-color: var(--la-slate-300);
	transform: translateY(-1px);
	box-shadow: var(--la-shadow-card-hover);
	text-decoration: none;
}
.la-mod__i {
	width: 32px; height: 32px;
	border-radius: var(--la-r-btn-lg);
	background: var(--la-slate-100);
	color: var(--la-slate-600);
	display: grid;
	place-items: center;
	transition: background-color 0.15s, color 0.15s;
}
.la-mod--on .la-mod__i { background: var(--la-emerald-light); color: var(--la-emerald-dark); }
.la-mod--off .la-mod__i { background: var(--la-red-light); color: var(--la-red); }
.la-mod__text { min-width: 0; }
.la-mod__text b {
	font-size: 13px;
	font-weight: 600;
	display: block;
	margin-bottom: 1px;
	color: var(--la-slate-900);
}
.la-mod__text small {
	font-size: 11px;
	color: var(--la-slate-500);
	display: block;
	line-height: 1.3;
}
.la-mod__state {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--la-r-pill-sm);
	white-space: nowrap;
}
.la-mod--on .la-mod__state { background: var(--la-emerald-light); color: var(--la-emerald-dark); }
.la-mod--off .la-mod__state { background: var(--la-red-light); color: var(--la-red); }
/* `warn` state: module is active but reports something needing admin
 * attention (e.g. Breach Check with flagged accounts). Amber icon
 * pad + amber pill, border amplified a bit so the card stands out
 * on the bento grid without being as alarming as a red error. */
.la-mod--warn {
	border-color: rgba(245, 158, 11, 0.45);
}
.la-mod--warn .la-mod__i {
	background: rgba(245, 158, 11, 0.14);
	color: #b45309;
}
.la-mod--warn .la-mod__state {
	background: rgba(245, 158, 11, 0.14);
	color: #92400e;
}

/* Chart */
.la-chart {
	flex: 1;
	min-height: 180px;
	position: relative;
	margin: 4px 0 10px;
}
.la-chart svg {
	width: 100%;
	height: 100%;
	display: block;
}
.la-chart__marker {
	transform-origin: center;
	animation: la-chart-pulse 2s ease-in-out infinite;
}
@keyframes la-chart-pulse {
	0%, 100% { r: 4; }
	50%      { r: 5.5; }
}
.la-chart__foot {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--la-slate-400);
	font-weight: 500;
}
.la-chart__highlight { color: var(--la-red); font-weight: 600; }

/* ============================================================================ */
/* === LOT 18 OVERVIEW EVENTS + ACTION BANNER ================================ */
/* ============================================================================ */

.la-events-card .la-card__head { margin-bottom: 10px; }
.la-card__actions { display: flex; gap: 8px; align-items: center; }

.la-streaming {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	color: var(--la-emerald-dark);
	text-transform: uppercase;
	background: var(--la-emerald-light);
	padding: 3px 9px;
	border-radius: var(--la-r-pill);
	transition: opacity 0.15s;
}
.la-streaming::before {
	content: '';
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--la-emerald);
	animation: la-hero-blink 1.6s ease-in-out infinite;
}

#la-root .la-ghost-btn {
	font-size: 12px;
	border: 1px solid var(--la-slate-200);
	background: #fff;
	padding: 6px 12px;
	border-radius: var(--la-r-btn);
	font-weight: 500;
	color: var(--la-slate-700);
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}
#la-root .la-ghost-btn:hover,
#la-root .la-ghost-btn:focus-visible {
	background: var(--la-slate-50);
	border-color: var(--la-slate-300);
	color: var(--la-slate-900);
	outline: none;
}
#la-root .la-ghost-btn.is-active,
#la-root .la-ghost-btn[aria-pressed="true"] {
	background: var(--la-slate-900);
	color: #fff;
	border-color: var(--la-slate-900);
}

/* Events table */
.la-evt-head,
.la-live-events__row {
	display: grid;
	/* IP column widened 150→190 + word-break on .la-live-events__ip
	 * so long IPv6 fit without bleeding into the user column. */
	grid-template-columns: 70px 60px 190px 1fr 90px;
	gap: 14px;
	align-items: center;
	padding: 12px 8px;
	border-bottom: 1px solid var(--la-slate-100);
	font-size: 13px;
}
.la-evt-head {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--la-slate-400);
	font-weight: 600;
	padding: 8px;
	border-bottom: 1px solid var(--la-slate-200);
}
.la-live-events__row { transition: background-color 0.12s; }
.la-live-events__row:hover { background: var(--la-slate-50); }
.la-live-events__row:last-child { border-bottom: none; }
.la-live-events__time {
	font-family: var(--la-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--la-slate-500);
	font-size: 12px;
}
.la-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--la-r-pill-sm);
	text-align: center;
}
.la-badge--ok   { background: var(--la-emerald-light); color: var(--la-emerald-dark); }
.la-badge--fail { background: var(--la-red-light); color: var(--la-red); }
.la-badge--lock { background: var(--la-amber-light); color: #92400e; }

.la-live-events__ip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--la-font-mono);
	font-size: 12px;
	color: var(--la-slate-700);
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-all;
	line-height: 1.3;
}
.la-live-events__globe { color: var(--la-slate-400); flex-shrink: 0; }

.la-live-events__user {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.la-live-events__avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--la-navy);
	color: var(--la-gold);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 11px;
	flex-shrink: 0;
}
.la-live-events__avatar--fail { background: var(--la-red-light); color: var(--la-red); }
.la-live-events__avatar--lock { background: var(--la-amber-light); color: #92400e; }
.la-live-events__detail { min-width: 0; line-height: 1.3; }
.la-live-events__detail b {
	display: block;
	font-weight: 600;
	color: var(--la-slate-900);
	font-size: 13px;
}
.la-live-events__detail small {
	display: block;
	font-size: 11px;
	color: var(--la-slate-500);
	margin-top: 1px;
}
.la-live-events__detail small.is-bad { color: var(--la-red); }
.la-live-events__sep {
	color: var(--la-slate-300);
	margin: 0 5px;
}

.la-live-events__ago {
	font-size: 11px;
	color: var(--la-slate-400);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.la-live-events__empty {
	padding: 40px 16px;
	text-align: center;
	color: var(--la-slate-500);
	font-size: 13px;
}

/* Action banner */
.la-action-banner {
	margin-top: 16px;
	background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: var(--la-r-card-md);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
}
.la-action-banner__icon {
	width: 36px; height: 36px;
	border-radius: var(--la-r-card-sm);
	background: var(--la-gold);
	color: var(--la-navy);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.la-action-banner__txt { flex: 1; }
.la-action-banner__txt b { font-weight: 600; color: var(--la-slate-900); }
.la-action-banner__txt p { margin: 2px 0 0; color: var(--la-slate-600); font-size: 12px; }
.la-action-banner__actions { display: flex; gap: 8px; align-items: center; }
#la-root .la-action-banner__cta {
	background: var(--la-slate-900);
	color: #fff;
	border: none;
	padding: 8px 14px;
	border-radius: var(--la-r-btn-lg);
	font-size: 12px;
	font-weight: 600;
	transition: background-color 0.15s, transform 0.15s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
#la-root .la-action-banner__cta:hover {
	background: #000;
	transform: translateY(-1px);
	color: #fff;
}
.la-action-banner__skip {
	background: transparent;
	border: none;
	color: var(--la-slate-500);
	cursor: pointer;
	padding: 6px;
	display: grid;
	place-items: center;
	border-radius: var(--la-r-btn);
	transition: color 0.15s, background-color 0.15s;
}
.la-action-banner__skip:hover { color: var(--la-slate-900); background: rgba(15,23,42,0.04); }

@media (max-width: 720px) {
	.la-evt-head,
	.la-live-events__row { grid-template-columns: 60px 50px 1fr 80px; }
	.la-evt-head span:nth-child(3),
	.la-live-events__row .la-live-events__ip { display: none; }
	.la-action-banner { flex-direction: column; align-items: stretch; text-align: left; }
}

/* ============================================================================ */
/* === LOT 18 SHARED TABS CHROME ============================================= */
/* ============================================================================ */

.la-page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 22px;
	gap: 24px;
	flex-wrap: wrap;
}
.la-page-header h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--la-slate-900);
}
.la-page-header .la-kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: var(--la-slate-500);
	text-transform: uppercase;
	margin-bottom: 6px;
	display: block;
}
.la-page-header .la-lead {
	color: var(--la-slate-600);
	margin: 6px 0 0;
	font-size: 13px;
	max-width: 560px;
	line-height: 1.5;
}
.la-page-header .la-count {
	font-size: 15px;
	color: var(--la-slate-500);
	font-weight: 500;
	margin-left: 10px;
}
.la-page-header .la-count b { color: var(--la-slate-900); font-weight: 700; }
.la-page-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.la-page-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 20px;
	align-items: start;
}
@media (max-width: 1100px) {
	.la-page-grid { grid-template-columns: 1fr; }
}

/* Filter bar (shared across Incidents/Events/Activity) */
.la-filter-bar {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 14px;
	background: var(--la-slate-50);
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card-md);
	margin-bottom: 16px;
}
.la-fb-field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.la-fb-field label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--la-slate-500);
	text-transform: uppercase;
}
.la-fb-field select,
.la-fb-field input {
	font-family: inherit;
	font-size: 13px;
	padding: 7px 10px;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-btn);
	background: #fff;
	color: var(--la-slate-900);
	outline: none;
	transition: border-color 0.15s;
}
.la-fb-field select:focus,
.la-fb-field input:focus { border-color: var(--la-slate-500); }
.la-fb-spacer { flex: 1; min-width: 10px; }

/* Sum strip — used by each tab for 4-metric summary */
.la-sum-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
@media (max-width: 700px) { .la-sum-strip { grid-template-columns: repeat(2, 1fr); } }
.la-sum-box {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card-md);
	padding: 14px 16px;
}
.la-sum-box b {
	display: block;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--la-slate-900);
	line-height: 1;
	margin-bottom: 4px;
}
.la-sum-box--red b { color: var(--la-red); }
.la-sum-box--green b { color: var(--la-emerald-dark); }
.la-sum-box--amber b { color: #92400e; }
.la-sum-box span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--la-slate-500);
	text-transform: uppercase;
}

/* Button variants shared */
#la-root .la-primary-btn {
	background: var(--la-slate-900);
	color: #fff;
	border: none;
	padding: 8px 14px;
	border-radius: var(--la-r-btn-lg);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background-color 0.15s, transform 0.15s;
	text-decoration: none;
}
#la-root .la-primary-btn:hover { background: #000; transform: translateY(-1px); color: #fff; }
#la-root .la-danger-btn {
	background: var(--la-red);
	color: #fff;
	border: none;
	padding: 8px 14px;
	border-radius: var(--la-r-btn-lg);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background-color 0.15s, transform 0.15s;
	text-decoration: none;
}
#la-root .la-danger-btn:hover { background: #b91c1c; transform: translateY(-1px); color: #fff; text-decoration: none; }

/* Guide side-panel (sticky, used inside .la-page-grid's second column) */
.la-guide {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	padding: 20px 22px;
	position: sticky;
	top: 120px;
}
.la-guide h3,
.la-guide .la-sidebar__title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	position: relative;
	padding-bottom: 10px;
	color: var(--la-slate-900);
}
.la-guide h3::after,
.la-guide .la-sidebar__title::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 32px; height: 2px;
	background: var(--la-gold);
	border-radius: 2px;
}
.la-guide details,
.la-guide .la-sidebar__section {
	border-top: 1px solid var(--la-slate-100);
	padding: 10px 0;
}
.la-guide details:first-of-type,
.la-guide .la-sidebar__section:first-of-type { border-top: none; }
.la-guide summary,
.la-guide .la-sidebar__section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--la-slate-700);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	padding: 4px 0;
	transition: color 0.15s;
}
.la-guide summary:hover,
.la-guide .la-sidebar__section-title:hover { color: var(--la-slate-900); }
.la-guide summary::-webkit-details-marker,
.la-guide .la-sidebar__section-title::-webkit-details-marker { display: none; }
.la-guide summary::after,
.la-guide .la-sidebar__section-title::after {
	content: '';
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--la-slate-400);
	border-bottom: 2px solid var(--la-slate-400);
	transform: rotate(45deg) translate(-2px, -2px);
	transform-origin: center;
	flex-shrink: 0;
	font-size: 0;
	color: var(--la-slate-400);
	transition: transform 0.2s;
}
.la-guide details[open] summary::after,
.la-guide .la-sidebar__section[open] .la-sidebar__section-title::after { transform: rotate(-135deg) translate(-2px, -2px); }
.la-guide details p,
.la-guide .la-sidebar__text {
	font-size: 12px;
	color: var(--la-slate-600);
	line-height: 1.55;
	margin: 8px 0 2px;
}
.la-guide .la-sidebar__list {
	list-style: none;
	margin: 8px 0 2px;
	padding: 0;
	font-size: 12px;
	color: var(--la-slate-600);
	line-height: 1.55;
}
.la-guide .la-sidebar__list li { margin: 4px 0; }
.la-guide .la-sidebar__list strong { color: var(--la-slate-900); font-weight: 600; }

/* Monospace utility */
.la-mono { font-family: var(--la-font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================ */
/* === LOT 18 INCIDENTS ====================================================== */
/* ============================================================================ */

.la-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--la-r-pill-sm);
	white-space: nowrap;
}
.la-pill--high { background: #fef2f2; color: var(--la-red); border: 1px solid #fecaca; }
.la-pill--med  { background: var(--la-amber-light); color: #92400e; border: 1px solid #fde68a; }
.la-pill--low  { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.la-pill--info { background: #dbeafe; color: #1e40af; }
.la-pill--warn { background: var(--la-amber-light); color: #92400e; }
.la-pill--ok   { background: var(--la-emerald-light); color: var(--la-emerald-dark); }
.la-pill--fail { background: var(--la-red-light); color: var(--la-red); }
.la-pill--neutral { background: var(--la-slate-100); color: var(--la-slate-600); }
.la-pill--resolved {
	background: transparent;
	color: var(--la-emerald-dark);
	padding: 3px 0;
}
.la-pill--resolved::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--la-emerald);
}

#la-root .la-pill--locked {
	background: rgba(245, 158, 11, 0.14);
	color: #92400e;
	border: 1px solid rgba(245, 158, 11, 0.35);
}
#la-root .la-pill--blacklist {
	background: #4a0000;
	color: #fff;
	font-weight: 600;
	border: 1px solid #2a0000;
}
#la-root .la-pill--blacklist::before {
	content: "⛔ ";
}
#la-root .la-pill--blocked {
	background: rgba(220, 38, 38, 0.12);
	color: #991b1b;
	border: 1px solid rgba(220, 38, 38, 0.35);
}
#la-root .la-pill__suffix {
	margin-left: 6px;
	font-weight: 500;
	opacity: 0.92;
}
#la-root .la-inc-card__block-row,
#la-root .la-inc-drill__block-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
#la-root .la-ghost-btn--danger {
	color: #991b1b;
	border-color: rgba(220, 38, 38, 0.35);
}
#la-root .la-ghost-btn--danger:hover {
	background: rgba(220, 38, 38, 0.08);
}

.la-incident {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-left: 4px solid var(--la-slate-300);
	border-radius: var(--la-r-card-md);
	padding: 20px 22px;
	margin-bottom: 14px;
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.la-incident:hover {
	border-color: var(--la-slate-300);
	transform: translateY(-1px);
	box-shadow: var(--la-shadow-card-hover);
}
.la-incident--high { border-left-color: var(--la-red); }
.la-incident--med  { border-left-color: var(--la-amber); }
.la-incident--low  { border-left-color: #3b82f6; }
.la-incident--resolved { border-left-color: var(--la-emerald); opacity: 0.85; }

.la-incident__top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	justify-content: space-between;
	flex-wrap: wrap;
}
.la-incident__top-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.la-incident__top h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--la-slate-900);
}
.la-incident__meta {
	display: flex;
	gap: 18px;
	font-size: 12px;
	color: var(--la-slate-600);
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.la-incident__meta b { color: var(--la-slate-900); font-weight: 600; }
.la-incident__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px 28px;
	padding: 12px 0;
	border-top: 1px solid var(--la-slate-100);
	border-bottom: 1px solid var(--la-slate-100);
	margin-bottom: 12px;
}
.la-incident__details > div { display: flex; flex-direction: column; gap: 2px; }
.la-incident__details label {
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--la-slate-500);
	font-weight: 600;
}
.la-incident__details span {
	font-size: 12px;
	color: var(--la-slate-800);
}
.la-incident__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.la-empty-hint {
	padding: 40px 16px;
	text-align: center;
	color: var(--la-slate-500);
	font-size: 13px;
	background: #fff;
	border: 1px dashed var(--la-slate-200);
	border-radius: var(--la-r-card-md);
}

/* ============================================================================ */
/* === LOT 18 EVENTS TABLE =================================================== */
/* ============================================================================ */

.la-events-wrap {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	max-height: 720px;
	overflow-y: auto;
	overflow-x: hidden;
}
.la-events-wrap .la-evt-head,
.la-events-wrap .la-evt-row {
	display: grid;
	/* IPv6 addresses (e.g. 2001:67c:289c:4::131) need more than 150px at
	 * 12.5px mono to fit on a single line. Widen the IP column and allow
	 * break-all fallback on .la-evt-ip so very long IPv6 wrap inside the
	 * cell instead of overflowing into "User · action" (reported by beta
	 * tester 2026-04-19 on cours-ndrc.fr). */
	grid-template-columns: 90px 70px 200px 1.3fr 1fr 100px;
	gap: 14px;
	align-items: center;
	padding: 10px 18px;
	font-size: 13px;
}
.la-events-wrap .la-evt-head {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--la-slate-50);
	padding: 12px 18px;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--la-slate-500);
	font-weight: 600;
	border-bottom: 1px solid var(--la-slate-200);
}
.la-events-wrap .la-evt-row {
	border-bottom: 1px solid var(--la-slate-100);
	transition: background-color 0.12s;
}
.la-events-wrap .la-evt-row:hover { background: var(--la-slate-50); }
.la-events-wrap .la-evt-row:last-of-type { border-bottom: none; }
.la-events-wrap .la-evt-t {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--la-slate-900);
	display: flex;
	flex-direction: column;
}
.la-events-wrap .la-evt-t small {
	font-size: 10px;
	color: var(--la-slate-400);
	font-weight: 400;
	margin-top: 1px;
}
.la-events-wrap .la-evt-ip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--la-slate-700);
	/* Allow long IPv6 to wrap inside the cell rather than bleed right.
	 * overflow-wrap: anywhere targets the colon-separated hextets
	 * specifically; word-break: break-all is the universal fallback for
	 * browsers that do not yet support `anywhere`. */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-all;
	line-height: 1.3;
}
.la-events-wrap .la-evt-ip svg { color: var(--la-slate-400); flex-shrink: 0; }
.la-evt-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.la-evt-avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--la-navy);
	color: var(--la-gold);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 11px;
	flex-shrink: 0;
}
.la-evt-user.is-fail .la-evt-avatar { background: var(--la-red-light); color: var(--la-red); }
.la-evt-detail { min-width: 0; line-height: 1.3; }
.la-evt-detail b { display: block; font-weight: 600; font-size: 13px; color: var(--la-slate-900); }
.la-evt-detail small { display: block; font-size: 11px; color: var(--la-slate-500); }
.la-evt-detail small.is-bad { color: var(--la-red); }

.la-evt-ua {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--la-slate-600);
}
.la-evt-ua svg { color: var(--la-slate-400); flex-shrink: 0; }

.la-evt-when {
	font-size: 11px;
	color: var(--la-slate-500);
	text-align: right;
}

/* Footer pager */
.la-evt-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--la-slate-50);
	padding: 14px 18px;
	border-top: 1px solid var(--la-slate-200);
	font-size: 13px;
	color: var(--la-slate-600);
}
.la-evt-foot b { color: var(--la-slate-900); font-weight: 700; }
.la-pager { display: inline-flex; gap: 4px; }
.la-pager__btn {
	min-width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--la-slate-200);
	background: #fff;
	border-radius: var(--la-r-btn);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--la-slate-700);
	padding: 0 8px;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.la-pager__btn:hover { background: var(--la-slate-50); border-color: var(--la-slate-300); color: var(--la-slate-900); }
.la-pager__btn.is-active {
	background: var(--la-slate-900);
	color: #fff;
	border-color: var(--la-slate-900);
}

@media (max-width: 700px) {
	.la-events-wrap .la-evt-head,
	.la-events-wrap .la-evt-row {
		grid-template-columns: 80px 60px 120px 1fr 80px;
		gap: 10px;
	}
	.la-events-wrap .la-evt-head span:nth-child(5),
	.la-events-wrap .la-evt-row .la-evt-ua { display: none; }
}

/* ============================================================================ */
/* === LOT 18 ACTIVITY TABLE ================================================= */
/* ============================================================================ */

.la-act-wrap {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	overflow: hidden;
}
.la-act-head,
.la-act-row {
	display: grid;
	grid-template-columns: 120px 200px 110px 1.4fr 130px;
	gap: 14px;
	align-items: center;
	padding: 10px 18px;
	font-size: 13px;
}
.la-act-head {
	background: var(--la-slate-50);
	padding: 12px 18px;
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--la-slate-500);
	font-weight: 600;
	border-bottom: 1px solid var(--la-slate-200);
}
.la-act-row { border-bottom: 1px solid var(--la-slate-100); transition: background-color 0.12s; }
.la-act-row:hover { background: var(--la-slate-50); }
.la-act-row:last-of-type { border-bottom: none; }
.la-act-t {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--la-slate-900);
	display: flex;
	flex-direction: column;
}
.la-act-t small {
	font-size: 10px;
	color: var(--la-slate-400);
	font-weight: 400;
	margin-top: 1px;
}
.la-act-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.la-act-user-text { min-width: 0; line-height: 1.3; }
.la-act-user-text b { display: block; font-weight: 600; font-size: 13px; color: var(--la-slate-900); }
.la-act-user-text small { display: block; font-size: 11px; color: var(--la-slate-500); }
.la-act-obj { font-size: 12px; color: var(--la-slate-700); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.la-act-kind { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--la-slate-500); }
.la-act-code {
	font-family: var(--la-font-mono);
	font-size: 12px;
	background: var(--la-slate-100);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--la-slate-800);
}
.la-act-ip {
	font-size: 12px;
	color: var(--la-slate-600);
}

@media (max-width: 700px) {
	.la-act-head,
	.la-act-row {
		grid-template-columns: 90px 140px 90px 1fr;
		gap: 10px;
	}
	.la-act-head span:nth-child(5),
	.la-act-row .la-act-ip { display: none; }
}

/* ============================================================================ */
/* === LOT 18 SETTINGS ======================================================= */
/* ============================================================================ */

.la-score-card {
	background: linear-gradient(135deg, var(--la-navy) 0%, var(--la-navy-2) 100%);
	color: #fff;
	border-radius: var(--la-r-hero);
	padding: 22px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 24px;
	align-items: center;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--la-shadow-hero);
}
.la-score-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 50%, rgba(16,185,129,0.15), transparent 55%);
	pointer-events: none;
}
@media (max-width: 700px) {
	.la-score-card {
		grid-template-columns: auto 1fr;
		gap: 16px;
	}
	.la-score-cta { grid-column: 1 / -1; justify-self: start; }
}

#la-root .la-score-card .la-score-ring {
	width: 88px; height: 88px;
	position: relative;
	z-index: 1;
	background: transparent;
	border: none;
	box-shadow: none;
	outline: none;
	flex-shrink: 0;
}
#la-root .la-score-card .la-score-ring svg {
	width: 88px; height: 88px;
	display: block;
	overflow: visible;
}
#la-root .la-score-card .la-score-ring__bg {
	/* Explicit — prevents the legacy .la-score-ring__bg rule (now scoped
	   to .la-score-block for Hardening) from leaking through. */
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 8;
	fill: none;
}
#la-root .la-score-card .la-score-ring__fg {
	stroke: #10b981;
	stroke-width: 8;
	fill: none;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s ease-out;
}
#la-root .la-score-card .la-score-ring__num {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.la-score-copy { position: relative; z-index: 1; }
.la-score-kicker {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: var(--la-slate-400);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.la-score-copy h3 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}
.la-score-copy p {
	margin: 0;
	font-size: 13px;
	color: var(--la-slate-300);
	line-height: 1.5;
	max-width: 440px;
}

#la-root .la-score-cta {
	background: var(--la-gold);
	color: var(--la-navy);
	border: none;
	padding: 10px 16px;
	border-radius: var(--la-r-btn-lg);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: transform 0.15s, box-shadow 0.15s;
	position: relative;
	z-index: 1;
}
#la-root .la-score-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(244,208,63,0.45);
	color: var(--la-navy);
}

.la-settings-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.la-settings-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ============================================================================ */
/* === LOT 18 SETTINGS ROW (V4 — quick-overview anchor, deep-links to form) == */
/* ============================================================================ */

#la-root .la-setting-row {
	display: grid;
	grid-template-columns: 44px 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 18px 20px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card-md);
	transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}
#la-root .la-setting-row:hover {
	border-color: var(--la-slate-300);
	background: var(--la-slate-50);
	transform: translateY(-1px);
	text-decoration: none;
}

.la-setting-row__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--la-r-card-sm);
	background: var(--la-slate-100);
	color: var(--la-slate-500);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.la-setting-row__icon--on   { background: var(--la-emerald-light); color: var(--la-emerald-dark); }
.la-setting-row__icon--off  { background: var(--la-slate-100);     color: var(--la-slate-500); }
.la-setting-row__icon--warn { background: var(--la-amber-light);   color: #92400e; }

.la-setting-row__text { min-width: 0; line-height: 1.35; }
.la-setting-row__text b {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 14px;
	color: var(--la-slate-900);
	margin-bottom: 2px;
}
.la-setting-row__text small {
	display: block;
	font-size: 12px;
	color: var(--la-slate-500);
}

/* Enable/Disable action button on the row (FIX S4) */
.la-setting-row__action {
	font-size: 12px;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: var(--la-r-btn);
	border: 1px solid var(--la-slate-200);
	background: #fff;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	font-family: inherit;
}
.la-setting-row__action--danger {
	color: var(--la-red);
}
.la-setting-row__action--danger:hover {
	background: var(--la-red-light);
	border-color: var(--la-red-light);
	color: var(--la-red);
}
.la-setting-row__action--enable {
	color: var(--la-emerald-dark);
}
.la-setting-row__action--enable:hover {
	background: var(--la-emerald-light);
	border-color: var(--la-emerald-light);
	color: var(--la-emerald-dark);
}

.la-setting-row__chevron {
	font-size: 22px;
	color: var(--la-slate-400);
	font-weight: 400;
	line-height: 1;
	transition: transform 0.15s, color 0.15s;
}
#la-root .la-setting-row:hover .la-setting-row__chevron {
	color: var(--la-slate-700);
	transform: translateX(3px);
}

/* ============================================================================ */
/* === LOT 18 V8 SETTINGS WRAPPER — collapsed row + inline expansion (details) === */
/* ============================================================================ */

.la-setting-wrapper {
	background: transparent;
	border: none;
	border-radius: var(--la-r-card-md);
	overflow: visible;
}
.la-setting-wrapper > summary {
	list-style: none;
	cursor: pointer;
}
.la-setting-wrapper > summary::-webkit-details-marker { display: none; }
.la-setting-wrapper > summary::marker { content: ''; }

/* Pure-CSS chevron — right by default, rotates 90° (pointing down) when open */
#la-root .la-setting-wrapper .la-setting-row__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--la-slate-400);
	border-bottom: 2px solid var(--la-slate-400);
	transform: rotate(-45deg);
	transition: transform 0.18s ease, border-color 0.15s;
	font-size: 0;
	line-height: 0;
	margin-right: 4px;
}
#la-root .la-setting-wrapper[open] > summary .la-setting-row__chevron {
	transform: rotate(45deg);
}
#la-root .la-setting-wrapper[open] > summary:hover .la-setting-row__chevron {
	border-color: var(--la-slate-700);
	transform: rotate(45deg);
}
#la-root .la-setting-wrapper:not([open]) > summary:hover .la-setting-row__chevron {
	border-color: var(--la-slate-700);
	transform: rotate(-45deg) translate(2px, 2px);
}

/* When open, connect the summary row with the body (flat bottom on the row) */
.la-setting-wrapper[open] > .la-setting-row {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

/* The expanded body — connected card directly below the row */
.la-setting-wrapper__body {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-top: none;
	border-radius: 0 0 var(--la-r-card-md) var(--la-r-card-md);
	padding: 0;
}

/*
 * The inner .la-card--section (rendered by each sections/*.php) is FLATTENED
 * inside the wrapper: no border, no radius, no shadow, no margin. The
 * wrapper itself carries the outer border/radius. We also HIDE the inner
 * card-header (icon + title + status pill + Disable button) because the
 * wrapper's summary row already shows those elements — leaving the inner
 * header would duplicate every module's header (BUG 1).
 */
#la-root .la-setting-wrapper__body .la-card--section {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
/*
 * Higher specificity (#la-root prefix) is REQUIRED to beat the base
 * '#la-root .la-card--section > .la-card-header { display: flex }' rule
 * from Lot 5bis at line ~1781. Without #la-root my selector loses the
 * cascade and the inner header keeps rendering.
 */
#la-root .la-setting-wrapper__body .la-card--section > .la-card-header,
#la-root .la-setting-wrapper__body .la-card--section > .la-card-sep {
	display: none;
}
#la-root .la-setting-wrapper__body .la-card--section > .la-card-body {
	padding: 20px;
}

/*
 * "Forgot your login URL?" recovery details — rendered inside hide-login.php
 * AFTER the main .la-card--section. Inside the wrapper body it should read
 * as a sub-hint pulled tight against the Hide Login form, not a second
 * standalone card (BUG 3).
 */
#la-root .la-setting-wrapper__body .la-section-subhint,
#la-root .la-setting-wrapper__body .la-recovery {
	background: var(--la-slate-50, #f8fafc);
	border: 1px solid var(--la-slate-200, #e2e8f0);
	border-radius: 10px;
	margin: 14px 20px 20px;
	font-size: 12.5px;
	overflow: hidden;
}
#la-root .la-setting-wrapper__body .la-section-subhint > summary,
#la-root .la-setting-wrapper__body .la-recovery > summary {
	padding: 10px 18px 10px 20px;
	font-size: 12.5px;
	color: var(--la-slate-700, #334155);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
#la-root .la-setting-wrapper__body .la-section-subhint > summary::-webkit-details-marker,
#la-root .la-setting-wrapper__body .la-recovery > summary::-webkit-details-marker { display: none; }
#la-root .la-setting-wrapper__body .la-section-subhint > summary::marker,
#la-root .la-setting-wrapper__body .la-recovery > summary::marker { content: ''; }

/* Disable button inside the summary row — muted red that deepens on hover
   (BUG 4). Sits between the text and the chevron, flex-shrink so it
   never overlaps the row icon. #la-root prefix to beat the base .la-btn
   rules in the cascade. */
#la-root .la-setting-row__disable {
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	color: #dc2626;
	background: transparent;
	border: 1px solid var(--la-slate-200, #e2e8f0);
	padding: 6px 12px;
	border-radius: var(--la-r-btn, 7px);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
#la-root .la-setting-row__disable:hover,
#la-root .la-setting-row__disable:focus {
	background: #fee2e2;
	border-color: #fecaca;
	color: #b91c1c;
	outline: none;
}

/* Pills on the summary row use the handoff pill tokens (ok/warn/neutral). */
.la-setting-row .la-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--la-r-pill);
	line-height: 1.2;
}
.la-setting-row .la-pill.la-pill--ok::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--la-emerald);
}

/* Detailed section forms below the overview list */
.la-settings-details {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.la-setting-section {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card-md);
	padding: 24px;
	scroll-margin-top: 120px;
}

/* "Forgot your login URL?" hint (FIX S5) */
.la-setting-hint {
	background: var(--la-slate-50);
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card-sm);
	overflow: hidden;
}
.la-setting-hint > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	cursor: pointer;
	font-size: 13px;
	color: var(--la-slate-700);
	list-style: none;
	transition: color 0.15s;
}
.la-setting-hint > summary::-webkit-details-marker { display: none; }
.la-setting-hint > summary::marker { content: ''; }
.la-setting-hint > summary:hover { color: var(--la-slate-900); }
.la-setting-hint__chevron {
	font-size: 18px;
	color: var(--la-slate-400);
	transition: transform 0.15s;
	line-height: 1;
}
.la-setting-hint[open] > summary .la-setting-hint__chevron {
	transform: rotate(90deg);
}
.la-setting-hint__body {
	padding: 0 16px 14px;
	font-size: 13px;
	color: var(--la-slate-600);
}
.la-setting-hint__body p {
	margin: 0 0 6px;
}
.la-setting-hint__body code {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--la-slate-200);
	padding: 4px 8px;
	border-radius: 4px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--la-slate-900);
}

/* ============================================================================ */
/* === LOT 18 V5 — FINAL POLISH PASS ========================================== */
/* ============================================================================ */

/* --- S1: Settings column density (9 cards in one viewport height) --- */
#la-root .la-settings-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#la-root .la-card--section {
	padding: 16px 20px;
	margin-bottom: 0; /* gap on the column handles spacing */
}
#la-root .la-card--section > .la-card-header {
	padding: 0;
}

/* --- Z3 / A1: kill remaining blue text (IPs, filters, table anchors) --- */
#la-root .la-mono,
#la-root .la-evt-ip,
#la-root .la-evt-ip.la-mono,
#la-root .la-live-events__ip,
#la-root .la-live-events__ip.la-mono,
#la-root .la-act-ip,
#la-root .la-act-ip.la-mono,
#la-root .la-act-obj .la-act-code {
	color: var(--la-slate-700);
}
#la-root .la-fb-field select,
#la-root .la-fb-field input,
#la-root .la-filter-bar select,
#la-root .la-filter-bar input {
	color: var(--la-slate-700);
}
#la-root .la-fb-field select::placeholder,
#la-root .la-fb-field input::placeholder { color: var(--la-slate-400); }
#la-root td a,
#la-root tbody a,
#la-root .la-evt-row a,
#la-root .la-act-row a { color: inherit; }

/* --- Z4: page header lead readable line length --- */
#la-root .la-page-header .la-lead {
	max-width: 640px;
	text-wrap: pretty;
}

/* --- O2: "Set up 2FA →" CTA bump --- */
#la-root .la-action-banner__cta {
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
}

/* --- O3: chart footer dynamic variants --- */
#la-root .la-chart__highlight--fail  { color: var(--la-red); font-weight: 600; }
#la-root .la-chart__highlight--ok    { color: var(--la-emerald-dark); font-weight: 600; }
#la-root .la-chart__highlight--muted { color: var(--la-slate-400); font-weight: 500; }

/* --- O4: Overview live-events Time column wider (70 → 80) + IP 150 → 190 for IPv6 --- */
#la-root .la-events-card .la-evt-head,
#la-root .la-events-card .la-live-events__row {
	grid-template-columns: 80px 60px 190px 1fr 90px;
}

/* --- O5: fail avatar initial readable weight --- */
#la-root .la-live-events__avatar--fail {
	background: var(--la-red-light);
	color: var(--la-red);
	font-weight: 700;
}

/* --- E2: Live view button — pulsing emerald dot --- */
#la-root .la-live-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--la-emerald);
	box-shadow: 0 0 6px var(--la-emerald);
	animation: la-hero-blink 1.6s ease-in-out infinite;
	display: inline-block;
	flex-shrink: 0;
}

/* --- E5: Events row density (40px rows) --- */
#la-root .la-events-wrap .la-evt-head,
#la-root .la-events-wrap .la-evt-row { padding: 10px 18px; }

/* --- E6: custom scrollbar on events wrap --- */
.la-events-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.la-events-wrap::-webkit-scrollbar-track { background: transparent; }
.la-events-wrap::-webkit-scrollbar-thumb {
	background: var(--la-slate-300);
	border-radius: 4px;
}
.la-events-wrap::-webkit-scrollbar-thumb:hover { background: var(--la-slate-400); }

/* --- A4: Activity avatar → text gap --- */
#la-root .la-act-user { gap: 12px; }

/* --- I4: drill-down polish --- */
#la-root .la-incident-back {
	color: var(--la-slate-700);
	text-decoration: none;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
}
#la-root .la-incident-back:hover { color: var(--la-slate-900); }
#la-root .la-incident-back__arrow { color: var(--la-slate-500); font-size: 15px; }

#la-root .la-drill__timeline { position: relative; }
#la-root .la-drill__timeline::before {
	content: '';
	position: absolute;
	left: 160px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--la-slate-200);
}
#la-root .la-drill__ua-list li,
#la-root .la-drill__ua-list code,
#la-root .la-drill__ua-list .la-mono {
	font-family: var(--la-font-mono);
	color: var(--la-slate-800);
	background: var(--la-slate-100);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}

/* --- S2: Forgot URL subhint (under Hide Login) --- */
#la-root .la-section-subhint {
	background: var(--la-slate-50);
	border: 1px solid var(--la-slate-200);
	border-top: none;
	border-radius: 0 0 var(--la-r-card-sm) var(--la-r-card-sm);
	margin-top: -2px;
	overflow: hidden;
}
#la-root .la-section-subhint > summary {
	list-style: none;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 12px;
	color: var(--la-slate-700);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#la-root .la-section-subhint > summary::-webkit-details-marker { display: none; }
#la-root .la-section-subhint > summary::marker { content: ''; }
#la-root .la-section-subhint > summary:hover { color: var(--la-slate-900); }
#la-root .la-section-subhint__chevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--la-slate-400);
	border-bottom: 2px solid var(--la-slate-400);
	transform: rotate(-45deg);
	transition: transform 0.2s;
}
#la-root .la-section-subhint[open] > summary .la-section-subhint__chevron {
	transform: rotate(45deg);
}
#la-root .la-section-subhint__body {
	padding: 12px 20px 16px;
	font-size: 13px;
	color: var(--la-slate-700);
}

/* --- S3: Hide Login slug input (44px + gold left-border) --- */
#la-root .la-lab__input {
	height: 44px;
}
#la-root .la-lab {
	border-left: 4px solid var(--la-gold);
}

/* --- S3: Blocked access redirect cards — selected state + recommended pill --- */
#la-root .la-radio-opt {
	position: relative;
	background: #fff;
	border: 1px solid var(--la-slate-200);
}
#la-root .la-radio-opt--active {
	border: 2px solid var(--la-gold);
	background: #fffbeb;
}
#la-root .la-radio-opt__tag {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--la-gold);
	color: var(--la-navy);
	padding: 2px 6px;
	border-radius: 3px;
}

/* --- S4: recovery methods polish --- */
#la-root .la-cli {
	font-family: var(--la-font-mono);
	background: var(--la-slate-100);
	color: var(--la-slate-800);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}
/* FTP recovery caveat — amber (not red). Disabling LoginArmor via FTP is
   serious but not catastrophic-red; amber matches the severity and the
   rest of the design system's "warn" palette. */
#la-root .la-danger-note {
	background: #fffbeb;
	color: #92400e;
	padding: 10px 14px;
	border-radius: var(--la-r-card-sm);
	border: 1px solid #fde68a;
	border-left: 3px solid #f59e0b;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	margin-top: 8px;
}
#la-root .la-danger-note svg { color: #f59e0b; }
#la-root .la-danger-note strong { color: #92400e; }

/* --- I2: resolved card left-border full opacity --- */
#la-root .la-incident--resolved {
	border-left-color: var(--la-emerald);
	opacity: 0.85;
}

/* ============================================================================ */
/* === LOT 18 V6 — INCIDENT DETAIL =========================================== */
/* ============================================================================ */

/* Hero */
#la-root .la-inc-hero {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-left: 4px solid var(--la-slate-300);
	border-radius: var(--la-r-card);
	padding: 24px 26px;
	margin-bottom: 18px;
}
#la-root .la-inc-hero--open { border-left-color: var(--la-red); }
#la-root .la-inc-hero--resolved { border-left-color: var(--la-emerald); }

#la-root .la-inc-hero__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 10px;
}
#la-root .la-inc-hero__title-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
#la-root .la-inc-hero__title {
	margin: 0;
	font-family: var(--la-font-mono);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--la-slate-900);
}

#la-root .la-inc-hero__metrics,
#la-root .la-inc-hero__tech {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 24px;
	margin: 0 0 14px;
	padding: 0 0 14px;
}
#la-root .la-inc-hero__tech {
	border-top: 1px solid var(--la-slate-100);
	padding-top: 14px;
	margin-top: -4px;
}
#la-root .la-inc-hero__metrics dt,
#la-root .la-inc-hero__tech dt {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--la-slate-500);
	text-transform: uppercase;
	margin: 0 0 4px;
}
#la-root .la-inc-hero__metrics dd {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--la-slate-900);
	margin: 0;
	line-height: 1;
}
#la-root .la-inc-hero__metrics dd small {
	font-size: 11px;
	font-weight: 500;
	color: var(--la-slate-500);
	margin-left: 4px;
	letter-spacing: 0;
	text-transform: lowercase;
}
#la-root .la-inc-hero__tech dd {
	font-size: 13px;
	color: var(--la-slate-800);
	margin: 0;
	word-break: break-all;
}

#la-root .la-inc-hero__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	border-top: 1px solid var(--la-slate-100);
	padding-top: 14px;
	margin-top: -4px;
}
#la-root .la-inc-hero__export { margin-left: auto; }
@media (max-width: 900px) {
	#la-root .la-inc-hero__metrics,
	#la-root .la-inc-hero__tech { grid-template-columns: repeat(2, 1fr); }
	#la-root .la-inc-hero__export { margin-left: 0; }
}

/* Explainer */
#la-root .la-inc-explainer {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 14px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-left: 4px solid var(--la-amber);
	border-radius: var(--la-r-card-md);
	padding: 16px 18px;
	margin-bottom: 18px;
}
#la-root .la-inc-explainer__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--la-r-btn-lg);
	background: var(--la-amber-light);
	color: #92400e;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
#la-root .la-inc-explainer__title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: #78350f;
}
#la-root .la-inc-explainer__body p {
	margin: 0 0 4px;
	font-size: 13px;
	color: #78350f;
	line-height: 1.55;
	text-wrap: pretty;
}
#la-root .la-inc-explainer__body p:last-child { margin-bottom: 0; }
#la-root .la-inc-explainer__body strong { color: #78350f; }

/* Section head (reused) */
#la-root .la-inc-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 22px 2px 12px;
}
#la-root .la-inc-section-head h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--la-slate-900);
	display: flex;
	align-items: center;
	gap: 8px;
}
#la-root .la-inc-section-head .la-pill { margin-left: 4px; }

/* Timeline */
#la-root .la-inc-timeline-card {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	padding: 8px 0;
	position: relative;
}
#la-root .la-inc-timeline-card::before {
	content: '';
	position: absolute;
	left: 174px;
	top: 30px;
	bottom: 30px;
	width: 1px;
	background: var(--la-slate-200);
}
#la-root .la-inc-timeline__row {
	display: grid;
	grid-template-columns: 160px 70px auto 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 12px 22px;
	border-bottom: 1px solid var(--la-slate-100);
	font-size: 13px;
	transition: background-color 0.12s;
	position: relative;
}

/* Lot 18 V10.13 — when the incident has a mix of matched + related events
   we render a 6th column with a small MATCH / RELATED pill. Rows flagged
   "related" get dimmed so the pattern events stand out visually. */
#la-root .la-inc-timeline-card--with-match .la-inc-timeline__row {
	grid-template-columns: 160px 70px 78px auto 1fr auto;
}
#la-root .la-inc-timeline__row--related {
	opacity: 0.62;
	background: var(--la-slate-50, #f8fafc);
}
#la-root .la-inc-timeline__row--related:hover { opacity: 0.85; }

#la-root .la-inc-timeline__match {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	padding: 3px 7px;
	border-radius: 4px;
	text-transform: uppercase;
	line-height: 1.2;
	font-family: var(--la-font-mono);
}
#la-root .la-inc-timeline__match--yes {
	background: rgba(16,185,129,0.12);
	color: var(--la-emerald-dark, #065f46);
	border: 1px solid rgba(16,185,129,0.3);
}
#la-root .la-inc-timeline__match--no {
	background: var(--la-slate-100, #f1f5f9);
	color: var(--la-slate-500, #64748b);
	border: 1px solid var(--la-slate-200, #e2e8f0);
}

#la-root .la-inc-section-subhint {
	margin: 4px 0 14px;
	padding: 8px 14px;
	background: var(--la-slate-50, #f8fafc);
	border-left: 3px solid var(--la-slate-300, #cbd5e1);
	border-radius: 0 6px 6px 0;
	font-size: 12px;
	color: var(--la-slate-600, #475569);
	line-height: 1.5;
}
#la-root .la-inc-timeline__row:last-child { border-bottom: none; }
#la-root .la-inc-timeline__row:hover { background: var(--la-slate-50); }
#la-root .la-inc-timeline__row::after {
	content: '';
	position: absolute;
	left: 170px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--la-slate-400);
	box-shadow: 0 0 0 3px #fff;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}
#la-root .la-inc-timeline__row.la-inc-timeline__dot--ok::after   { background: var(--la-emerald); }
#la-root .la-inc-timeline__row.la-inc-timeline__dot--fail::after { background: var(--la-red); }
#la-root .la-inc-timeline__row.la-inc-timeline__dot--lock::after { background: var(--la-amber); }

#la-root .la-inc-timeline__time {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
#la-root .la-inc-timeline__time .la-mono {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--la-slate-900);
}
#la-root .la-inc-timeline__time small {
	font-size: 10px;
	color: var(--la-slate-400);
	font-weight: 400;
}

#la-root .la-inc-timeline__ip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--la-slate-700);
}
#la-root .la-inc-timeline__ip svg {
	color: var(--la-slate-400);
	flex-shrink: 0;
}

#la-root .la-inc-timeline__detail {
	min-width: 0;
	line-height: 1.3;
}
#la-root .la-inc-timeline__detail b {
	display: block;
	font-weight: 600;
	color: var(--la-slate-900);
	font-size: 13px;
}
#la-root .la-inc-timeline__detail small {
	display: block;
	font-size: 11px;
	color: var(--la-slate-500);
	margin-top: 1px;
}

#la-root .la-inc-timeline__meta {
	font-size: 11px;
	color: var(--la-slate-500);
	text-align: right;
}

@media (max-width: 900px) {
	#la-root .la-inc-timeline-card::before { display: none; }
	#la-root .la-inc-timeline__row {
		grid-template-columns: 1fr 70px;
	}
	#la-root .la-inc-timeline__row::after { display: none; }
	#la-root .la-inc-timeline__ip,
	#la-root .la-inc-timeline__meta { display: none; }
}

/* User agents */
#la-root .la-inc-ua-card {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	padding: 4px 22px;
}
#la-root .la-inc-ua-card__row {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--la-slate-100);
}
#la-root .la-inc-ua-card__row:last-child { border-bottom: none; }
#la-root .la-inc-ua-card__icon {
	color: var(--la-slate-400);
	display: grid;
	place-items: center;
}
#la-root .la-inc-ua-card__ua {
	font-family: var(--la-font-mono);
	font-size: 12.5px;
	color: var(--la-slate-800);
	word-break: break-all;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
#la-root .la-inc-ua-card__count {
	font-size: 11px;
	color: var(--la-slate-500);
	text-align: right;
	white-space: nowrap;
}

/* Suggested actions */
#la-root .la-inc-actions-card {
	background: #fff;
	border: 1px solid var(--la-slate-200);
	border-radius: var(--la-r-card);
	padding: 4px 22px;
}
#la-root .la-inc-action-row {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--la-slate-100);
}
#la-root .la-inc-action-row:last-child { border-bottom: none; }
#la-root .la-inc-action__icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--la-slate-100);
	color: var(--la-slate-700);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
#la-root .la-inc-action__icon--done {
	background: var(--la-emerald-light);
	color: var(--la-emerald-dark);
}
#la-root .la-inc-action__text b {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var(--la-slate-900);
}
#la-root .la-inc-action__text small {
	display: block;
	font-size: 12px;
	color: var(--la-slate-600);
	margin-top: 2px;
}

/* ============================================================================ */
/* === LOT 18 V8 DASHBOARD WIDGET — 5-section redesign scoped under .la-widget = */
/* ============================================================================ */

/*
 * Everything below lives inside WP's .postbox .inside so we don't touch the
 * widget's native header (title + up/down chevrons). Each subsection manages
 * its own padding; .la-widget itself has zero padding.
 */

.la-widget {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: var(--la-slate-900, #0f172a);
	background: #fff;
	/*
	 * Cancel WP .inside padding on ALL four sides so the hero touches the
	 * widget header on top AND the widget edges left/right/bottom. Some
	 * WP versions render .postbox .inside with a non-zero padding-top
	 * (dashboard admin theme variations) — the negative margin-top:-12px
	 * covers both the 0-top and 12-top cases.
	 */
	margin: -12px;
	/* Container context for the narrow-column fallbacks below. */
	container-type: inline-size;
	container-name: la-widget;
}

/*
 * Small shield logo before the widget title.
 * WP's .postbox-header is flex space-between (.hndle on left, chevrons
 * on right); we keep that intact and just inject the shield as an
 * inline-block ::before on the inner <span> that WP 6.4+ always uses
 * to wrap the title text. If an older WP version renders .hndle
 * without the span wrapper, no shield renders — acceptable fallback.
 */
#login_armor_dashboard .hndle > span:first-child::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	margin-top: -2px;
	background:
		#1a2030
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 L20 6 V12 C20 17 16 21 12 22 C8 21 4 17 4 12 V6 Z'/></svg>")
		center/11px no-repeat;
	border-radius: 4px;
}

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

/* --- HERO (dark navy) -------------------------------------------------- */

.la-widget__hero {
	position: relative;
	background: linear-gradient(135deg, #1a2030 0%, #232a3d 100%);
	color: #fff;
	padding: 14px 16px 10px;
	overflow: hidden;
}
.la-widget__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 30%, rgba(16,185,129,0.18), transparent 55%);
	pointer-events: none;
}
.la-widget__hero::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 4px;
	background: #10b981;
	opacity: 0.6;
}

.la-widget__hero-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: nowrap;
	margin-bottom: 12px;
}
.la-widget__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #10b981;
	background: rgba(16,185,129,0.15);
	border: 1px solid rgba(16,185,129,0.3);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.la-widget__pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
}
.la-widget__last {
	font-size: 10px;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
	white-space: nowrap;
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.la-widget__hero-main {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
}
.la-widget__count {
	min-width: 0;
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	line-height: 1;
}
.la-widget__count b {
	font-size: 34px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-family: var(--la-font-mono, 'JetBrains Mono'), ui-monospace, 'SF Mono', Menlo, monospace;
}
.la-widget__count span {
	font-size: 13.5px;
	font-weight: 500;
	color: #94a3b8;
	margin-left: 8px;
}
.la-widget__trend {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	line-height: 1.2;
	white-space: nowrap;
}
.la-widget__trend-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #94a3b8;
}
.la-widget__trend-delta {
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-top: 3px;
}
.la-widget__trend-delta--down { color: #10b981; }
.la-widget__trend-delta--up   { color: #f87171; }
.la-widget__trend-delta--flat { color: #94a3b8; }

.la-widget__spark {
	position: relative;
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 12px;
}
.la-widget__spark-line {
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
}
.la-widget__spark-area  { opacity: 0; }
.la-widget__spark-peak  { opacity: 0; transform-origin: center; transform-box: fill-box; }

.la-widget__spark-meta {
	position: relative;
	display: flex;
	justify-content: space-between;
	font-size: 9.5px;
	color: #64748b;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.3px;
	margin-top: 4px;
}

/* --- MODULES GRID 2×4 --------------------------------------------------- */

.la-widget__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--la-slate-100, #f1f5f9);
	border-top: 1px solid var(--la-slate-200, #e2e8f0);
	border-bottom: 1px solid var(--la-slate-200, #e2e8f0);
}
.la-widget__mod {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 12px 8px;
	background: #fff;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s;
}
.la-widget__mod:hover,
.la-widget__mod:focus {
	background: var(--la-slate-50, #f8fafc);
	text-decoration: none;
	color: inherit;
	outline: none;
}
.la-widget__mod-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	color: var(--la-slate-400, #94a3b8);
}
.la-widget__mod-icon-svg { width: 20px; height: 20px; }

.la-widget__mod b {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--la-slate-700, #334155);
	letter-spacing: -0.005em;
	line-height: 1.3;
}
.la-widget__mod-state {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--la-slate-400, #94a3b8);
	line-height: 1.2;
}

.la-widget__mod--on .la-widget__mod-icon,
.la-widget__mod--on .la-widget__mod-state {
	color: var(--la-emerald-dark, #059669);
}
.la-widget__mod--warn .la-widget__mod-icon,
.la-widget__mod--warn .la-widget__mod-state {
	color: #b45309;
}
.la-widget__mod--off .la-widget__mod-icon,
.la-widget__mod--off .la-widget__mod-state {
	color: var(--la-slate-400, #94a3b8);
}

/* --- CTA BANNER -------------------------------------------------------- */

.la-widget__cta {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 12px 14px;
	border-top: 1px solid #fde68a;
	background: linear-gradient(to right, #fffbeb, #fef3c7);
}
.la-widget__cta--success {
	background: linear-gradient(to right, #d1fae5, transparent);
	border-top-color: #a7f3d0;
	grid-template-columns: 28px 1fr;
}
.la-widget__cta-icon {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: #f4d03f;
	color: #1a2030;
	border-radius: 6px;
}
.la-widget__cta--success .la-widget__cta-icon {
	background: #10b981;
	color: #fff;
}
.la-widget__cta-text { min-width: 0; }
.la-widget__cta-text b {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--la-slate-900, #0f172a);
	line-height: 1.3;
}
.la-widget__cta-text span {
	display: block;
	font-size: 11.5px;
	color: var(--la-slate-700, #334155);
	line-height: 1.35;
	margin-top: 1px;
}
.la-widget__cta-btn {
	background: #1a2030;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.15s;
	white-space: nowrap;
}
.la-widget__cta-btn:hover,
.la-widget__cta-btn:focus {
	background: #000;
	color: #fff;
	text-decoration: none;
	outline: none;
}

/* --- FOOTER ------------------------------------------------------------ */

.la-widget__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-top: 1px solid var(--la-slate-100, #f1f5f9);
	font-size: 11.5px;
}
.la-widget__foot-left,
.la-widget__foot-right {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: color 0.15s;
}
.la-widget__foot-left {
	color: var(--la-slate-600, #475569);
	font-weight: 500;
}
.la-widget__foot-left:hover,
.la-widget__foot-left:focus {
	color: var(--la-slate-900, #0f172a);
	text-decoration: none;
	outline: none;
}
.la-widget__foot-right {
	color: var(--la-slate-900, #0f172a);
	font-weight: 600;
}
.la-widget__foot-right:hover,
.la-widget__foot-right:focus {
	color: #000;
	text-decoration: none;
	outline: none;
}
.la-widget__foot-arrow {
	display: inline-block;
	transition: transform 0.15s;
}
.la-widget__foot-right:hover .la-widget__foot-arrow {
	transform: translateX(2px);
}

/* --- Animations (motion-safe) ----------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.la-widget__pill-dot {
		animation: la-widget-pulse 2s ease-out infinite;
	}
	@keyframes la-widget-pulse {
		0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
		70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
		100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
	}
	.la-widget__spark-line {
		animation: la-widget-line 1.4s ease-out 0s forwards;
	}
	@keyframes la-widget-line {
		to { stroke-dashoffset: 0; }
	}
	.la-widget__spark-area {
		animation: la-widget-area 0.8s ease-out 1.2s forwards;
	}
	@keyframes la-widget-area {
		to { opacity: 1; }
	}
	.la-widget__spark-peak {
		animation: la-widget-peak-in 0.6s ease-out 1.4s forwards,
		           la-widget-peak-pulse 2s ease-in-out 2s infinite;
	}
	@keyframes la-widget-peak-in {
		from { opacity: 0; r: 2.5; }
		to   { opacity: 1; r: 2.5; }
	}
	@keyframes la-widget-peak-pulse {
		0%, 100% { r: 2.5; }
		50%      { r: 3.8; }
	}
}

/* Reduced-motion fallback: show everything static, no pulse, no draw. */
@media (prefers-reduced-motion: reduce) {
	.la-widget__spark-line { stroke-dashoffset: 0; }
	.la-widget__spark-area { opacity: 1; }
	.la-widget__spark-peak { opacity: 1; }
}

/* Narrow-column fallback — WP moves widget into a 1-col layout < 800px. */
@media (max-width: 420px) {
	.la-widget__grid { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Container-query fallbacks — WP dashboards use 1–4 columns and the widget
 * can land anywhere from ~240px to ~700px wide. At narrow widths we shrink
 * the big count, hide the inline "attacks blocked" label, drop the "Past 7
 * days" kicker, and collapse the grid to 2-col so the layout never wraps.
 */
@container la-widget (max-width: 340px) {
	.la-widget__count b      { font-size: 28px; }
	.la-widget__count span   { display: none; }
	.la-widget__trend-label  { display: none; }
	.la-widget__trend-delta  { font-size: 10.5px; letter-spacing: 0.3px; }
	.la-widget__grid         { grid-template-columns: repeat(2, 1fr); }
	.la-widget__cta          { grid-template-columns: 24px 1fr auto; padding: 10px 12px; gap: 8px; }
	.la-widget__cta--success { grid-template-columns: 24px 1fr; }
	.la-widget__cta-icon     { width: 24px; height: 24px; }
	.la-widget__foot         { padding: 8px 12px; font-size: 11px; }
}
@container la-widget (max-width: 260px) {
	.la-widget__last         { display: none; }
	.la-widget__trend        { display: none; }
	.la-widget__hero-main    { justify-content: flex-start; }
}

/* ============================================================================ */
/* === LOT 18 HARDENING — grouped list + RECOMMENDED pill ==================== */
/* ============================================================================ */

/* Body wrapper inside the Hardening .la-card--section. The outer
   .la-setting-wrapper summary already shows "Hardening · X of 13" — the
   navy hero strip that used to repeat that info was removed in V10.2. */
.la-harden-body { padding: 24px; }

/* A single "category" of toggles — heading on one line (label+count left,
   hint right), then a list of rows separated by 1px slate-100 dividers. */
.la-harden-group {
	border: 1px solid var(--la-slate-200);
	border-radius: 10px;
	background: #fff;
	margin-bottom: 14px;
	overflow: hidden;
}
.la-harden-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px 12px;
	border-bottom: 1px solid var(--la-slate-100);
}
.la-harden-group__label {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--la-slate-900);
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.la-harden-group__count {
	background: var(--la-slate-100);
	color: var(--la-slate-700);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.5px;
	font-family: var(--la-font-mono);
}
.la-harden-group__hint {
	margin: 0;
	font-size: 12px;
	color: var(--la-slate-500);
	text-align: right;
	line-height: 1.4;
}

/* One toggle row — text on the left, switch on the right. */
.la-harden-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	padding: 13px 18px;
	border-top: 1px solid var(--la-slate-100);
}
.la-harden-group__list > .la-harden-row:first-child { border-top: none; }

.la-harden-row__text { min-width: 0; line-height: 1.4; }
.la-harden-row__text b {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--la-slate-900);
	letter-spacing: -0.005em;
	margin-bottom: 2px;
}
.la-harden-row__text small {
	display: block;
	font-size: 12.5px;
	color: var(--la-slate-600);
	line-height: 1.45;
}
.la-harden-row__text small code {
	font-family: var(--la-font-mono);
	font-size: 11.5px;
	background: var(--la-slate-100);
	color: var(--la-slate-800);
	padding: 1px 6px;
	border-radius: 4px;
}

/* ============================================================================ */
/* === LOT 18 V8 BF-FIELD — mono numeric input (label + input + suffix) ====== */
/* ============================================================================ */

.la-bf-field {
	display: inline-grid;
	grid-template-columns: auto auto auto;
	align-items: stretch;
	gap: 0;
	background: var(--la-slate-50);
	border: 1px solid var(--la-slate-200);
	border-radius: 8px;
	overflow: hidden;
	max-width: 100%;
}
.la-bf-field__label {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	font-size: 12px;
	font-weight: 500;
	color: var(--la-slate-600);
	border-right: 1px solid var(--la-slate-200);
	background: #fff;
	white-space: nowrap;
}
#la-root .la-bf-field__input {
	border: none;
	background: var(--la-slate-50);
	padding: 9px 14px;
	font-family: var(--la-font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--la-slate-900);
	width: 90px;
	min-width: 0;
	text-align: center;
	outline: none;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
#la-root .la-bf-field__input::-webkit-outer-spin-button,
#la-root .la-bf-field__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#la-root .la-bf-field__input:focus {
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--la-emerald);
}
.la-bf-field__suffix {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	font-size: 12px;
	font-weight: 500;
	color: var(--la-slate-600);
	border-left: 1px solid var(--la-slate-200);
	background: #fff;
	white-space: nowrap;
}

/* Amber RECOMMENDED pill — same visual treatment across every module. */
.la-pill--recommended {
	background: #fef3c7;
	color: #92400e;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 2px 7px;
	border-radius: 4px;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}

/* Responsive — stack group head on narrow screens. */
@media (max-width: 760px) {
	.la-harden-group__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.la-harden-group__hint { text-align: left; }
}

/* ============ Sponsored rail — OGEEAT + Crash-Test (Lot 19b) ============
   BEM-flavored class names (.wpf-card__body, not .wpf-card .wpf-body) to
   keep specificity flat. #la-root prefix on every rule to win cascade
   against the WP admin baseline + the Lot 1–5bis base rules.
*/
#la-root .wpf-ads {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
#la-root .wpf-ads__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--la-slate-500, #64748b);
	padding: 0 2px 2px;
}
#la-root .wpf-ads__ad-tag {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.2px;
	color: var(--la-slate-400, #94a3b8);
	background: var(--la-slate-100, #f1f5f9);
	padding: 2px 7px;
	border-radius: 3px;
}

#la-root .wpf-card {
	position: relative;
	display: block;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--la-slate-200, #e2e8f0);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
#la-root .wpf-card:hover,
#la-root .wpf-card:focus-visible {
	border-color: var(--la-slate-300, #cbd5e1);
	box-shadow: 0 10px 28px -16px rgba(15, 23, 42, 0.2);
	transform: translateY(-1px);
	text-decoration: none;
}
#la-root .wpf-card:focus-visible {
	outline: 2px solid var(--la-emerald, #10b981);
	outline-offset: 2px;
}

#la-root .wpf-card__hero {
	position: relative;
	aspect-ratio: 772 / 250;
	background: var(--la-slate-100, #f1f5f9);
	overflow: hidden;
	display: block;
}
#la-root .wpf-card__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#la-root .wpf-card__body {
	padding: 14px;
}
#la-root .wpf-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--la-emerald-dark, #059669);
}
#la-root .wpf-card__eyebrow::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--la-emerald, #10b981);
}
#la-root .wpf-card__eyebrow--amber { color: #b45309; }
#la-root .wpf-card__eyebrow--amber::before { background: #f59e0b; }

#la-root .wpf-card__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--la-slate-900, #0f172a);
}
#la-root .wpf-card__copy {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--la-slate-600, #475569);
}
#la-root .wpf-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--la-slate-100, #f1f5f9);
}
#la-root .wpf-card__meta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--la-slate-500, #64748b);
}
#la-root .wpf-card__meta b {
	color: var(--la-slate-800, #1e293b);
	font-weight: 700;
}
#la-root .wpf-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--la-slate-900, #0f172a);
	letter-spacing: -0.005em;
}
#la-root .wpf-card__cta::after {
	content: '→';
	transition: transform 150ms;
}
#la-root .wpf-card:hover .wpf-card__cta::after {
	transform: translateX(3px);
}

/* ---- Crash-Test custom hero (navy gradient + amber hazard stripe) ---- */
#la-root .wpf-crash-hero {
	position: relative;
	aspect-ratio: 772 / 290;
	background: radial-gradient(ellipse 140% 100% at 50% 110%, #1a2847 0%, #0b1220 60%);
	overflow: hidden;
	padding: 18px 18px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
}
#la-root .wpf-crash-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 25%, rgba(239, 68, 68, 0.18), transparent 50%),
		radial-gradient(circle at 15% 80%, rgba(244, 208, 63, 0.08), transparent 50%);
	pointer-events: none;
}
#la-root .wpf-crash-hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: repeating-linear-gradient(135deg, #f4d03f 0 8px, #0b1220 8px 16px);
	opacity: 0.9;
}
#la-root .wpf-crash-hero__badge {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 92px;
	height: 108px;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}
#la-root .wpf-crash-hero__badge svg {
	width: 100%;
	height: 100%;
	display: block;
}
#la-root .wpf-crash-hero__text {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	color: #fff;
}
#la-root .wpf-crash-hero__tagline {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #f4d03f;
}
#la-root .wpf-crash-hero__tagline::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #f4d03f;
	box-shadow: 0 0 6px #f4d03f;
}
#la-root .wpf-crash-hero__headline {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}
#la-root .wpf-crash-hero__headline em {
	font-style: normal;
	color: #f4d03f;
}
#la-root .wpf-crash-hero__meta {
	margin: 0;
	font-size: 10.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.65);
}
#la-root .wpf-crash-hero__meta b {
	color: #fff;
	font-weight: 600;
}
#la-root .wpf-crash-hero__stamp {
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	padding: 3px 7px;
	border: 1.5px solid rgba(244, 208, 63, 0.6);
	color: rgba(244, 208, 63, 0.8);
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 3px;
	background: rgba(11, 18, 32, 0.3);
	backdrop-filter: blur(2px);
	transform: rotate(-4deg);
}

/* Narrow asides — stack the crash hero so the badge stays visible. */
@media (max-width: 360px) {
	#la-root .wpf-crash-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 16px;
	}
	#la-root .wpf-crash-hero__badge {
		width: 72px;
		height: 84px;
	}
}

/* ───────────────────────────────────────────────────────────────
 * Lot 21 — Breach Check section (v2.0.5)
 * Scoped under #la-root for the global cascade, matches the
 * existing Settings-section layout rhythm (la-field, la-toggle).
 * ─────────────────────────────────────────────────────────────── */

#la-root .la-toggle-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
}
#la-root .la-toggle-row__label {
	color: var(--la-text);
	font-size: 14px;
	line-height: 1.4;
}

#la-root .la-breach-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding: 16px;
	background: var(--la-slate-50, #f8fafc);
	border: 1px solid var(--la-slate-200, #e2e8f0);
	border-radius: var(--la-r-card-sm, 8px);
}
#la-root .la-breach-stat__number {
	font-family: var(--la-font-mono, ui-monospace, monospace);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	color: var(--la-text);
}
#la-root .la-breach-stat__label {
	margin-top: 6px;
	color: var(--la-text-muted, #64748b);
	font-size: 12px;
	line-height: 1.4;
}

@media (max-width: 600px) {
	#la-root .la-breach-stats {
		grid-template-columns: 1fr;
	}
}

/* Informational banner inside the Breach Check section explaining
 * the scope of the initial scan. Uses the plugin's brand tokens:
 * neutral slate surface with an emerald left accent (matching the
 * rest of the Settings page). Not alarmist — this is a "how it
 * works" explainer, not a warning. */
#la-root .la-breach-info {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--la-slate-50, #f8fafc);
	border: 1px solid var(--la-slate-200, #e2e8f0);
	border-left: 3px solid var(--la-emerald, #10b981);
	border-radius: var(--la-r-card-sm, 8px);
	color: var(--la-text, #1e293b);
	margin: 0 0 18px;
}
#la-root .la-breach-info__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--la-emerald, #10b981);
	margin-top: 1px;
}
#la-root .la-breach-info__icon svg {
	width: 22px;
	height: 22px;
}
#la-root .la-breach-info__text {
	flex: 1;
	font-size: 13px;
	line-height: 1.5;
}
#la-root .la-breach-info__text strong {
	display: block;
	margin-bottom: 6px;
	color: var(--la-text, #1e293b);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
#la-root .la-breach-info__text p {
	margin: 4px 0 0;
	color: var(--la-text-muted, #475569);
}

/* Flagged users list below the stats grid. Keeps the same card
 * aesthetic (rounded border, subtle background). Amber for
 * passwords (direct threat), blue for emails (informational). */
#la-root .la-breach-list {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--la-r-card-sm, 8px);
	border: 1px solid var(--la-slate-200, #e2e8f0);
	background: #fff;
}
/* Both lists signal "attention needed" — there is nothing healthy
 * about finding a password or an email in a public breach corpus.
 * Use amber on both; password-flagged keeps a stronger visual by
 * also tinting the background, because a known-leaked password
 * grants immediate attacker access while a leaked email only
 * hints that a reused password elsewhere may be at risk. */
#la-root .la-breach-list--pwd {
	border-left: 3px solid var(--la-red, #dc2626);
	background: rgba(220, 38, 38, 0.03);
}
#la-root .la-breach-list--email {
	border-left: 3px solid var(--la-amber, #f59e0b);
	background: rgba(245, 158, 11, 0.03);
}
#la-root .la-breach-list__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--la-text, #1e293b);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
#la-root .la-breach-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#la-root .la-breach-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	background: var(--la-slate-50, #f8fafc);
	border-radius: 6px;
	font-size: 13px;
}
#la-root .la-breach-list__link {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
	color: var(--la-text, #1e293b);
	font-weight: 500;
	min-width: 0;
	flex: 1;
}
#la-root .la-breach-list__link:hover {
	color: #1d4ed8;
	text-decoration: none;
}
#la-root .la-breach-list__display {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#la-root .la-breach-list__login {
	font-size: 11px;
	color: var(--la-text-muted, #64748b);
	font-weight: 400;
}
#la-root .la-breach-list__when,
#la-root .la-breach-list__breaches {
	font-size: 11px;
	color: var(--la-text-muted, #64748b);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Dashboard widget — red "attention needed" badge + subtle pulse
 * on the Breach Check tile when the flagged count is greater than
 * zero. The badge is positioned over the icon, not over the tile
 * corner, so it stays visible on WP's dark and light dashboards. */
.la-widget__mod--alert {
	border-color: #fecaca !important;
	background: #fef2f2 !important;
}
.la-widget__mod--alert .la-widget__mod-icon {
	color: #dc2626 !important;
}
.la-widget__mod--alert .la-widget__mod-state {
	color: #b91c1c !important;
	font-weight: 600;
}
.la-widget__mod-icon {
	position: relative;
	display: inline-flex;
}
.la-widget__mod-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #dc2626;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
	animation: la-breach-badge-pulse 1.8s ease-out infinite;
}
@keyframes la-breach-badge-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Count pill rendered next to the section title on the Settings tab
 * row when Breach Check has flagged accounts, so the admin sees the
 * signal without having to expand the section. */
#la-root .la-setting-wrapper__count {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: var(--la-r-pill-sm, 999px);
	background: rgba(245, 158, 11, 0.14);
	color: #92400e;
	border: 1px solid rgba(245, 158, 11, 0.35);
}

/* V2.1.1 — Webhook section. Two-column top row (toggle + queue stats inline),
   bounded inputs (max-width sized to fit a 64-char hex secret + buffer), and
   a small-button utility. The .la-input rule has max-width:420px globally;
   .la-input--bounded raises it to 560px so the secret hex fully fits. */
#la-root .la-input--bounded { max-width: 560px; width: 100%; box-sizing: border-box; }
#la-root .la-field--bounded .la-input { max-width: 560px; }
#la-root .la-secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#la-root .la-secret-row .la-input { flex: 0 1 560px; min-width: 0; }
#la-root .la-btn--small { padding: 6px 12px; font-size: 13px; line-height: 1.3; }

#la-root .la-webhook-toprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
#la-root .la-webhook-stats {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 6px 14px;
	background: var(--la-wash, #F8FAFC);
	border: 1px solid var(--la-line, #E2E8F0);
	border-radius: 8px;
	font-size: 13px;
	color: var(--la-text-dim, #64748B);
}
#la-root .la-webhook-stats li { margin: 0; }
#la-root .la-webhook-stats strong { color: var(--la-text, #1F2937); margin-right: 4px; }

/* V2.1.1 — Activity Log Integrity bar. Compact horizontal strip below the
   sum-strip, NOT a full card. Single line at a comfortable height (~52px).
   Status lives in the pill, meta is a discreet inline string, action button
   is outlined (visible without shouting). Broken state spawns a focused
   red alert immediately below this bar. */
#la-root .la-integrity-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	margin: 0 0 24px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
#la-root .la-integrity-bar.la-integrity--intact { border-left: 3px solid var(--la-emerald, #059669); }
#la-root .la-integrity-bar.la-integrity--broken { border-left: 3px solid #DC2626; background: #fff7f7; }
#la-root .la-integrity-bar.la-integrity--never  { border-left: 3px solid #94A3B8; }
#la-root .la-integrity-bar__icon {
	width: 18px;
	height: 18px;
	color: var(--la-text-dim, #64748B);
	flex-shrink: 0;
}
#la-root .la-integrity--intact .la-integrity-bar__icon { color: var(--la-emerald, #059669); }
#la-root .la-integrity--broken .la-integrity-bar__icon { color: #DC2626; }
#la-root .la-integrity-bar__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--la-text, #1F2937);
	white-space: nowrap;
}
#la-root .la-integrity-bar__meta {
	color: var(--la-text-dim, #64748B);
	font-size: 13px;
	margin-left: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
#la-root .la-integrity-bar__sep { margin: 0 6px; color: #CBD5E1; }
#la-root .la-integrity-bar__btn { flex-shrink: 0; }
#la-root .la-integrity-bar .la-btn.is-loading { opacity: .65; cursor: progress; }

/* V2.1.5 — Chain coverage scope note (rows before chain_start_id). */
#la-root .la-integrity-coverage-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: -16px 0 20px;
	padding: 8px 12px;
	background: rgba(245, 158, 11, 0.08);
	border-left: 3px solid #f59e0b;
	border-radius: 4px;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}
#la-root .la-integrity-coverage-note .la-icon {
	color: #f59e0b;
	flex-shrink: 0;
	margin-top: 1px;
}

#la-root .la-integrity-alert {
	margin: -12px 0 24px;
	padding: 14px 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-left: 3px solid #DC2626;
	border-radius: 0 8px 8px 0;
	color: #7f1d1d;
	font-size: 13px;
	line-height: 1.5;
}
#la-root .la-integrity-alert p { margin: 0 0 10px; }
#la-root .la-integrity-alert p:last-child { margin-bottom: 0; }
#la-root .la-integrity-alert .la-btn { margin-top: 4px; }

#la-root .la-status-pill--danger {
	background: #fef2f2;
	color: #b91c1c;
	border: 1.5px solid #fecaca;
}