:root {
    --alf-color-neutral-0: #ffffff;
    --alf-color-neutral-50: #f8fafc;
    --alf-color-neutral-100: #f6f8fa;
    --alf-color-neutral-150: #f3f5f7;
    --alf-color-neutral-200: #eef2f6;
    --alf-color-neutral-300: #e5e7eb;
    --alf-color-neutral-400: #d9e0e8;
    --alf-color-neutral-500: #94a3b8;
    --alf-color-neutral-600: #64748b;
    --alf-color-neutral-700: #1f2937;
    --alf-color-neutral-800: #1f2933;
    --alf-color-neutral-900: #0f172a;
    --alf-color-neutral-950: #202333;
    --alf-color-foreground: #10100f;
    --alf-color-muted: #ececf0;
    --alf-color-muted-foreground: #717182;
    --alf-color-border: #0000001a;
    --alf-color-sidebar-soft: #111c31;
    --alf-color-sidebar-text: #d1d5db;
    --alf-color-sidebar-muted: #9ca3af;
    --alf-color-blue-50: #f1eeff;
    --alf-color-blue-600: #6d5dfb;
    --alf-color-blue-700: #302a63;
    --alf-color-sky-600: #2ba7b3;
    --alf-color-sky-500: #37c7d4;
    --alf-color-orange-500: #f97316;
    --alf-color-green-600: #16a34a;
    --alf-color-green-700: #067647;
    --alf-color-amber-500: #f59e0b;
    --alf-color-red-600: #dc2626;
    --alf-color-red-700: #b42318;
    --alf-alpha-white-06: rgba(255, 255, 255, 0.06);
    --alf-alpha-white-08: rgba(255, 255, 255, 0.08);
    --alf-alpha-white-10: rgba(255, 255, 255, 0.1);
    --alf-alpha-white-12: rgba(255, 255, 255, 0.12);
    --alf-alpha-white-60: rgba(255, 255, 255, 0.6);
    --alf-alpha-white-62: rgba(255, 255, 255, 0.62);
    --alf-alpha-white-82: rgba(255, 255, 255, 0.82);
    --alf-alpha-slate-06: rgba(15, 23, 42, 0.06);
    --alf-alpha-slate-08: rgba(15, 23, 42, 0.08);
    --alf-alpha-slate-16: rgba(15, 23, 42, 0.16);
    --alf-alpha-slate-22: rgba(15, 23, 42, 0.22);
    --alf-alpha-slate-88: rgba(15, 23, 42, 0.88);
    --alf-alpha-primary-08: rgba(37, 99, 235, 0.08);
    --alf-alpha-primary-10: rgba(37, 99, 235, 0.1);
    --alf-alpha-primary-14: rgba(37, 99, 235, 0.14);
    --alf-alpha-primary-20: rgba(37, 99, 235, 0.2);
    --alf-alpha-primary-35: rgba(37, 99, 235, 0.35);
    --alf-alpha-primary-92: rgba(37, 99, 235, 0.92);
    --alf-alpha-success-08: rgba(22, 163, 74, 0.08);
    --alf-alpha-success-10: rgba(22, 163, 74, 0.1);
    --alf-alpha-success-25: rgba(22, 163, 74, 0.25);
    --alf-alpha-search: rgba(241, 245, 249, 0.84);
    --alf-alpha-dark-glass: rgba(15, 23, 42, 0.82);
    --alf-alpha-dark-border: rgba(148, 163, 184, 0.2);
    --alf-alpha-dark-border-soft: rgba(148, 163, 184, 0.12);
    --alf-alpha-dark-border-muted: rgba(148, 163, 184, 0.18);
    --alf-alpha-dark-control: rgba(15, 23, 42, 0.64);
    --alf-alpha-dark-search: rgba(15, 23, 42, 0.7);
    --alf-alpha-dark-backdrop: rgba(2, 6, 23, 0.48);

    --alf-primary: var(--alf-color-blue-600);
    --alf-primary-strong: var(--alf-color-blue-700);
    --alf-primary-soft: var(--alf-color-blue-50);
    --alf-action: var(--alf-color-sky-500);
    --alf-accent: var(--alf-color-orange-500);
    --alf-bg: var(--alf-color-neutral-50);
    --alf-surface: var(--alf-color-neutral-0);
    --alf-surface-soft: var(--alf-color-neutral-150);
    --alf-surface-muted: var(--alf-color-neutral-200);
    --alf-surface-subtle: var(--alf-color-neutral-50);
    --alf-surface-raised: var(--alf-color-neutral-0);
    --alf-surface-primary-soft: var(--alf-alpha-primary-10);
    --alf-surface-glass: var(--alf-alpha-white-82);
    --alf-border: var(--alf-color-border);
    --alf-border-soft: var(--alf-color-border);
    --alf-border-muted: var(--alf-color-border);
    --alf-border-highlight: var(--alf-alpha-primary-20);
    --alf-text: var(--alf-color-neutral-700);
    --alf-heading: var(--alf-color-foreground);
    --alf-muted: var(--alf-color-muted-foreground);
    --alf-text-muted: var(--alf-color-neutral-500);
    --alf-text-inverse: var(--alf-color-neutral-0);
    --alf-icon-color: currentColor;
    --alf-icon-muted-color: var(--alf-muted);
    --alf-icon-active-color: var(--alf-primary);
    --alf-icon-inverse-color: var(--alf-text-inverse);
    --alf-success: var(--alf-color-green-600);
    --alf-success-strong: var(--alf-color-green-700);
    --alf-success-soft: var(--alf-alpha-success-10);
    --alf-warning: var(--alf-color-amber-500);
    --alf-warning-strong: var(--alf-color-amber-500);
    --alf-danger: var(--alf-color-red-600);
    --alf-danger-strong: var(--alf-color-red-700);
    --alf-info: var(--alf-color-sky-600);
    --alf-info-strong: var(--alf-color-sky-600);
    --alf-focus-ring: var(--alf-alpha-primary-14);

    --alf-sidebar: var(--alf-surface);
    --alf-sidebar-soft: var(--alf-surface);
    --alf-sidebar-background: var(--alf-surface);
    --alf-sidebar-text: var(--alf-text);
    --alf-sidebar-text-muted: var(--alf-muted);
    --alf-sidebar-muted: var(--alf-sidebar-text-muted);
    --alf-sidebar-border: var(--alf-border-muted);
    --alf-sidebar-toggle-border: var(--alf-border-muted);
    --alf-sidebar-toggle-background: var(--alf-surface);
    --alf-sidebar-toggle-hover: var(--alf-surface-muted);
    --alf-sidebar-panel-background: var(--alf-surface-subtle);
    --alf-sidebar-icon-background: var(--alf-surface-muted);
    --alf-sidebar-icon-background-soft: var(--alf-surface-muted);
    --alf-sidebar-item-hover-background: var(--alf-color-muted);
    --alf-sidebar-item-active-background: var(--alf-primary-soft);
    --alf-sidebar-item-active-border: var(--alf-primary);
    --alf-sidebar-icon-color: var(--alf-muted);
    --alf-sidebar-icon-hover-color: var(--alf-text);
    --alf-sidebar-icon-active-color: var(--alf-primary);

    --alf-topbar-background: var(--alf-surface-glass);
    --alf-topbar-border: var(--alf-border-soft);
    --alf-topbar-control-background: var(--alf-alpha-white-62);
    --alf-topbar-user-background: var(--alf-alpha-white-60);
    --alf-topbar-search-background: var(--alf-alpha-search);

    --alf-card-background: var(--alf-surface);
    --alf-card-muted-background: var(--alf-surface-subtle);
    --alf-card-border: var(--alf-border-muted);
    --alf-card-hover-border: var(--alf-border);
    --alf-card-action-hover-border: var(--alf-alpha-primary-35);
    --alf-drawer-backdrop: var(--alf-alpha-slate-22);
    --alf-drawer-backdrop-strong: var(--alf-alpha-dark-backdrop);
    --alf-tool-icon-background: var(--alf-primary);
    --alf-tool-icon-color: var(--alf-text-inverse);
    --alf-badge-info-background: var(--alf-alpha-primary-08);
    --alf-badge-success-background: var(--alf-alpha-success-10);
    --alf-badge-warning-background: rgba(245, 158, 11, 0.12);
    --alf-status-neutral-background: var(--alf-surface-muted);
    --alf-status-neutral-text: var(--alf-muted);
    --alf-label-color: var(--alf-muted);
    --alf-commercial-highlight-background: var(--alf-surface);
    --alf-commercial-highlight-border: var(--alf-color-neutral-300);
    --alf-alert-success-border: var(--alf-alpha-success-25);
    --alf-alert-success-background: var(--alf-alpha-success-08);
    --alf-sidebar-width: 240px;
    --alf-sidebar-collapsed-width: 64px;
    --alf-topbar-height: 52px;
    --alf-icon-size-xs: 14px;
    --alf-icon-size-sm: 16px;
    --alf-icon-size-md: 18px;
    --alf-icon-size-lg: 20px;
    --alf-icon-size-xl: 24px;
    --alf-space-xs: 3px;
    --alf-space-sm: 6px;
    --alf-space-md: 10px;
    --alf-space-lg: 14px;
    --alf-space-xl: 20px;
    --alf-space-2xl: 26px;
    --alf-radius-sm: 8px;
    --alf-radius-md: 10px;
    --alf-radius-lg: 10px;
    --alf-radius-xl: calc(var(--alf-radius) + 4px);
    --alf-radius: var(--alf-radius-md);
    --alf-shadow-sm: none;
    --alf-shadow: none;
    --alf-shadow-lg: 0 14px 36px var(--alf-alpha-slate-08);
    --alf-font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alf-text-xs: 0.75rem;
    --alf-text-sm: 0.875rem;
    --alf-text-base: 0.875rem;
    --alf-text-md: 1rem;
    --alf-text-lg: 1.125rem;
    --alf-text-xl: 1.25rem;
    --alf-leading-tight: 1.25;
    --alf-leading-normal: 1.45;
    --alf-leading-relaxed: 1.625;
    --alf-font-normal: 400;
    --alf-font-medium: 500;
    --alf-font-semibold: 600;
    --alf-font-bold: 700;
    --alf-font-xs: var(--alf-text-xs);
    --alf-font-sm: 0.8125rem;
    --alf-font-md: var(--alf-text-base);
    --alf-font-lg: var(--alf-text-md);
    --alf-font-xl: var(--alf-text-lg);
    --alf-font-2xl: var(--alf-text-xl);
    --alf-font-hero: var(--alf-text-xl);
    --alf-z-topbar: 30;
    --alf-z-sidebar: 35;
    --alf-z-overlay: 40;
    --alf-z-drawer: 50;
    --alf-transition-duration: 0.15s;
    --alf-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --alf-transition-fast: var(--alf-transition-duration) var(--alf-transition-timing);
    --alf-transition: 0.2s var(--alf-transition-timing);
}

[data-theme="light"] {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
    --alf-primary: #9b8cff;
    --alf-primary-strong: var(--alf-color-blue-600);
    --alf-primary-soft: rgba(155, 140, 255, 0.16);
    --alf-bg: var(--alf-color-neutral-950);
    --alf-surface: var(--alf-color-neutral-900);
    --alf-surface-soft: var(--alf-color-neutral-800);
    --alf-surface-muted: var(--alf-color-neutral-700);
    --alf-surface-subtle: var(--alf-color-neutral-900);
    --alf-surface-glass: var(--alf-alpha-dark-glass);
    --alf-border: var(--alf-alpha-dark-border);
    --alf-border-soft: var(--alf-alpha-dark-border-soft);
    --alf-border-muted: var(--alf-alpha-dark-border-muted);
    --alf-text: var(--alf-color-neutral-300);
    --alf-heading: var(--alf-color-neutral-0);
    --alf-muted: var(--alf-color-neutral-500);
    --alf-text-muted: var(--alf-color-neutral-600);
    --alf-sidebar-background: var(--alf-surface);
    --alf-sidebar-text: var(--alf-text);
    --alf-sidebar-text-muted: var(--alf-muted);
    --alf-sidebar-muted: var(--alf-muted);
    --alf-sidebar-border: var(--alf-border-muted);
    --alf-sidebar-icon-background: var(--alf-surface-muted);
    --alf-sidebar-icon-background-soft: var(--alf-surface-muted);
    --alf-sidebar-item-hover-background: var(--alf-surface-muted);
    --alf-topbar-control-background: var(--alf-alpha-dark-control);
    --alf-topbar-user-background: var(--alf-alpha-dark-control);
    --alf-topbar-search-background: var(--alf-alpha-dark-search);
    --alf-card-background: var(--alf-surface);
    --alf-card-muted-background: var(--alf-surface-soft);
    --alf-drawer-backdrop: var(--alf-alpha-dark-backdrop);
    --alf-drawer-backdrop-strong: var(--alf-alpha-dark-backdrop);
}

* {
    box-sizing: border-box;
}

.logo-ola,
.logo-alfredo {
    font-family: "Nunito Sans", var(--alf-font-family);
    letter-spacing: -0.025em;
}

.logo-ola {
    font-weight: 500;
    color: #302a63;
}

.logo-alfredo {
    font-weight: 800;
    color: #6d5dfb;
}

[data-theme="dark"] .logo-ola {
    color: #d9d4ff;
}

[data-theme="dark"] .logo-alfredo {
    color: #9b8cff;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--alf-bg);
    color: var(--alf-text);
    font-family: var(--alf-font-family);
    font-size: var(--alf-text-base);
    line-height: var(--alf-leading-normal);
}

.alf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

a {
    color: inherit;
    text-decoration: none;
}

.alf-icon {
    display: block;
    width: var(--alf-icon-size-md);
    height: var(--alf-icon-size-md);
    flex: 0 0 auto;
    color: var(--alf-icon-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--alf-heading);
    font-weight: var(--alf-font-semibold);
    letter-spacing: 0;
    line-height: var(--alf-leading-tight);
}

.alf-app {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

.alf-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--alf-z-sidebar);
    display: flex;
    flex-direction: column;
    width: var(--alf-sidebar-width);
    flex: 0 0 var(--alf-sidebar-width);
    height: 100vh;
    max-height: 100vh;
    background: var(--alf-sidebar-background);
    color: var(--alf-text);
    padding: 18px var(--alf-space-md);
    border-right: 1px solid var(--alf-sidebar-border);
    transition: width var(--alf-transition), flex-basis var(--alf-transition), padding var(--alf-transition);
    overflow: visible;
}

.alf-brand {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-lg);
}

.alf-sidebar-toggle {
    position: absolute;
    top: 18px;
    right: -12px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--alf-sidebar-toggle-border);
    border-radius: 999px;
    background: var(--alf-sidebar-toggle-background);
    color: var(--alf-muted);
    cursor: pointer;
    z-index: 5;
    box-shadow: none;
    transition: background var(--alf-transition-fast), transform var(--alf-transition-fast);
}

.alf-sidebar-toggle:hover {
    background: var(--alf-sidebar-toggle-hover);
    color: var(--alf-text);
    transform: translateX(1px);
}

.alf-sidebar-toggle span {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.alf-brand-mark {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: var(--alf-radius);
    background: var(--alf-sidebar-icon-background);
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
}

.alf-brand strong,
.alf-brand small {
    display: block;
}

.alf-brand small {
    margin-top: 3px;
    color: var(--alf-sidebar-muted);
    font-size: var(--alf-font-xs);
}

.alf-sidebar-app {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-md);
    padding: 7px;
    border: 1px solid var(--alf-sidebar-border);
    border-radius: var(--alf-radius);
    background: var(--alf-sidebar-panel-background);
}

.alf-sidebar-app-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--alf-radius);
    background: var(--alf-sidebar-icon-background);
    color: var(--alf-sidebar-icon-color);
}

.alf-sidebar-app-icon .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
}

.alf-sidebar-app small,
.alf-sidebar-footer small {
    display: block;
    color: var(--alf-sidebar-muted);
    font-size: var(--alf-font-xs);
}

.alf-sidebar-app strong,
.alf-sidebar-footer strong {
    display: block;
    margin-top: 2px;
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
}

.alf-nav {
    display: grid;
    grid-auto-rows: 40px;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    flex: 0 1 auto;
}

.alf-nav-link {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    height: 40px;
    min-height: 40px;
    padding: 0 9px;
    border-radius: var(--alf-radius);
    color: var(--alf-sidebar-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-medium);
    transition: background var(--alf-transition-fast), color var(--alf-transition-fast);
}

.alf-nav-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--alf-sidebar-icon-background-soft);
    color: var(--alf-sidebar-icon-color);
}

.alf-nav-icon .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
}

.alf-nav-text,
.alf-sidebar-text {
    transition: opacity 0.15s ease;
}

.alf-nav-link:hover,
.alf-nav-link.is-active {
    background: var(--alf-sidebar-item-hover-background);
    color: var(--alf-text);
}

.alf-nav-link:hover .alf-nav-icon,
.alf-nav-link.is-active .alf-nav-icon {
    color: var(--alf-sidebar-icon-hover-color);
}

.alf-nav-link.is-active {
    background: var(--alf-surface-muted);
    border-radius: var(--alf-radius);
    box-shadow: none;
}

.alf-nav-link.is-active .alf-nav-icon {
    color: var(--alf-primary);
}

.alf-sidebar-footer {
    margin-top: auto;
    flex: 0 0 auto;
}

.alf-sidebar-footer-section {
    padding-top: var(--alf-space-sm);
    border-top: 1px solid var(--alf-sidebar-border);
}

.alf-sidebar-footer-section .alf-nav-link {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    font-size: var(--alf-font-sm);
}

.alf-sidebar-footer-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-sm);
    margin-top: var(--alf-space-sm);
    padding-top: var(--alf-space-sm);
    border-top: 1px solid var(--alf-sidebar-border);
}

.alf-sidebar-footer-secondary small {
    color: var(--alf-sidebar-muted);
    font-size: var(--alf-font-xs);
}

.alf-sidebar-footer-secondary a {
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-sidebar-footer-secondary a:hover {
    color: var(--alf-text);
}

.alf-sidebar-workspace {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-sm) var(--alf-space-md);
    border-radius: var(--alf-radius);
    background: var(--alf-surface-muted);
}

.alf-sidebar-workspace small {
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    line-height: 1.3;
}

.alf-sidebar-workspace strong {
    color: var(--alf-heading);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    line-height: 1.3;
}

.alf-sidebar-collapsed .alf-sidebar {
    width: var(--alf-sidebar-collapsed-width);
    flex-basis: var(--alf-sidebar-collapsed-width);
    padding: 18px var(--alf-space-sm);
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar {
    width: var(--alf-sidebar-width);
    flex-basis: var(--alf-sidebar-width);
    padding: 18px var(--alf-space-md);
    box-shadow: var(--alf-shadow-lg);
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover {
        width: var(--alf-sidebar-width);
        flex-basis: var(--alf-sidebar-width);
        padding: 18px var(--alf-space-md);
        box-shadow: var(--alf-shadow-lg);
    }
}

.alf-sidebar-collapsed .alf-sidebar-toggle span {
    transform: rotate(135deg);
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-toggle span {
    transform: rotate(-45deg);
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-toggle span {
        transform: rotate(-45deg);
    }
}

.alf-sidebar-collapsed .alf-brand,
.alf-sidebar-collapsed .alf-sidebar-app {
    justify-content: center;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-brand,
.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-app {
    justify-content: flex-start;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-brand,
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-app {
        justify-content: flex-start;
    }
}

.alf-sidebar-collapsed .alf-sidebar-text,
.alf-sidebar-collapsed .alf-nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    white-space: nowrap;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-text,
.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-nav-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    opacity: 1;
    white-space: normal;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-text,
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-nav-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        opacity: 1;
        white-space: normal;
    }
}

.alf-sidebar-collapsed .alf-nav-link {
    justify-content: center;
    height: 40px;
    padding: 0;
}

.alf-sidebar-collapsed .alf-nav {
    overflow: hidden;
    padding-right: 0;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-nav {
    overflow-y: auto;
    padding-right: 2px;
}

.alf-sidebar-collapsed .alf-sidebar:hover .alf-nav {
    overflow-y: auto;
    padding-right: 2px;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-nav-link {
    justify-content: flex-start;
    padding: 0 9px;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-nav-link {
        justify-content: flex-start;
        padding: 0 9px;
    }
}

.alf-sidebar-collapsed .alf-sidebar-app {
    padding: 8px;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-app {
    padding: 7px;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-app {
        padding: 7px;
    }
}

.alf-sidebar-collapsed .alf-sidebar-workspace {
    padding: var(--alf-space-sm);
    align-items: center;
}

.alf-sidebar-collapsed .alf-sidebar-workspace small,
.alf-sidebar-collapsed .alf-sidebar-workspace strong {
    display: none;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-workspace {
    padding: var(--alf-space-sm) var(--alf-space-md);
    align-items: flex-start;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-workspace small,
.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-workspace strong {
    display: block;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-workspace {
        padding: var(--alf-space-sm) var(--alf-space-md);
        align-items: flex-start;
    }

    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-workspace small,
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-workspace strong {
        display: block;
    }
}

.alf-sidebar-collapsed .alf-sidebar-footer {
    display: grid;
    justify-items: center;
    gap: var(--alf-space-sm);
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-footer {
    display: block;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-footer {
        display: block;
    }
}

.alf-sidebar-collapsed .alf-sidebar-footer-section .alf-nav-link {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
}

.alf-sidebar-collapsed .alf-sidebar-footer-section .alf-nav-link .alf-nav-text {
    display: none;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-footer-section .alf-nav-link {
    justify-content: flex-start;
    width: auto;
    height: 36px;
    padding: 0 9px;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-footer-section .alf-nav-link .alf-nav-text {
    display: inline;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-footer-section .alf-nav-link {
        justify-content: flex-start;
        width: auto;
        height: 36px;
        padding: 0 9px;
    }

    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-footer-section .alf-nav-link .alf-nav-text {
        display: inline;
    }
}

.alf-sidebar-collapsed .alf-sidebar-footer-secondary {
    display: none;
}

.alf-sidebar-collapsed.alf-sidebar-hover-expand .alf-sidebar-footer-secondary {
    display: flex;
}

@media (min-width: 901px) {
    .alf-sidebar-collapsed .alf-sidebar:hover .alf-sidebar-footer-secondary {
        display: flex;
    }
}

.alf-main {
    display: flex;
    min-width: 0;
    width: calc(100vw - var(--alf-sidebar-width));
    height: 100vh;
    flex: 0 0 calc(100vw - var(--alf-sidebar-width));
    flex-direction: column;
    margin-left: var(--alf-sidebar-width);
    overflow: hidden;
    transition: margin-left var(--alf-transition), width var(--alf-transition), flex-basis var(--alf-transition);
}

.alf-sidebar-collapsed .alf-main {
    width: calc(100vw - var(--alf-sidebar-collapsed-width));
    flex-basis: calc(100vw - var(--alf-sidebar-collapsed-width));
    margin-left: var(--alf-sidebar-collapsed-width);
}

.alf-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--alf-sidebar-width);
    width: calc(100vw - var(--alf-sidebar-width));
    z-index: var(--alf-z-topbar);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--alf-space-md);
    min-height: var(--alf-topbar-height);
    padding: 5px var(--alf-space-xl);
    border-bottom: 1px solid var(--alf-topbar-border);
    background: var(--alf-topbar-background);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex: 0 0 auto;
    transition: left var(--alf-transition), width var(--alf-transition);
}

.alf-sidebar-collapsed .alf-topbar {
    left: var(--alf-sidebar-collapsed-width);
    width: calc(100vw - var(--alf-sidebar-collapsed-width));
}

.alf-topbar--full {
    left: 0;
    width: 100vw;
}

.alf-topbar-title {
    flex: 0 0 auto;
    font-weight: var(--alf-font-semibold);
    font-size: var(--alf-font-md);
    color: var(--alf-text);
    white-space: nowrap;
}

/* ── Visão 360: full-bleed Canvas shell (no sidebar) ── */

.alf-visao360-shell {
    height: 100vh;
    overflow: hidden;
}

.alf-content.alf-visao360-content {
    position: relative;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.alf-visao360-stage {
    position: relative;
    height: 100%;
    width: 100%;
}

.alf-visao360-stage .alf-visao360-canvas-wrapper {
    position: absolute;
    inset: 0;
}

.alf-visao360-overlay-top {
    position: absolute;
    top: calc(var(--alf-topbar-height) + var(--alf-space-xs));
    left: var(--alf-space-md);
    right: var(--alf-space-md);
    z-index: 30;
    pointer-events: none;
}

.alf-visao360-overlay-top .alf-context-line {
    margin-bottom: 0;
    pointer-events: none;
}

.alf-visao360-overlay-top .alf-context-link,
.alf-visao360-overlay-top .alf-explains-trigger {
    pointer-events: auto;
    background: var(--alf-surface);
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius-sm, 6px);
    padding: 6px 12px;
    box-shadow: var(--alf-shadow);
}

.alf-visao360-alert {
    position: absolute;
    top: calc(var(--alf-topbar-height) + var(--alf-space-md));
    left: var(--alf-space-md);
    right: var(--alf-space-md);
    z-index: 30;
}

.alf-page-header h2 {
    margin: 0;
    line-height: 1.2;
}

.alf-eyebrow {
    margin: 0 0 4px;
    color: var(--alf-label-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
}

.alf-userbox {
    display: inline-flex;
    align-items: center;
    gap: var(--alf-space-sm);
    min-height: 30px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--alf-radius-lg);
    color: var(--alf-muted);
    background: var(--alf-topbar-user-background);
    white-space: nowrap;
}

.alf-avatar {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-heading);
    color: var(--alf-text-inverse);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-userbox strong,
.alf-userbox small {
    display: block;
}

.alf-userbox strong {
    color: var(--alf-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-userbox small {
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
}

.alf-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    margin-left: auto;
}

.alf-topbar-search,
.alf-search-placeholder {
    display: inline-flex;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    padding: 0 var(--alf-space-md);
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--alf-topbar-search-background);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
}

.alf-topbar-search {
    width: min(640px, 58vw);
    flex: 1 1 420px;
}

.alf-topbar-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alf-topbar-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--alf-text);
    font-size: var(--alf-font-xs);
}

.alf-topbar-search input::placeholder {
    color: var(--alf-muted);
}

.alf-topbar-search .alf-icon,
.alf-search-placeholder .alf-icon {
    width: var(--alf-icon-size-xs);
    height: var(--alf-icon-size-xs);
}

.alf-notification-button {
    position: relative;
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--alf-topbar-control-background);
    cursor: pointer;
}

.alf-notification-button .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
    color: var(--alf-icon-muted-color);
}

.alf-notification-button span {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--alf-surface);
    border-radius: 999px;
    background: var(--alf-primary);
}

.alf-app-launcher {
    position: relative;
}

.alf-avatar-menu {
    position: relative;
}

.alf-avatar-menu summary {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    list-style: none;
    border-radius: 999px;
    cursor: pointer;
}

.alf-avatar-menu summary::-webkit-details-marker {
    display: none;
}

.alf-avatar-menu[open] summary {
    outline: 2px solid var(--alf-focus-ring);
}

.alf-avatar-menu img.alf-avatar {
    object-fit: cover;
}

.alf-avatar-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--alf-z-drawer);
    display: grid;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
}

.alf-avatar-dropdown a,
.alf-avatar-dropdown button {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--alf-radius-sm);
    background: transparent;
    color: var(--alf-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-medium);
    text-align: left;
}

.alf-avatar-dropdown a:hover,
.alf-avatar-dropdown button:hover {
    background: var(--alf-surface-muted);
}

.alf-avatar-dropdown hr {
    width: 100%;
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--alf-border-muted);
}

.alf-sidebar-settings-menu {
    position: relative;
}

.alf-sidebar-settings-menu summary {
    list-style: none;
    cursor: pointer;
}

.alf-sidebar-settings-menu summary::-webkit-details-marker {
    display: none;
}

.alf-sidebar-settings-menu[open] summary {
    outline: 2px solid var(--alf-focus-ring);
}

.alf-sidebar-settings-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: var(--alf-z-drawer);
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
}

.alf-sidebar-settings-group-label {
    padding: 8px 10px 2px;
    color: var(--alf-muted);
    font-size: var(--alf-text-xs);
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-sidebar-settings-dropdown a,
.alf-sidebar-settings-dropdown button {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--alf-radius-sm);
    background: transparent;
    color: var(--alf-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-medium);
    text-align: left;
}

.alf-sidebar-settings-dropdown a:hover {
    background: var(--alf-surface-muted);
}

.alf-sidebar-settings-dropdown button:disabled {
    color: var(--alf-muted);
    cursor: default;
}

.alf-sidebar-settings-dropdown button.is-active {
    background: var(--alf-surface-muted);
    color: var(--alf-text);
}

.alf-sidebar-settings-dropdown hr {
    width: 100%;
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--alf-border-muted);
}

.alf-tool-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--alf-z-overlay);
    background: var(--alf-drawer-backdrop);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.alf-tool-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--alf-z-drawer);
    display: flex;
    width: min(500px, calc(100vw - 24px));
    height: 100vh;
    flex-direction: column;
    gap: var(--alf-space-md);
    overflow-y: auto;
    padding: var(--alf-space-lg);
    border-left: 1px solid var(--alf-border-muted);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
}

.alf-tool-drawer[hidden],
.alf-tool-drawer-backdrop[hidden] {
    display: none;
}

button.alf-mobile-menu-toggle,
button.alf-mobile-menu-close {
    display: none;
}

.alf-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--alf-z-overlay);
    background: var(--alf-drawer-backdrop-strong);
}

.alf-mobile-menu-backdrop[hidden] {
    display: none;
}

.alf-drawer-open {
    overflow: hidden;
}

.alf-tool-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-md);
}

.alf-tool-drawer-header h2,
.alf-tool-drawer-header p {
    margin: 0;
}

.alf-tool-drawer-header h2 {
    color: var(--alf-heading);
    font-size: var(--alf-font-lg);
    font-weight: var(--alf-font-semibold);
}

.alf-tool-drawer-header p:last-child {
    margin-top: 8px;
    color: var(--alf-muted);
    line-height: 1.45;
    font-size: var(--alf-font-sm);
}

.alf-drawer-close {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--alf-border-muted);
    border-radius: 999px;
    background: var(--alf-bg);
    color: var(--alf-text);
    cursor: pointer;
}

.alf-drawer-close .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
}

.alf-tool-drawer-search {
    display: flex;
    min-height: 34px;
    align-items: center;
    padding: 0 var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: 999px;
    background: var(--alf-bg);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
}

.alf-tool-drawer-section {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-tool-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-tool-drawer-card {
    display: flex;
    gap: var(--alf-space-sm);
    min-height: 82px;
    padding: var(--alf-space-sm);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-card-muted-background);
    transition: border-color var(--alf-transition-fast), background var(--alf-transition-fast), transform var(--alf-transition-fast);
}

.alf-tool-drawer-card:hover,
.alf-tool-drawer-card.is-active {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-surface);
    transform: translateY(-1px);
}

.alf-tool-drawer-card strong,
.alf-tool-drawer-card p,
.alf-tool-drawer-card small {
    display: block;
}

.alf-tool-drawer-card p {
    margin: 3px 0 7px;
    color: var(--alf-muted);
    line-height: 1.35;
    font-size: var(--alf-font-xs);
}

.alf-tool-drawer-card small {
    display: inline-flex;
    width: fit-content;
    min-height: 20px;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
    font-size: 11px;
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-muted-text {
    margin: 0;
    color: var(--alf-muted);
    line-height: 1.5;
}

.alf-icon-button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--alf-topbar-control-background);
    cursor: pointer;
}

.alf-icon-button .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
    color: var(--alf-text);
}

.alf-icon-button:hover {
    background: var(--alf-surface-muted);
}

.alf-app-launcher-panel {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 20;
    width: min(420px, calc(100vw - 32px));
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-launcher-header {
    margin-bottom: 12px;
}

.alf-launcher-header strong,
.alf-launcher-header small {
    display: block;
}

.alf-launcher-header small {
    margin-top: 4px;
    color: var(--alf-muted);
}

.alf-app-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.alf-app-launcher-item {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 112px;
    padding: var(--alf-space-sm);
    border: 1px solid transparent;
    border-radius: var(--alf-radius);
    text-align: center;
}

.alf-app-launcher-item em {
    color: var(--alf-muted);
    font-size: 11px;
    font-style: normal;
    line-height: 1.3;
}

.alf-app-launcher-item:hover,
.alf-app-launcher-item.is-active {
    border-color: var(--alf-border);
    background: var(--alf-surface-muted);
}

.alf-app-launcher-item strong {
    font-size: 13px;
    line-height: 1.2;
}

.alf-app-launcher-item small {
    color: var(--alf-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.alf-app-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--alf-radius);
    background: var(--alf-tool-icon-background);
    color: var(--alf-tool-icon-color);
}

.alf-app-icon .alf-icon {
    width: var(--alf-icon-size-md);
    height: var(--alf-icon-size-md);
}

.alf-status {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--alf-success);
}

.alf-content {
    width: 100%;
    max-width: none;
    min-height: 0;
    box-sizing: border-box;
    padding: calc(var(--alf-topbar-height) + var(--alf-space-md)) var(--alf-space-xl) var(--alf-space-xl);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    scrollbar-gutter: stable;
}

.alf-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
}

.alf-page-header > div:first-child {
    padding-left: var(--alf-space-md);
    border-left: 3px solid var(--alf-primary);
}

.alf-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--alf-space-sm);
}

.alf-page-header-actions-bottom {
    align-self: flex-end;
}

.alf-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-md);
}

.alf-section-header h3 {
    margin: 0;
}

.alf-page-header p:last-child {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--alf-muted);
}

.alf-explains {
    display: inline-flex;
}

.alf-explains-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--alf-space-sm);
    border: 0;
    background: transparent;
    color: var(--alf-muted);
    font: inherit;
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    cursor: pointer;
    transition: color var(--alf-transition-fast);
}

.alf-explains-trigger:hover {
    color: var(--alf-primary-strong);
}

.alf-explains-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--alf-z-overlay);
    background: var(--alf-drawer-backdrop-strong);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.alf-explains-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--alf-z-drawer);
    display: flex;
    width: min(420px, calc(100vw - 24px));
    height: 100vh;
    flex-direction: column;
    gap: var(--alf-space-lg);
    padding: var(--alf-space-xl);
    border-left: 1px solid var(--alf-border);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
    overflow-y: auto;
}

.alf-explains-drawer[hidden],
.alf-explains-backdrop[hidden] {
    display: none;
}

.alf-explains-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-md);
}

.alf-explains-header h2,
.alf-explains-header p,
.alf-explains-content p,
.alf-explains-content h3 {
    margin: 0;
}

.alf-explains-header h2 {
    font-size: var(--alf-font-lg);
}

.alf-explains-content {
    display: grid;
    gap: var(--alf-space-md);
    color: var(--alf-text);
    line-height: var(--alf-leading-relaxed);
}

.alf-explains-content h3 {
    margin-top: var(--alf-space-sm);
    font-size: var(--alf-font-md);
}

.alf-explains-section {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-explains-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
}

.alf-explains-section-header h3 {
    margin-top: 0;
}

.alf-inline-action {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--alf-transition-fast);
}

.alf-inline-action:hover {
    color: var(--alf-primary-strong);
}

.alf-explains-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
    padding-top: var(--alf-space-md);
    border-top: 1px solid var(--alf-border-muted);
}

.alf-guided-edit-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: var(--alf-space-xl);
    align-items: start;
    min-height: calc(100vh - var(--alf-topbar-height) - (var(--alf-space-xl) * 2));
}

.alf-guided-edit-shell::before {
    position: fixed;
    inset: 0;
    z-index: var(--alf-z-overlay);
    background: var(--alf-drawer-backdrop-strong);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    content: "";
    pointer-events: none;
}

.alf-guided-edit-context {
    position: relative;
    z-index: calc(var(--alf-z-overlay) - 1);
    display: grid;
    gap: var(--alf-space-lg);
    padding-top: var(--alf-space-md);
}

.alf-guided-edit-context h2,
.alf-guided-edit-context p,
.alf-guided-drawer h2,
.alf-guided-drawer p,
.alf-guided-question h3 {
    margin: 0;
}

.alf-context-link {
    display: inline-flex;
    width: fit-content;
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--alf-transition-fast);
}

.alf-context-link:hover {
    color: var(--alf-primary-strong);
}

.alf-context-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-lg);
}

.alf-guided-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--alf-z-drawer);
    display: grid;
    align-content: start;
    gap: var(--alf-space-lg);
    width: min(430px, calc(100vw - 24px));
    height: 100vh;
    overflow: auto;
    padding: var(--alf-space-xl);
    border-left: 1px solid var(--alf-border);
    border-radius: 0;
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
}

.alf-guided-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-md);
}

.alf-guided-drawer-header h2 {
    font-size: var(--alf-font-xl);
    line-height: var(--alf-leading-tight);
}

.alf-guided-drawer-header p,
.alf-guided-question p {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-guided-progress {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-guided-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-guided-progress strong {
    color: var(--alf-heading);
    font-weight: 600;
}

.alf-guided-form {
    display: grid;
    gap: var(--alf-space-lg);
}

.alf-guided-question {
    display: flex;
    align-items: flex-start;
    gap: var(--alf-space-md);
}

.alf-guided-question > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 999px;
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
    font-size: var(--alf-font-sm);
    font-weight: 700;
}

.alf-guided-question h3 {
    font-size: var(--alf-font-lg);
    line-height: var(--alf-leading-tight);
}

.alf-guided-note {
    margin: 0;
    padding: var(--alf-space-sm) var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface-subtle);
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    line-height: var(--alf-leading-normal);
}

.alf-guided-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--alf-space-sm);
}

.alf-template-conversation-shell {
    position: relative;
    min-height: calc(100vh - var(--alf-topbar-height) - (var(--alf-space-xl) * 2));
}

.alf-template-conversation-shell::before {
    position: fixed;
    inset: 0;
    z-index: var(--alf-z-overlay);
    background: var(--alf-drawer-backdrop-strong);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    content: "";
    pointer-events: none;
}

.alf-conversation-drawer {
    width: min(50vw, 760px);
    min-width: 480px;
}

.alf-conversation-drawer form {
    display: grid;
    min-height: 0;
    gap: var(--alf-space-md);
}

.alf-conversation-list {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--alf-space-sm);
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    padding-top: var(--alf-space-sm);
    padding-bottom: var(--alf-space-xl);
    scroll-behavior: smooth;
}

.alf-conversation-list::before {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    height: 24px;
    margin-bottom: calc(var(--alf-space-sm) * -1);
    background: linear-gradient(to bottom, var(--alf-surface), transparent);
    content: "";
    pointer-events: none;
}

.alf-conversation-card {
    display: grid;
    gap: var(--alf-space-md);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-md);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-sm);
}

.alf-conversation-card[hidden],
.alf-conversation-nested[hidden],
.alf-conversation-card-summary .alf-inline-action[hidden] {
    display: none !important;
}

.alf-conversation-card.is-complete {
    background: var(--alf-surface-subtle);
}

.alf-conversation-card.is-complete:not(.is-active) {
    gap: 0;
    padding: var(--alf-space-sm) var(--alf-space-md);
    border-color: var(--alf-border-muted);
    box-shadow: none;
    opacity: 0.78;
}

.alf-conversation-card.is-active {
    min-height: 0;
    margin-block: var(--alf-space-md) 0;
    padding: var(--alf-space-xl);
    border-color: var(--alf-primary-soft);
    box-shadow: var(--alf-shadow);
    opacity: 1;
}

.alf-conversation-card.is-last-summary {
    cursor: pointer;
    transition: border-color var(--alf-transition-fast), opacity var(--alf-transition-fast);
}

.alf-conversation-card.is-last-summary:hover {
    border-color: var(--alf-primary-soft);
    opacity: 1;
}

.alf-conversation-intro.is-complete:not(.is-active) {
    gap: var(--alf-space-sm);
    max-height: 240px;
    padding: var(--alf-space-lg);
    background: var(--alf-surface);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, padding 220ms ease, margin 220ms ease;
}

.alf-conversation-intro.is-dismissing {
    max-height: 0;
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent;
    opacity: 0;
    transform: translateY(-8px);
}

.alf-conversation-intro.is-complete:not(.is-active) .alf-conversation-card-body {
    display: grid;
}

.alf-conversation-intro .alf-conversation-card-summary strong {
    font-size: var(--alf-font-lg);
}

.alf-conversation-intro .alf-conversation-card-body p {
    color: var(--alf-muted);
    font-size: var(--alf-font-md);
    line-height: var(--alf-leading-relaxed);
}

.alf-conversation-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-sm);
}

.alf-conversation-card.is-active .alf-conversation-card-summary {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--alf-space-md);
}

.alf-conversation-card-summary span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--alf-space-xs);
    border-radius: 999px;
    background: var(--alf-primary-soft);
    color: var(--alf-primary-strong);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-conversation-card.is-active .alf-conversation-card-summary span {
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--alf-primary-strong);
    font-size: 1rem;
    font-weight: var(--alf-font-semibold);
}

.alf-conversation-card-summary strong,
.alf-conversation-card-body label,
.alf-conversation-card-body p {
    margin: 0;
}

.alf-conversation-ack {
    display: none;
    margin: 0;
}

.alf-conversation-card.is-active .alf-conversation-ack {
    display: block;
    color: var(--alf-muted);
    font-size: 1rem;
    font-weight: var(--alf-font-normal);
    line-height: var(--alf-leading-relaxed);
}

.alf-conversation-card.is-complete:not(.is-active) .alf-conversation-ack {
    display: none;
}

.alf-conversation-card-summary strong {
    flex: 1;
    color: var(--alf-heading);
    font-size: 1.42rem;
    font-weight: var(--alf-font-medium);
    line-height: var(--alf-leading-tight);
}

.alf-conversation-card-summary .alf-inline-action {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--alf-font-family);
    font-size: var(--alf-font-sm);
}

.alf-conversation-card.is-complete:not(.is-active) .alf-conversation-card-summary strong {
    color: var(--alf-text);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-medium);
}

.alf-conversation-card-body {
    display: grid;
    gap: var(--alf-space-lg);
    align-content: start;
}

.alf-conversation-card-body label {
    color: var(--alf-muted);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-medium);
}

.alf-conversation-card-body p {
    color: var(--alf-muted);
    font-size: 1rem;
    line-height: var(--alf-leading-relaxed);
}

.alf-conversation-card-body input,
.alf-conversation-card-body textarea {
    width: 100%;
    min-height: 54px;
    padding: 0 var(--alf-space-lg);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-md);
    background: var(--alf-surface);
    color: var(--alf-text);
    font: inherit;
    font-size: 1.05rem;
    box-shadow: none;
    transition: border-color var(--alf-transition-fast), box-shadow var(--alf-transition-fast);
}

.alf-conversation-card-body textarea {
    min-height: 132px;
    padding-top: var(--alf-space-md);
    padding-bottom: var(--alf-space-md);
    resize: vertical;
}

.alf-conversation-card-body input:focus,
.alf-conversation-card-body textarea:focus {
    border-color: var(--alf-primary-strong);
    outline: 2px solid var(--alf-primary-soft);
    outline-offset: 1px;
    box-shadow: var(--alf-shadow-sm);
}

.alf-conversation-card.is-complete:not(.is-active):not(.alf-conversation-intro) .alf-conversation-card-body {
    display: none;
}

.alf-conversation-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-conversation-options .alf-button {
    min-height: 46px;
    padding-inline: var(--alf-space-lg);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-medium);
}

.alf-conversation-nested {
    display: grid;
    gap: var(--alf-space-md);
    margin-top: var(--alf-space-sm);
    padding-top: var(--alf-space-md);
    border-top: 1px solid var(--alf-border-muted);
}

.alf-conversation-review {
    display: grid;
    grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
    gap: var(--alf-space-sm) var(--alf-space-md);
    margin: 0;
}

.alf-conversation-review dt {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    font-weight: 600;
}

.alf-conversation-review dd {
    margin: 0;
    color: var(--alf-text);
}

.alf-form-grid-wide {
    grid-column: 1 / -1;
}

.alf-conversation-footer {
    position: sticky;
    bottom: calc(var(--alf-space-xl) * -1);
    margin: 0 calc(var(--alf-space-xl) * -1) calc(var(--alf-space-xl) * -1);
    padding: var(--alf-space-md) var(--alf-space-xl) var(--alf-space-xl);
    border-top: 1px solid var(--alf-border-muted);
    background: var(--alf-surface);
}

.alf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--alf-space-md);
}

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

.alf-card {
    min-height: 112px;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-card-label {
    display: block;
    margin-bottom: var(--alf-space-sm);
    color: var(--alf-muted);
    font-size: 11px;
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-card strong {
    display: block;
    margin-bottom: var(--alf-space-sm);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-semibold);
}

.alf-card p {
    margin: 0;
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-panel {
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-form {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--alf-space-md);
}

.alf-form-row {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-form-row label {
    color: var(--alf-label-color);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-form-row input:not([type="checkbox"]):not([type="radio"]),
.alf-form-row select,
.alf-form-row textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    color: var(--alf-text);
    background: var(--alf-surface);
    font: inherit;
    font-size: var(--alf-font-sm);
}

.alf-form-row textarea {
    resize: vertical;
}

.alf-form-row input:not([type="checkbox"]):not([type="radio"]):focus,
.alf-form-row select:focus,
.alf-form-row textarea:focus {
    border-color: var(--alf-primary);
    outline: 2px solid var(--alf-focus-ring);
}

.alf-form-row input[type="checkbox"],
.alf-form-row input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    margin: 0;
    accent-color: var(--alf-success);
    vertical-align: middle;
}

.alf-form-section {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-form-section h3,
.alf-panel h3 {
    margin: 0;
}

.alf-error {
    color: var(--alf-danger-strong);
    font-size: 13px;
}

.alf-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--alf-alert-success-border);
    border-radius: var(--alf-radius);
    background: var(--alf-alert-success-background);
    color: var(--alf-success-strong);
}

.alf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.alf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--alf-primary);
    border-radius: var(--alf-radius);
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
    cursor: pointer;
    font: inherit;
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
}

.alf-button:hover {
    background: var(--alf-primary-strong);
    border-color: var(--alf-primary-strong);
}

.alf-button-sm {
    min-height: 34px;
    padding: 0 var(--alf-space-md);
    font-size: var(--alf-font-sm);
}

.alf-button-secondary {
    border-color: var(--alf-border);
    background: var(--alf-surface);
    color: var(--alf-text);
}

.alf-button-secondary:hover {
    border-color: var(--alf-border);
    background: var(--alf-surface-muted);
}

/*
 * Sinalizacao de acao por borda esquerda (EA-UX-DC01 6.3): a cor reforca o
 * significado de acoes conclusivas em botoes de contorno, sem depender so
 * do texto. Usar em conjunto com .alf-button-secondary.
 */
.alf-button-accent-danger {
    border-left: 3px solid var(--alf-danger);
}

.alf-button-accent-success {
    border-left: 3px solid var(--alf-success);
}

.alf-button-accent-warning {
    border-left: 3px solid var(--alf-warning);
}

.alf-button-accent-info {
    border-left: 3px solid var(--alf-info);
}

.alf-table {
    width: 100%;
    border-collapse: collapse;
}

.alf-table th,
.alf-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--alf-border);
    border-right: 1px solid var(--alf-border-muted);
    text-align: left;
}

.alf-table th:last-child,
.alf-table td:last-child {
    border-right: none;
}

.alf-table th {
    border-bottom: 2px solid var(--alf-border);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-table-actions {
    display: flex;
    gap: 10px;
}

.alf-pagination {
    margin-top: 16px;
}

.alf-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.alf-pagination-link {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    color: var(--alf-primary-strong);
    font-weight: 700;
}

.alf-pagination-link.is-disabled {
    color: var(--alf-muted);
    opacity: 0.65;
}

.alf-pagination-summary {
    color: var(--alf-muted);
}

.alf-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.alf-detail-wide {
    grid-column: 1 / -1;
}

.alf-description-list {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 14px;
    margin: 0;
}

.alf-description-list dt {
    color: var(--alf-muted);
    font-weight: 700;
}

.alf-description-list dd {
    margin: 0;
}

.alf-customer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 18px;
    margin-bottom: 18px;
}

.alf-customer-summary {
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-customer-summary h3 {
    margin: 12px 0 8px;
    font-size: var(--alf-font-xl);
}

.alf-customer-summary p {
    max-width: 760px;
    margin: 0;
    color: var(--alf-muted);
    line-height: 1.6;
}

.alf-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
    font-size: 11px;
    font-weight: 700;
}

.alf-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
    white-space: nowrap;
}

.alf-status-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--alf-muted);
    flex: none;
}

.alf-status-dot-success::before {
    background: var(--alf-success);
}

.alf-status-dot-warning::before {
    background: var(--alf-warning);
}

.alf-status-dot-danger::before {
    background: var(--alf-danger);
}

.alf-status-dot-info::before {
    background: var(--alf-primary);
}

.alf-row-menu {
    position: relative;
    display: inline-flex;
}

.alf-row-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--alf-radius);
    background: none;
    color: var(--alf-muted);
    cursor: pointer;
    transition: background var(--alf-transition-fast), color var(--alf-transition-fast);
}

.alf-row-menu-trigger:hover,
.alf-row-menu-trigger[aria-expanded="true"] {
    background: var(--alf-surface-subtle);
    color: var(--alf-text);
}

.alf-row-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--alf-z-dropdown, 40);
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg, var(--alf-shadow));
}

.alf-row-menu-dropdown[hidden] {
    display: none;
}

.alf-row-menu-dropdown-up {
    top: auto;
    bottom: calc(100% + 4px);
}

.alf-row-menu-dropdown form {
    display: contents;
}

.alf-row-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: calc(var(--alf-radius) - 2px);
    background: none;
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.alf-row-menu-item:hover {
    background: var(--alf-surface-subtle);
}

.alf-row-menu-item-danger {
    color: var(--alf-danger-strong, var(--alf-danger));
}

.alf-row-menu-divider {
    margin: 4px 2px;
    border: none;
    border-top: 1px solid var(--alf-border-muted);
}

.alf-active-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--alf-success);
    vertical-align: middle;
}

.alf-active-indicator .alf-icon {
    width: 16px;
    height: 16px;
}

.alf-customer-kpis {
    display: grid;
    gap: 12px;
}

.alf-mini-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
    padding: 16px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
}

.alf-mini-card span {
    color: var(--alf-muted);
    font-weight: 700;
}

.alf-mini-card strong {
    font-size: var(--alf-font-xl);
}

.alf-mini-card-danger {
    border-left: 3px solid var(--alf-danger);
}

.alf-client-space-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: var(--alf-space-md);
}

.alf-client-space-main h3 {
    margin: 0 0 var(--alf-space-sm);
    font-size: var(--alf-font-xl);
}

.alf-client-space-main > p {
    max-width: 760px;
    color: var(--alf-muted);
    line-height: var(--alf-leading-relaxed);
}

.alf-client-indicators {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-client-indicator-card {
    min-height: 116px;
}

.alf-client-indicator-card-wide {
    grid-column: span 2;
}

.alf-client-indicator-card span {
    display: block;
    margin-bottom: var(--alf-space-xs);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-client-indicator-card strong {
    display: block;
    margin-bottom: var(--alf-space-xs);
    font-size: var(--alf-font-xl);
    line-height: var(--alf-leading-tight);
}

.alf-client-indicator-card-wide strong {
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-medium);
    line-height: var(--alf-leading-normal);
}

.alf-client-indicator-card p {
    margin: 0;
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-client-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-action-card-disabled {
    cursor: default;
}

.alf-action-card-disabled:hover {
    border-color: var(--alf-card-border);
    transform: none;
}

.alf-space-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: var(--alf-space-md);
}

.alf-space-overview-main h3 {
    margin: 0 0 var(--alf-space-sm);
    font-size: var(--alf-font-xl);
}

.alf-space-overview-main > p {
    max-width: 760px;
    color: var(--alf-muted);
    line-height: var(--alf-leading-relaxed);
}

.alf-space-indicators {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-space-indicator-card {
    min-height: 116px;
}

.alf-space-indicator-card span {
    display: block;
    margin-bottom: var(--alf-space-xs);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.alf-space-indicator-card strong {
    display: block;
    margin-bottom: var(--alf-space-xs);
    font-size: var(--alf-font-xl);
    line-height: var(--alf-leading-tight);
}

.alf-space-indicator-card p {
    margin: 0;
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-space-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.alf-tab {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    color: var(--alf-muted);
    font-weight: 700;
    white-space: nowrap;
}

.alf-tab.is-active {
    border-color: var(--alf-primary);
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
}

.alf-tab.is-placeholder {
    background: var(--alf-surface-muted);
}

.alf-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.alf-hub-primary {
    grid-column: 1 / -1;
}

.alf-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.alf-signal {
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-signal span {
    display: block;
    margin-bottom: 10px;
    color: var(--alf-muted);
    font-size: 11px;
    font-weight: 700;
}

.alf-signal strong {
    display: block;
    line-height: 1.3;
}

.alf-list-item {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--alf-border);
}

.alf-list-item:last-child {
    border-bottom: 0;
}

.alf-list-item span {
    color: var(--alf-muted);
}

.alf-timeline {
    display: grid;
    gap: 14px;
}

.alf-timeline-item {
    position: relative;
    padding-left: 24px;
}

.alf-timeline-item::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--alf-primary);
}

.alf-timeline-item time {
    display: block;
    margin-bottom: 4px;
    color: var(--alf-muted);
    font-size: 13px;
    font-weight: 700;
}

.alf-timeline-item p {
    margin: 0;
}

.alf-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.alf-placeholder-card {
    display: block;
    min-height: 140px;
    padding: var(--alf-space-lg);
    border: 1px dashed var(--alf-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
}

.alf-placeholder-card span {
    color: var(--alf-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.alf-placeholder-card h3 {
    margin: 10px 0 8px;
}

.alf-placeholder-card p {
    margin: 0;
    color: var(--alf-muted);
    line-height: 1.5;
}

/* Sinalizacao de estado real (nao decorativa) em cards que exibem dados dinamicos. */
.alf-placeholder-card-danger {
    border-left: 3px solid var(--alf-danger);
}

.alf-placeholder-card-warning {
    border-left: 3px solid var(--alf-warning);
}

.alf-placeholder-card-success {
    border-left: 3px solid var(--alf-success);
}

.alf-empty-state {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.alf-empty-state h3,
.alf-empty-state p {
    margin: 0;
}

.alf-empty-state p {
    max-width: 680px;
    color: var(--alf-muted);
    line-height: 1.5;
}

.alf-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-workspace-hero h2,
.alf-workspace-hero p {
    margin: 0;
}

.alf-workspace-hero h2 {
    font-size: var(--alf-font-hero);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-workspace-hero p {
    max-width: 760px;
    margin-top: var(--alf-space-sm);
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-workspace-hero .alf-button {
    margin-top: var(--alf-space-md);
}

.alf-dashboard-hero h2 {
    margin: 0;
    font-size: var(--alf-font-hero);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-dashboard-hero p:last-child {
    max-width: 760px;
    margin: var(--alf-space-sm) 0 0;
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-workspace-summary {
    display: grid;
    align-content: stretch;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-workspace-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
    padding: var(--alf-space-sm) 0;
    border-bottom: 1px solid var(--alf-card-border);
}

.alf-workspace-summary div:last-child {
    border-bottom: 0;
}

.alf-workspace-summary span,
.alf-workspace-summary small {
    color: var(--alf-muted);
}

.alf-workspace-summary span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.alf-workspace-summary strong {
    color: var(--alf-heading);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
    text-align: right;
}

.alf-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
}

.alf-action-card {
    display: grid;
    min-height: 126px;
    align-content: start;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-action-card[hidden] {
    display: none;
}

.alf-attention-list,
.alf-next-steps,
.alf-activity-timeline {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-attention-item,
.alf-recommendation-card,
.alf-activity-item {
    display: flex;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-sm);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-attention-item > span {
    display: inline-flex;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--alf-success);
}

.alf-attention-item strong,
.alf-attention-item p,
.alf-recommendation-card strong,
.alf-recommendation-card p,
.alf-activity-item strong,
.alf-activity-item p {
    display: block;
    margin: 0;
}

.alf-attention-item p,
.alf-recommendation-card p,
.alf-activity-item p {
    margin-top: 3px;
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-recommendation-card {
    display: grid;
}

.alf-recommendation-card:hover {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-surface);
}

.alf-activity-item {
    position: relative;
    padding-left: var(--alf-space-md);
}

.alf-activity-item::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--alf-primary);
}

.alf-activity-item > span {
    min-width: 68px;
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-tool-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alf-action-card:hover {
    border-color: var(--alf-card-action-hover-border);
    transform: translateY(-1px);
}

.alf-action-card strong {
    margin-bottom: var(--alf-space-sm);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-semibold);
}

.alf-action-card p {
    margin: 0;
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-action-card small {
    align-self: end;
    margin-top: var(--alf-space-md);
    color: var(--alf-status-neutral-text);
    font-size: 11px;
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-intent-hero {
    display: grid;
    justify-items: center;
    gap: var(--alf-space-md);
    max-width: 1120px;
    min-height: 44vh;
    margin: 0 auto;
    padding: clamp(var(--alf-space-xl), 7vh, 72px) var(--alf-space-lg) var(--alf-space-xl);
    text-align: center;
}

.alf-intent-hero h2 {
    margin: 0;
    color: var(--alf-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-intent-search {
    display: grid;
    justify-items: center;
    width: min(760px, 58vw);
}

.alf-intent-search input {
    width: 100%;
    min-height: 56px;
    padding: 0 var(--alf-space-lg);
    border: 1px solid var(--alf-border);
    border-radius: 999px;
    background: var(--alf-surface);
    color: var(--alf-text);
    font-size: var(--alf-font-md);
    outline: none;
    box-shadow: var(--alf-shadow);
    transition: border-color var(--alf-transition-fast), box-shadow var(--alf-transition-fast), background var(--alf-transition-fast);
}

.alf-intent-search input:focus {
    border-color: var(--alf-primary);
    background: var(--alf-surface);
    box-shadow: var(--alf-focus-ring);
}

.alf-intent-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--alf-space-sm);
    max-width: 760px;
}

.alf-intent-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--alf-space-xs);
    min-height: 34px;
    padding: 0 var(--alf-space-md);
    border: 1px solid var(--alf-border);
    border-radius: 999px;
    background: var(--alf-surface);
    color: var(--alf-text);
    font: inherit;
    font-size: var(--alf-font-sm);
    cursor: pointer;
    transition: border-color var(--alf-transition-fast), background var(--alf-transition-fast), color var(--alf-transition-fast);
}

.alf-intent-chip .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
}

.alf-intent-chip:hover {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-primary-soft);
    color: var(--alf-primary-strong);
}



.alf-intent-suggestions {
    max-width: 960px;
    margin: 0 auto;
}

.alf-intent-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--alf-space-md);
}

.alf-intent-results .alf-action-card {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.alf-intent-continue {
    display: grid;
    gap: var(--alf-space-md);
    max-width: 960px;
    margin: var(--alf-space-xl) auto 0;
    padding-top: var(--alf-space-lg);
    border-top: 1px solid var(--alf-border-muted);
}

.alf-intent-continue h3,
.alf-intent-continue p {
    margin: 0;
}

.alf-continue-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--alf-space-md);
}

.alf-continue-card {
    display: grid;
    gap: var(--alf-space-xs);
    min-height: 100px;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    transition: border-color var(--alf-transition-fast), box-shadow var(--alf-transition-fast);
}

.alf-continue-card strong {
    color: var(--alf-heading);
    font-size: var(--alf-font-md);
    font-weight: var(--alf-font-semibold);
}

.alf-continue-card p {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    line-height: var(--alf-leading-normal);
}

a.alf-continue-card {
    text-decoration: none;
}

a.alf-continue-card:hover {
    border-color: var(--alf-primary-strong);
    box-shadow: var(--alf-shadow-sm);
}

.alf-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
}

.alf-dashboard-wide {
    min-width: 0;
}

.alf-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
}

.alf-section-title h3 {
    margin: 0;
}

.alf-step-list {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-step-item {
    display: flex;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-sm);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-step-item > span {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
    font-weight: 700;
}

.alf-step-item strong,
.alf-step-item p {
    display: block;
    margin: 0;
}

.alf-step-item p {
    margin-top: 4px;
    color: var(--alf-muted);
    line-height: 1.45;
}

.alf-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-tool-card {
    display: flex;
    gap: var(--alf-space-sm);
    min-height: 88px;
    padding: var(--alf-space-sm);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-tool-card:hover {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-surface);
}

.alf-tool-card strong,
.alf-tool-card p,
.alf-tool-card small {
    display: block;
}

.alf-tool-card p {
    margin: 5px 0 8px;
    color: var(--alf-muted);
    line-height: 1.4;
}

.alf-tool-card small {
    color: var(--alf-status-neutral-text);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.alf-resource-list {
    display: grid;
    gap: 10px;
}

.alf-resource-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--alf-border);
}

.alf-resource-item:last-child {
    border-bottom: 0;
}

.alf-resource-item span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--alf-surface-muted);
    color: var(--alf-muted);
    font-size: 11px;
    font-weight: 700;
}

.alf-setup-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr) auto;
    align-items: center;
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-setup-banner h3,
.alf-setup-banner p {
    margin: 0;
}

.alf-setup-banner p:last-child {
    margin-top: 6px;
    color: var(--alf-muted);
    line-height: 1.5;
}

.alf-setup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-setup-hero h2 {
    margin: 0;
    font-size: var(--alf-font-hero);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-setup-hero p:last-child {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--alf-muted);
    line-height: 1.6;
}

.alf-progress-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-lg);
}

.alf-progress-steps-compact {
    margin-bottom: 0;
}

.alf-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
    color: var(--alf-muted);
}

.alf-progress-step span {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-surface);
    color: var(--alf-muted);
    font-size: 12px;
    font-weight: 700;
}

.alf-progress-step strong {
    font-size: 13px;
}

.alf-progress-step.is-current {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-surface);
    color: var(--alf-primary-strong);
}

.alf-progress-step.is-current span {
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
}

.alf-setup-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--alf-space-lg);
    margin-bottom: var(--alf-space-lg);
}

.alf-setup-card {
    display: grid;
    align-content: start;
    min-height: 220px;
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-setup-card.is-current {
    border-color: var(--alf-card-action-hover-border);
}

.alf-setup-card h3 {
    margin: 16px 0 8px;
}

.alf-setup-card p {
    margin: 0 0 18px;
    color: var(--alf-muted);
    line-height: 1.5;
}

.alf-setup-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.alf-setup-step span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
    font-weight: 700;
}

.alf-setup-step small,
.alf-status-soon {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--alf-surface-muted);
    color: var(--alf-muted);
    font-size: 11px;
    font-weight: 700;
}

.alf-empty-action {
    display: inline-flex;
    width: fit-content;
    margin-top: 8px;
    color: var(--alf-text);
    font-weight: 700;
}

.alf-onboarding-shell,
.alf-onboarding-page {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-onboarding-hero,
.alf-onboarding-panel {
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-onboarding-hero {
    display: grid;
    gap: var(--alf-space-xs);
}

.alf-onboarding-hero h2,
.alf-onboarding-hero p,
.alf-onboarding-panel h3,
.alf-onboarding-panel p {
    margin: 0;
}

.alf-onboarding-hero h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    line-height: 1.1;
}

.alf-onboarding-lead {
    color: var(--alf-heading);
    font-size: var(--alf-font-lg);
    font-weight: var(--alf-font-semibold);
}

.alf-onboarding-hero p:last-child,
.alf-onboarding-panel .alf-section-title p {
    margin-top: var(--alf-space-xs);
    color: var(--alf-muted);
}

.alf-onboarding-layout {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: var(--alf-space-md);
    align-items: start;
}

.alf-onboarding-nav {
    display: grid;
    gap: var(--alf-space-sm);
    position: sticky;
    top: calc(var(--alf-topbar-height) + var(--alf-space-md));
}

.alf-onboarding-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--alf-space-sm);
}

.alf-onboarding-step {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: var(--alf-space-sm);
    padding: 8px 10px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
    color: var(--alf-muted);
    cursor: pointer;
    text-align: left;
}

.alf-onboarding-step:hover {
    border-color: var(--alf-card-hover-border);
    background: var(--alf-surface);
    color: var(--alf-text);
}

.alf-onboarding-step span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-surface);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-onboarding-step strong {
    overflow: hidden;
    font-size: var(--alf-font-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alf-onboarding-step.is-current {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-surface);
    color: var(--alf-primary-strong);
}

.alf-onboarding-step.is-current span {
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
}

.alf-onboarding-panel {
    display: none;
}

.alf-onboarding-panel.is-current {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-onboarding-done {
    display: grid;
    justify-items: start;
    gap: var(--alf-space-sm);
}

.alf-onboarding-progress {
    display: grid;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
}

.alf-onboarding-progress div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
}

.alf-onboarding-progress strong {
    color: var(--alf-heading);
}

.alf-onboarding-progress span {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-onboarding-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--alf-space-sm);
}

.alf-onboarding-done .alf-onboarding-actions {
    justify-content: flex-start;
}

.alf-save-continue {
    min-width: 160px;
}

.alf-section-editor {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--alf-space-md);
    align-items: start;
}

.alf-section-sidebar,
.alf-section-content,
.alf-section-preview {
    min-width: 0;
}

.alf-section-sidebar,
.alf-section-preview {
    position: sticky;
    top: calc(var(--alf-topbar-height) + var(--alf-space-md));
}

.alf-section-nav {
    display: grid;
    gap: var(--alf-space-xs);
    padding: var(--alf-space-xs);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
}

.alf-section-nav-item {
    display: grid;
    gap: 2px;
    min-height: 50px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--alf-radius-sm);
    background: transparent;
    color: var(--alf-muted);
    cursor: pointer;
    text-align: left;
    transition: background var(--alf-transition-fast), border-color var(--alf-transition-fast), color var(--alf-transition-fast);
}

.alf-section-nav-item span {
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
}

.alf-section-nav-item small {
    overflow: hidden;
    font-size: var(--alf-font-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alf-section-nav-item:hover,
.alf-section-nav-item.is-current {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-surface-muted);
    color: var(--alf-primary-strong);
}

.alf-section-panel {
    display: none;
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-section-panel.is-current {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-section-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--alf-surface-muted);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    white-space: nowrap;
}

.alf-section-content {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
    justify-content: flex-end;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
}

.alf-progressive-form {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-profile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-profile-identity {
    display: flex;
    align-items: center;
    gap: var(--alf-space-md);
}

.alf-profile-avatar {
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-heading);
    color: var(--alf-text-inverse);
    font-size: var(--alf-font-xl);
    font-weight: var(--alf-font-semibold);
}

.alf-profile-identity h2,
.alf-profile-identity p,
.alf-profile-summary p {
    margin: 0;
}

.alf-profile-identity h2 {
    font-size: var(--alf-font-hero);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-profile-identity p,
.alf-profile-summary p {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
    margin-top: var(--alf-space-sm);
}

.alf-verification-badge,
.alf-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
    font-size: 11px;
    font-weight: var(--alf-font-semibold);
}

.alf-verified-badge-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--alf-status-neutral-text);
    color: var(--alf-text-inverse);
    font-size: 11px;
    line-height: 1;
}

.alf-verified-badge--pending {
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
}

.alf-verified-badge--pending .alf-verified-badge-icon {
    background: var(--alf-status-neutral-text);
}

.alf-verified-badge--verified {
    background: var(--alf-badge-info-background);
    color: var(--alf-info-strong);
}

.alf-verified-badge--verified .alf-verified-badge-icon {
    background: var(--alf-info);
}

.alf-verified-badge--premium {
    background: var(--alf-badge-warning-background);
    color: var(--alf-warning-strong);
}

.alf-verified-badge--premium .alf-verified-badge-icon {
    background: var(--alf-warning);
}

.alf-verified-badge--trusted {
    background: var(--alf-badge-success-background);
    color: var(--alf-success-strong);
}

.alf-verified-badge--trusted .alf-verified-badge-icon {
    background: var(--alf-success);
}

.alf-profile-summary {
    display: grid;
    align-content: center;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-profile-progress {
    display: grid;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-profile-progress h3,
.alf-profile-progress p {
    margin: 0;
}

.alf-profile-progress p {
    color: var(--alf-muted);
}

.alf-progress-meter {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--alf-surface-muted);
}

.alf-progress-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--alf-primary);
}

.alf-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-md);
}

.alf-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--alf-space-md);
}

.alf-profile-section {
    display: grid;
    gap: var(--alf-space-md);
    min-height: 140px;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-profile-section h3,
.alf-profile-section p {
    margin: 0;
}

.alf-profile-section p {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-profile-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-sm);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-profile-stat strong {
    font-size: var(--alf-font-2xl);
}

.alf-profile-stat span {
    color: var(--alf-muted);
    font-weight: 700;
}

.alf-profile-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-profile-checklist span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-profile-checklist span.is-complete {
    background: var(--alf-badge-success-background);
    color: var(--alf-success-strong);
}

.alf-account-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-account-data h3,
.alf-account-data p,
.alf-account-data-list {
    margin: 0;
}

.alf-account-data p {
    color: var(--alf-muted);
    line-height: 1.5;
}

.alf-account-data-list {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-account-data-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--alf-space-md);
    padding: var(--alf-space-sm) 0;
    border-bottom: 1px solid var(--alf-card-border);
}

.alf-account-data-list div:last-child {
    border-bottom: 0;
}

.alf-account-data-list dt {
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.alf-account-data-list dd {
    margin: 0;
    color: var(--alf-text);
    font-weight: 700;
    text-align: right;
}

.alf-profile-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: var(--alf-space-md);
}

.alf-form-section-framed {
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-account-section {
    background: var(--alf-surface);
}

.alf-public-preview {
    position: sticky;
    top: calc(var(--alf-topbar-height) + var(--alf-space-lg));
}

.alf-public-preview-card {
    display: grid;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius-lg);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-preview-status {
    padding: var(--alf-space-sm);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface-muted);
}

.alf-preview-status.is-visible {
    border-color: var(--alf-alert-success-border);
    background: var(--alf-alert-success-background);
}

.alf-public-preview-header {
    display: flex;
    align-items: center;
    gap: var(--alf-space-md);
}

.alf-public-preview-header h3,
.alf-public-preview-card p {
    margin: 0;
}

.alf-public-preview-card p {
    color: var(--alf-muted);
    line-height: 1.5;
}

.alf-public-preview-group {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-public-preview-group strong {
    color: var(--alf-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    text-transform: uppercase;
}

.alf-public-preview-headline {
    color: var(--alf-text);
    font-weight: 700;
}

.alf-public-preview img.alf-profile-avatar {
    object-fit: cover;
}

.alf-profile-photo-uploader {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--alf-space-md);
    align-items: center;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius-lg);
    background: var(--alf-surface-muted);
}

.alf-profile-photo-uploader img.alf-profile-avatar {
    object-fit: cover;
}

.alf-public-identity {
    display: grid;
    gap: var(--alf-space-md);
    margin-bottom: var(--alf-space-md);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-public-identity-header,
.alf-public-identity-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-md);
}

.alf-public-identity-header h3,
.alf-public-identity-header p,
.alf-public-identity-summary p,
.alf-form-help {
    margin: 0;
}

.alf-public-identity-header p,
.alf-public-identity-summary p,
.alf-form-help {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-public-identity-summary {
    padding: var(--alf-space-sm);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-public-identity-summary div {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-public-identity-summary a {
    color: var(--alf-primary);
    font-weight: 700;
}

.alf-public-identity-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-public-identity-options label {
    display: inline-flex;
    align-items: center;
    gap: var(--alf-space-sm);
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-medium);
}

.alf-visibility-options {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-visibility-option {
    display: flex;
    gap: var(--alf-space-sm);
    align-items: flex-start;
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    cursor: pointer;
    transition: border-color var(--alf-transition-fast), background var(--alf-transition-fast), box-shadow var(--alf-transition-fast);
}

.alf-visibility-option:hover,
.alf-visibility-option:has(input:checked) {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-primary-soft);
}

.alf-visibility-option:has(input:checked) {
    box-shadow: inset 3px 0 0 var(--alf-primary);
}

.alf-visibility-option input {
    margin-top: 3px;
    accent-color: var(--alf-primary);
}

.alf-visibility-option span {
    display: grid;
    gap: 2px;
}

.alf-visibility-option strong {
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
}

.alf-visibility-option small {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-visibility-option.is-disabled {
    opacity: 0.68;
    cursor: not-allowed;
}

.alf-visibility-option.is-disabled:hover {
    border-color: var(--alf-card-border);
    background: var(--alf-surface);
    box-shadow: none;
}

.alf-visible-info-list {
    display: grid;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-visible-info-list .alf-section-title {
    margin-bottom: var(--alf-space-xs);
}

.alf-visible-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-sm);
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface);
}

.alf-visible-info-item span {
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-medium);
}

.alf-visible-info-item small {
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    text-align: right;
}

.alf-handle-badge,
.alf-visibility-status {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--alf-badge-info-background);
    color: var(--alf-primary);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-visibility-status {
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
    white-space: nowrap;
}

.alf-visibility-status.is-visible {
    background: var(--alf-badge-success-background);
    color: var(--alf-success-strong);
}

.alf-public-profile {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--alf-space-lg);
    background: var(--alf-bg);
}

.alf-public-profile-card {
    display: grid;
    width: min(100%, 760px);
    gap: var(--alf-space-md);
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius-lg);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
}

.alf-profile-cover {
    min-height: 150px;
    margin: calc(var(--alf-space-lg) * -1) calc(var(--alf-space-lg) * -1) 0;
    border-radius: var(--alf-radius-lg) var(--alf-radius-lg) 0 0;
    background-color: var(--alf-surface-muted);
    background-position: center;
    background-size: cover;
}

.alf-profile-cover-empty {
    background:
        linear-gradient(135deg, var(--alf-primary-soft), var(--alf-surface-muted));
}

.alf-public-profile-header {
    display: flex;
    align-items: center;
    gap: var(--alf-space-md);
}

.alf-public-profile-header h1,
.alf-public-profile-header p,
.alf-public-profile-section h2,
.alf-public-profile-section p {
    margin: 0;
}

.alf-public-profile-header h1 {
    margin-top: var(--alf-space-sm);
    font-size: var(--alf-font-hero);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-public-profile-header p,
.alf-public-profile-section p {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-public-profile-title,
.alf-public-profile-location {
    display: block;
    margin-top: var(--alf-space-sm);
}

.alf-public-profile-title {
    color: var(--alf-heading);
    font-size: var(--alf-font-md);
}

.alf-public-profile-location {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    font-weight: 700;
}

.alf-public-profile-section {
    display: grid;
    gap: var(--alf-space-sm);
    padding-top: var(--alf-space-md);
    border-top: 1px solid var(--alf-card-border);
}

.alf-public-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-public-profile-meta {
    margin-top: var(--alf-space-sm);
}

.alf-public-profile-tags span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--alf-status-neutral-background);
    color: var(--alf-status-neutral-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
}

.alf-public-profile img.alf-profile-avatar {
    object-fit: cover;
}

.alf-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-social-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
}

.alf-social-button:hover {
    border-color: var(--alf-card-action-hover-border);
    color: var(--alf-primary);
}

.alf-social-button-primary {
    border-color: var(--alf-alert-success-border);
    background: var(--alf-alert-success-background);
    color: var(--alf-success-strong);
}

.alf-public-topbar {
    position: fixed;
    z-index: var(--alf-z-topbar);
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: var(--alf-space-md);
    padding: 0 clamp(var(--alf-space-md), 3vw, var(--alf-space-xl));
    border-bottom: 1px solid var(--alf-border-soft);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
}

.alf-public-topbar-brand {
    color: var(--alf-heading);
    font-size: var(--alf-font-md);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.alf-public-topbar-search {
    display: flex;
    min-height: 38px;
    max-width: 560px;
    flex: 1 1 360px;
    align-items: center;
    gap: var(--alf-space-sm);
    padding: 0 var(--alf-space-md);
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius-full);
    background: var(--alf-surface-muted);
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-public-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--alf-space-sm);
    margin-left: auto;
    white-space: nowrap;
}

.alf-public-topbar-link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 var(--alf-space-sm);
    border-radius: var(--alf-radius-full);
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: 700;
    text-decoration: none;
}

.alf-public-topbar-link:hover {
    background: var(--alf-surface-muted);
    color: var(--alf-primary);
}

.alf-public-topbar-avatar {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius-full);
    background: var(--alf-primary-soft);
    color: var(--alf-primary);
    font-size: var(--alf-font-sm);
    font-weight: 800;
    object-fit: cover;
}

.alf-public-page {
    min-height: 100vh;
    padding:
        calc(58px + clamp(var(--alf-space-md), 3vw, var(--alf-space-xl)))
        clamp(var(--alf-space-md), 3vw, var(--alf-space-xl))
        clamp(var(--alf-space-md), 3vw, var(--alf-space-xl));
    background:
        radial-gradient(circle at top left, var(--alf-primary-soft), transparent 34%),
        var(--alf-bg);
}

.alf-public-page--app-shell {
    min-height: auto;
    padding: 0;
    background: transparent;
}

.alf-public-profile-shell {
    display: grid;
    width: min(100%, 1120px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius-lg);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg);
}

.alf-profile-owner-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
    padding: var(--alf-space-md);
    border-bottom: 1px solid var(--alf-card-border);
    background: var(--alf-primary-soft);
}

.alf-profile-owner-notice strong,
.alf-profile-owner-notice p {
    margin: 0;
}

.alf-profile-owner-notice strong {
    color: var(--alf-heading);
}

.alf-profile-owner-notice p {
    margin-top: var(--alf-space-xs);
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-profile-owner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--alf-space-sm);
}

.alf-public-cover {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background: var(--alf-surface-muted);
}

.alf-public-cover-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, var(--alf-primary-soft), rgba(255, 255, 255, 0.76)),
        radial-gradient(circle at 70% 20%, var(--alf-alpha-primary-20), transparent 28%);
    background-position: center;
    background-size: cover;
}

.alf-public-cover-media::after {
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, var(--alf-surface));
    content: "";
}

.alf-public-cover-content {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--alf-space-lg);
    min-height: 300px;
    padding: clamp(var(--alf-space-lg), 4vw, 42px);
}

.alf-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: end;
}

.alf-public-hero-main {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    gap: var(--alf-space-lg);
}

.alf-public-hero-aside {
    display: grid;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-alpha-white-82);
    box-shadow: var(--alf-shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.alf-public-signal-grid {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-public-signal {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: var(--alf-space-sm);
    min-width: 0;
}

.alf-public-signal .alf-icon {
    width: var(--alf-icon-size-sm);
    height: var(--alf-icon-size-sm);
    color: var(--alf-muted);
}

.alf-public-signal small {
    display: block;
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
}

.alf-public-signal strong {
    display: block;
    overflow: hidden;
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alf-availability-dot {
    display: inline-flex;
    width: 10px;
    height: 10px;
    justify-self: center;
    border-radius: 999px;
    background: var(--alf-muted);
    box-shadow: 0 0 0 4px var(--alf-surface-muted);
}

.alf-availability-dot.is-available {
    background: var(--alf-success);
    box-shadow: 0 0 0 4px var(--alf-alert-success-background);
}

.alf-availability-dot.is-unavailable {
    background: var(--alf-muted);
}

.alf-social-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-xs);
}

.alf-social-icon-button {
    display: inline-flex;
    min-width: 34px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--alf-card-border);
    border-radius: 999px;
    background: var(--alf-surface);
    color: var(--alf-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    text-decoration: none;
    transition: border-color var(--alf-transition-fast), color var(--alf-transition-fast), transform var(--alf-transition-fast);
}

.alf-social-icon-button:hover {
    border-color: var(--alf-primary);
    color: var(--alf-primary);
    transform: translateY(-1px);
}

.alf-public-hero-note {
    margin: 0;
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-trust-placeholder {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-xs);
    padding-top: var(--alf-space-xs);
    border-top: 1px solid var(--alf-card-border);
}

.alf-trust-placeholder span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 8px;
    border: 1px dashed var(--alf-border);
    border-radius: 999px;
    background: var(--alf-surface-muted);
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
}

.alf-public-avatar {
    display: inline-flex;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--alf-surface);
    border-radius: 999px;
    background: var(--alf-heading);
    color: var(--alf-text-inverse);
    font-size: var(--alf-font-2xl);
    font-weight: var(--alf-font-semibold);
    object-fit: cover;
    box-shadow: var(--alf-shadow-lg);
}

.alf-public-cover-copy {
    display: grid;
    max-width: 720px;
    gap: var(--alf-space-xs);
}

.alf-public-cover-copy h1,
.alf-public-cover-copy p,
.alf-public-section h2,
.alf-public-section p {
    margin: 0;
}

.alf-public-cover-copy h1 {
    color: var(--alf-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--alf-font-semibold);
    line-height: 1.1;
}

.alf-public-cover-copy strong {
    color: var(--alf-text);
    font-size: var(--alf-font-lg);
}

.alf-public-cover-copy p {
    color: var(--alf-muted);
    font-size: var(--alf-font-md);
    line-height: var(--alf-leading-normal);
}

.alf-public-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--alf-space-lg);
    padding: clamp(var(--alf-space-lg), 4vw, 42px);
}

.alf-public-content,
.alf-public-sidebar {
    display: grid;
    align-content: start;
    gap: var(--alf-space-md);
}

.alf-public-sidebar {
    position: sticky;
    top: var(--alf-space-lg);
}

.alf-public-section {
    display: grid;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-lg);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
}

.alf-public-section h2 {
    color: var(--alf-heading);
    font-size: var(--alf-font-lg);
}

.alf-public-section p {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-public-empty-profile {
    border-color: var(--alf-card-action-hover-border);
    background: var(--alf-primary-soft);
}

.alf-public-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-public-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--alf-space-sm);
}

.alf-public-category-list span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--alf-card-border);
    border-radius: 999px;
    background: var(--alf-surface-muted);
    color: var(--alf-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-medium);
}

.alf-public-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--alf-space-sm);
    margin-top: var(--alf-space-sm);
}

.alf-public-suggestion-card {
    display: grid;
    gap: var(--alf-space-xs);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-bg);
}

.alf-public-suggestion-card strong {
    color: var(--alf-text);
}

.alf-public-suggestion-card p {
    font-size: var(--alf-font-sm);
}

.alf-auth-page {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 440px);
    align-items: center;
    gap: clamp(var(--alf-space-xl), 5vw, 72px);
    padding: clamp(var(--alf-space-xl), 6vw, 80px);
    background: var(--alf-surface);
}

.alf-auth-hero {
    display: grid;
    gap: var(--alf-space-xl);
    max-width: 760px;
}

.alf-auth-brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--alf-space-sm);
    color: var(--alf-heading);
    font-weight: var(--alf-font-semibold);
}

.alf-auth-hero h1,
.alf-auth-card h2,
.alf-auth-card p,
.alf-auth-lead,
.alf-auth-statement {
    margin: 0;
}

.alf-auth-hero h1 {
    max-width: 680px;
    color: var(--alf-heading);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.3;
    letter-spacing: 0;
}

.alf-auth-lead {
    max-width: 620px;
    margin-top: var(--alf-space-lg);
    color: var(--alf-text);
    font-size: var(--alf-text-lg);
    line-height: var(--alf-leading-relaxed);
}

.alf-auth-statement {
    max-width: 620px;
    margin-top: var(--alf-space-md);
    color: var(--alf-muted);
    font-size: var(--alf-font-md);
    line-height: var(--alf-leading-normal);
}

.alf-auth-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--alf-space-sm);
    max-width: 640px;
}

.alf-auth-benefit-item {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    color: var(--alf-text);
    font-size: var(--alf-font-sm);
    line-height: var(--alf-leading-normal);
}

.alf-auth-benefit-item::before {
    content: "";
    display: inline-flex;
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: var(--alf-primary);
}

.alf-auth-network {
    position: relative;
    width: min(100%, 620px);
    min-height: 260px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius-lg);
    background: var(--alf-surface-subtle);
    overflow: hidden;
}

.alf-auth-network::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid var(--alf-border-muted);
    border-radius: 999px;
}

.alf-auth-node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid var(--alf-card-border);
    border-radius: 999px;
    background: var(--alf-surface);
    color: var(--alf-text);
    font-size: var(--alf-font-xs);
    font-weight: var(--alf-font-semibold);
    box-shadow: var(--alf-shadow-sm);
    white-space: nowrap;
}

.alf-auth-node-main {
    top: 50%;
    left: 50%;
    background: var(--alf-primary);
    color: var(--alf-text-inverse);
    transform: translate(-50%, -50%);
}

.alf-auth-node-person {
    top: 34px;
    left: 52px;
}

.alf-auth-node-company {
    top: 42px;
    right: 74px;
}

.alf-auth-node-project {
    right: 46px;
    bottom: 76px;
}

.alf-auth-node-knowledge {
    bottom: 36px;
    left: 72px;
}

.alf-auth-node-reviews {
    top: 116px;
    left: 24px;
}

.alf-auth-node-opportunities {
    right: 28px;
    top: 128px;
}

.alf-auth-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: var(--alf-border-muted);
    transform-origin: left center;
}

.alf-auth-line-1 {
    top: 88px;
    left: 140px;
    width: 250px;
    transform: rotate(19deg);
}

.alf-auth-line-2 {
    top: 166px;
    left: 174px;
    width: 230px;
    transform: rotate(-21deg);
}

.alf-auth-line-3 {
    top: 138px;
    left: 98px;
    width: 210px;
    transform: rotate(6deg);
}

.alf-auth-line-4 {
    top: 138px;
    right: 94px;
    width: 190px;
    transform: rotate(-8deg);
}

.alf-auth-card {
    display: grid;
    gap: var(--alf-space-xl);
    width: 100%;
    max-width: 460px;
    padding: clamp(28px, 4vw, 40px);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius-lg);
    background: var(--alf-surface);
    box-shadow: 0 8px 32px var(--alf-alpha-slate-08), 0 2px 8px var(--alf-alpha-slate-06);
}

.alf-auth-card-header {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-auth-card h2 {
    color: var(--alf-heading);
    font-size: var(--alf-font-2xl);
}

.alf-auth-card p {
    color: var(--alf-muted);
    line-height: var(--alf-leading-normal);
}

.alf-auth-submit {
    width: 100%;
    min-height: 52px;
    font-size: var(--alf-text-md);
}

.alf-password-wrapper {
    position: relative;
    display: flex;
}

.alf-password-wrapper input {
    width: 100%;
    padding-right: 44px;
}

.alf-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--alf-radius-sm);
    background: transparent;
    color: var(--alf-muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color var(--alf-transition-fast), background var(--alf-transition-fast);
}

.alf-password-toggle:hover {
    color: var(--alf-text);
    background: var(--alf-surface-muted);
}

.alf-password-toggle .alf-icon-eye {
    width: 18px;
    height: 18px;
}

.alf-auth-card .alf-form-row input {
    min-height: 52px;
    padding: 12px 14px;
    font-size: var(--alf-text-md);
}

.alf-auth-card .alf-form-row input:focus {
    border-color: var(--alf-primary);
    outline: 2px solid var(--alf-alpha-primary-20);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--alf-focus-ring);
}

.alf-auth-card .alf-form-row {
    gap: var(--alf-space-sm);
}

.alf-auth-actions {
    display: grid;
    gap: var(--alf-space-sm);
    justify-items: center;
    padding-top: var(--alf-space-md);
    border-top: 1px solid var(--alf-border-muted);
}

.alf-auth-actions a {
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    transition: color var(--alf-transition-fast);
}

.alf-auth-actions .alf-auth-primary-link {
    color: var(--alf-primary);
}

.alf-auth-actions .alf-auth-primary-link:hover {
    color: var(--alf-primary-strong);
}

.alf-auth-actions a:not(.alf-auth-primary-link) {
    color: var(--alf-muted);
}

.alf-auth-actions a:not(.alf-auth-primary-link):hover {
    color: var(--alf-text);
}

.alf-auth-terms {
    margin: 0;
    color: var(--alf-muted);
    font-size: var(--alf-font-xs);
    line-height: var(--alf-leading-normal);
    text-align: center;
}

.alf-auth-terms a {
    color: var(--alf-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alf-auth-terms a:hover {
    color: var(--alf-text);
}

.alf-auth-toggle-text {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-public-entry {
    display: grid;
    min-height: 100vh;
    gap: var(--alf-space-md);
    padding: var(--alf-space-xl);
    grid-template-rows: auto 1fr;
}

.alf-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alf-space-md);
    width: min(100%, 1120px);
    margin: 0 auto;
}

.alf-entry-nav {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
}

.alf-entry-nav > a:first-child {
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    transition: color var(--alf-transition-fast);
}

.alf-entry-nav > a:first-child:hover {
    color: var(--alf-primary-strong);
}

.alf-entry-hero {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--alf-space-md);
    width: min(100%, 1120px);
    margin: 0 auto;
    text-align: center;
}

.alf-entry-hero h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--alf-font-semibold);
}

.alf-entry-hero .alf-intent-search {
    width: min(760px, 64vw);
}

.alf-entry-suggestions {
    width: min(100%, 960px);
    margin: 0 auto;
}

.alf-entry-suggestions .alf-action-card {
    color: inherit;
    text-align: left;
}

.alf-button-ghost {
    border-color: var(--alf-border);
    background: transparent;
    color: var(--alf-text);
}

.alf-button-ghost:hover {
    border-color: var(--alf-text);
    background: var(--alf-surface-muted);
}

.alf-auth-brand img {
    display: block;
    height: auto;
}

@media (max-width: 900px) {
    .alf-app {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .alf-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--alf-z-drawer);
        width: min(85vw, 320px);
        height: 100vh;
        max-height: 100vh;
        padding: 18px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--alf-transition);
        box-shadow: var(--alf-shadow-lg);
    }

    .alf-mobile-menu-open .alf-sidebar {
        transform: translateX(0);
    }

    button.alf-mobile-menu-toggle,
    button.alf-mobile-menu-close {
        display: inline-flex;
    }

    .alf-sidebar-toggle {
        display: none;
    }

    .alf-brand {
        justify-content: space-between;
    }

    .alf-sidebar-collapsed .alf-sidebar {
        width: min(85vw, 320px);
        flex-basis: auto;
        padding: 18px;
    }

    .alf-sidebar-collapsed .alf-sidebar-text,
    .alf-sidebar-collapsed .alf-nav-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        opacity: 1;
        white-space: normal;
    }

    .alf-sidebar-collapsed .alf-nav-link {
        justify-content: flex-start;
    }

    .alf-sidebar-collapsed .alf-workspace-footer-icon {
        display: none;
    }

    .alf-main,
    .alf-sidebar-collapsed .alf-main {
        width: 100%;
        flex: 1 1 auto;
        height: auto;
        min-height: 100vh;
        margin-left: 0;
        overflow: visible;
    }

    .alf-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding-right: 0;
        flex: none;
    }

    .alf-topbar {
        position: sticky;
        right: auto;
        left: auto;
        width: 100%;
        align-items: center;
        flex-direction: row;
        min-height: var(--alf-topbar-height);
        padding: 12px 20px;
    }

    .alf-topbar-actions {
        width: auto;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .alf-topbar-search,
    .alf-search-placeholder {
        width: auto;
        min-width: 0;
    }

    .alf-topbar-search {
        flex: 1 1 auto;
    }

    .alf-tool-drawer {
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

    .alf-tool-drawer-grid {
        grid-template-columns: 1fr;
    }

    .alf-app-launcher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alf-content {
        padding: 20px;
        overflow: visible;
    }

    .alf-grid,
    .alf-dashboard-grid,
    .alf-dashboard-hero,
    .alf-workspace-hero,
    .alf-dashboard-layout,
    .alf-tool-grid,
    .alf-tool-grid-compact,
    .alf-setup-banner,
    .alf-setup-hero,
    .alf-progress-steps,
    .alf-onboarding-layout,
    .alf-onboarding-steps,
    .alf-setup-grid,
    .alf-profile-header,
    .alf-profile-grid,
    .alf-intent-results,
    .alf-section-editor,
    .alf-account-data,
    .alf-profile-editor-layout {
        grid-template-columns: 1fr;
    }

    .alf-continue-cards {
        grid-template-columns: 1fr;
    }

    .alf-intent-hero {
        min-height: auto;
        padding-right: 0;
        padding-left: 0;
    }

    .alf-intent-search {
        width: 100%;
    }

    .alf-public-entry {
        padding: var(--alf-space-lg);
    }

    .alf-entry-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-entry-hero {
        margin-top: var(--alf-space-xl);
    }

    .alf-entry-hero .alf-intent-search {
        width: 100%;
    }

    .alf-onboarding-nav {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alf-onboarding-progress div:first-child {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-onboarding-actions {
        justify-content: flex-start;
    }

    .alf-onboarding-step strong {
        white-space: normal;
    }

    .alf-section-sidebar,
    .alf-section-preview {
        position: static;
    }

    .alf-section-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alf-section-actions {
        justify-content: flex-start;
    }

    .alf-public-preview {
        position: static;
    }

    .alf-profile-photo-uploader {
        grid-template-columns: 1fr;
    }

    .alf-account-data-list div {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-account-data-list dd {
        text-align: left;
    }

    .alf-public-identity-header,
    .alf-public-identity-summary {
        display: grid;
    }

    .alf-public-profile-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-public-cover-content {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
    }

    .alf-public-hero,
    .alf-public-hero-main {
        grid-template-columns: 1fr;
    }

    .alf-public-hero-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-public-hero-aside {
        width: 100%;
    }

    .alf-public-avatar {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    .alf-public-main,
    .alf-public-suggestion-grid {
        grid-template-columns: 1fr;
    }

    .alf-public-sidebar {
        position: static;
    }

    .alf-public-topbar {
        flex-wrap: wrap;
        gap: var(--alf-space-sm);
        padding-block: var(--alf-space-sm);
    }

    .alf-public-topbar-search {
        order: 3;
        min-height: 34px;
        flex-basis: 100%;
        font-size: var(--alf-font-xs);
    }

    .alf-public-topbar-actions {
        gap: var(--alf-space-xs);
    }

    .alf-public-topbar .alf-button-sm {
        padding: 0 var(--alf-space-sm);
    }

    .alf-public-page {
        padding-top: calc(104px + var(--alf-space-md));
    }

    .alf-public-page--app-shell {
        padding: 0;
    }

    .alf-profile-owner-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-profile-owner-actions {
        justify-content: flex-start;
    }

    .alf-profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .alf-form-grid {
        grid-template-columns: 1fr;
    }

    .alf-auth-page {
        grid-template-columns: 1fr;
        align-items: start;
        padding: var(--alf-space-xl);
    }

    .alf-auth-hero {
        gap: var(--alf-space-lg);
    }

    .alf-auth-benefits {
        grid-template-columns: 1fr;
    }

    .alf-auth-network {
        min-height: 180px;
    }

    .alf-auth-node {
        min-height: 28px;
        padding: 5px 8px;
    }

    .alf-auth-node-knowledge,
    .alf-auth-node-reviews,
    .alf-auth-node-opportunities,
    .alf-auth-line {
        display: none;
    }

    .alf-client-action-grid,
    .alf-client-indicators,
    .alf-client-space-grid,
    .alf-space-action-grid,
    .alf-space-indicators,
    .alf-space-overview-grid,
    .alf-detail-grid,
    .alf-description-list {
        grid-template-columns: 1fr;
    }

    .alf-guided-edit-shell {
        grid-template-columns: 1fr;
    }

    .alf-guided-drawer,
    .alf-explains-drawer {
        width: min(90vw, calc(100vw - 24px));
    }

    .alf-conversation-drawer {
        min-width: 0;
    }

    .alf-guided-progress > div:first-child,
    .alf-guided-actions {
        align-items: stretch;
        flex-direction: column;
    }

.alf-document-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--alf-space-md);
    align-items: start;
}

.alf-document-sidebar {
    display: grid;
    gap: var(--alf-space-md);
}

.alf-document-content {
    --dc-font-size: 0.9375rem;
    --dc-line-height: 1.7;
    --dc-max-width: 760px;
    --dc-spacing: var(--alf-space-lg);
    --dc-heading-margin: 1.5em 0 0.5em;
    --dc-heading-color: var(--alf-heading);
    --dc-text-color: var(--alf-text);
    --dc-muted-color: var(--alf-muted);
    --dc-border-color: var(--alf-border);
    --dc-code-bg: var(--alf-surface-muted);
    --dc-code-color: var(--alf-text);
    --dc-blockquote-border: var(--alf-primary);
    --dc-blockquote-bg: var(--alf-surface-primary-soft);
    --dc-table-border: var(--alf-border);
    --dc-table-header-bg: var(--alf-surface-subtle);
    --dc-link-color: var(--alf-primary-strong);
    --dc-task-checked-color: var(--alf-success);
    --dc-hr-border: var(--alf-border);
}

.alf-document-content > :first-child {
    margin-top: 0;
}

.alf-document-content h1,
.alf-document-content h2,
.alf-document-content h3,
.alf-document-content h4,
.alf-document-content h5,
.alf-document-content h6 {
    margin: var(--dc-heading-margin);
    color: var(--dc-heading-color);
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-document-content h1 { font-size: 1.625rem; }
.alf-document-content h2 { font-size: 1.375rem; }
.alf-document-content h3 { font-size: 1.125rem; }
.alf-document-content h4 { font-size: 1rem; }
.alf-document-content h5 { font-size: 0.9375rem; }
.alf-document-content h6 { font-size: 0.875rem; color: var(--dc-muted-color); }

.alf-document-content p {
    margin: 0 0 var(--dc-spacing);
    color: var(--dc-text-color);
    font-size: var(--dc-font-size);
    line-height: var(--dc-line-height);
}

.alf-document-content p:last-child {
    margin-bottom: 0;
}

.alf-document-content a {
    color: var(--dc-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alf-document-content a:hover {
    opacity: 0.85;
}

.alf-document-content ul,
.alf-document-content ol {
    margin: 0 0 var(--dc-spacing);
    padding-left: 1.5em;
    font-size: var(--dc-font-size);
    line-height: var(--dc-line-height);
}

.alf-document-content li {
    margin-bottom: 0.25em;
}

.alf-document-content li:last-child {
    margin-bottom: 0;
}

.alf-document-content ul ul,
.alf-document-content ol ol,
.alf-document-content ul ol,
.alf-document-content ol ul {
    margin-bottom: 0;
    margin-top: 0.25em;
}

.alf-document-content blockquote {
    margin: 0 0 var(--dc-spacing);
    padding: var(--alf-space-sm) var(--alf-space-md);
    border-left: 3px solid var(--dc-blockquote-border);
    background: var(--dc-blockquote-bg);
    border-radius: 0 var(--alf-radius-sm) var(--alf-radius-sm) 0;
    font-size: var(--dc-font-size);
    line-height: var(--dc-line-height);
    color: var(--dc-text-color);
}

.alf-document-content blockquote p:last-child {
    margin-bottom: 0;
}

.alf-document-content code {
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--dc-code-bg);
    color: var(--dc-code-color);
    font-size: 0.85em;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

.alf-document-content pre {
    margin: 0 0 var(--dc-spacing);
    padding: var(--alf-space-md);
    border: 1px solid var(--dc-border-color);
    border-radius: var(--alf-radius-sm);
    background: var(--dc-code-bg);
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.alf-document-content pre code {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: inherit;
}

.alf-document-content table {
    width: 100%;
    margin: 0 0 var(--dc-spacing);
    border-collapse: collapse;
    font-size: var(--dc-font-size);
    line-height: var(--dc-line-height);
}

.alf-document-content th,
.alf-document-content td {
    padding: 8px 10px;
    border: 1px solid var(--dc-table-border);
    text-align: left;
}

.alf-document-content th {
    background: var(--dc-table-header-bg);
    font-weight: var(--alf-font-semibold);
}

.alf-document-content hr {
    margin: var(--alf-space-xl) 0;
    border: none;
    border-top: 1px solid var(--dc-hr-border);
}

.alf-document-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--alf-radius-sm);
    margin: var(--dc-spacing) 0;
}

.alf-document-content ul.task-list {
    list-style: none;
    padding-left: 0;
}

.alf-document-content .task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.alf-document-content .task-list-item input[type="checkbox"] {
    margin-top: 0.3em;
    accent-color: var(--dc-task-checked-color);
}

.alf-document-content .task-list-item input[type="checkbox"]:checked + p {
    text-decoration: line-through;
    color: var(--dc-muted-color);
}

.alf-document-content .task-list-item p {
    margin: 0;
}

.alf-syntax-help {
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    background: var(--alf-surface-subtle);
}

.alf-collapsible {
    margin-top: var(--alf-space-lg);
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow);
}

.alf-collapsible-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.alf-collapsible-summary::-webkit-details-marker {
    display: none;
}

.alf-collapsible-summary h3 {
    margin: 0;
}

.alf-collapsible[open] .alf-collapsible-summary {
    margin-bottom: var(--alf-space-sm);
    padding-bottom: var(--alf-space-sm);
    border-bottom: 1px solid var(--alf-border-muted);
}

.alf-collapsible-content > :first-child {
    margin-top: 0;
}

.alf-syntax-help-summary {
    padding: var(--alf-space-sm) var(--alf-space-md);
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    cursor: pointer;
    user-select: none;
}

.alf-syntax-help[open] .alf-syntax-help-summary {
    border-bottom: 1px solid var(--alf-border-muted);
    margin-bottom: var(--alf-space-sm);
}

.alf-syntax-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--alf-space-sm);
    padding: var(--alf-space-sm) var(--alf-space-md) var(--alf-space-md);
}

.alf-syntax-help-item {
    display: grid;
    gap: 2px;
    padding: 4px 6px;
    border: none;
    border-radius: var(--alf-radius);
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background var(--alf-transition-fast);
}

.alf-syntax-help-item:hover,
.alf-syntax-help-item:focus-visible {
    background: var(--alf-surface-hover, var(--alf-surface));
}

.alf-syntax-help-item code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--dc-code-bg);
    font-size: 0.8125rem;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

.alf-syntax-help-item span {
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
}

.alf-preview-content {
    padding: var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    min-height: 100px;
}

    .alf-customer-hero,
    .alf-hub-grid,
    .alf-signal-grid,
    .alf-placeholder-grid {
        grid-template-columns: 1fr;
    }

    .alf-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════
   Alfredo Docs Experience — Sprint 1
   Reading Experience (Experiência de Leitura)
   ═══════════════════════════════════════════ */

.alf-docs-reading {
    max-width: 1200px;
    margin: 0 auto;
}

.alf-docs-reading-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--alf-space-xl);
    align-items: start;
}

.alf-docs-reading-main {
    min-width: 0;
}

/* ── Breadcrumb ─────────────────────────────── */

.alf-docs-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 var(--alf-space-lg);
    padding: 0;
    font-size: var(--alf-font-sm);
    color: var(--alf-muted);
}

.alf-docs-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.alf-docs-breadcrumb li + li::before {
    content: '/';
    color: var(--alf-color-neutral-400);
    font-size: 0.75rem;
}

.alf-docs-breadcrumb a {
    color: var(--alf-primary);
    text-decoration: none;
}

.alf-docs-breadcrumb a:hover {
    text-decoration: underline;
}

.alf-docs-breadcrumb [aria-current="page"] {
    color: var(--alf-text);
    font-weight: var(--alf-font-medium);
}

/* ── Reading Header ──────────────────────────── */

.alf-docs-reading-header {
    margin-bottom: var(--alf-space-xl);
}

.alf-docs-reading-header h1 {
    margin: 0 0 var(--alf-space-sm);
    font-size: 1.75rem;
    font-weight: var(--alf-font-bold);
    line-height: var(--alf-leading-tight);
    color: var(--alf-heading);
}

.alf-docs-reading-header-summary {
    margin: 0 0 var(--alf-space-md);
    font-size: var(--alf-text-md);
    line-height: var(--alf-leading-relaxed);
    color: var(--alf-muted);
}

.alf-docs-reading-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--alf-space-md);
    font-size: var(--alf-font-sm);
    color: var(--alf-muted);
}

.alf-docs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.alf-docs-meta-item .alf-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* ── Content Area ────────────────────────────── */

.alf-docs-reading-content {
    font-size: var(--dc-font-size, 0.9375rem);
    line-height: var(--dc-line-height, 1.7);
    color: var(--dc-text-color, var(--alf-text));
    max-width: var(--dc-max-width, 760px);
}

.alf-docs-reading-content > :first-child {
    margin-top: 0;
}

.alf-docs-reading-content h1,
.alf-docs-reading-content h2,
.alf-docs-reading-content h3,
.alf-docs-reading-content h4,
.alf-docs-reading-content h5,
.alf-docs-reading-content h6 {
    margin: var(--dc-heading-margin, 1.5em 0 0.5em);
    color: var(--dc-heading-color, var(--alf-heading));
    font-weight: var(--alf-font-semibold);
    line-height: var(--alf-leading-tight);
}

.alf-docs-reading-content h1 { font-size: 1.625rem; }
.alf-docs-reading-content h2 { font-size: 1.375rem; }
.alf-docs-reading-content h3 { font-size: 1.125rem; }
.alf-docs-reading-content h4 { font-size: 1rem; }
.alf-docs-reading-content h5 { font-size: 0.9375rem; }
.alf-docs-reading-content h6 { font-size: 0.875rem; color: var(--dc-muted-color, var(--alf-muted)); }

.alf-docs-reading-content p {
    margin: 0 0 var(--dc-spacing, var(--alf-space-lg));
}

.alf-docs-reading-content p:last-child {
    margin-bottom: 0;
}

.alf-docs-reading-content a {
    color: var(--dc-link-color, var(--alf-primary-strong));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alf-docs-reading-content a:hover {
    opacity: 0.85;
}

.alf-docs-reading-content ul,
.alf-docs-reading-content ol {
    margin: 0 0 var(--dc-spacing, var(--alf-space-lg));
    padding-left: 1.5em;
}

.alf-docs-reading-content li {
    margin-bottom: 0.25em;
}

.alf-docs-reading-content li:last-child {
    margin-bottom: 0;
}

.alf-docs-reading-content ul ul,
.alf-docs-reading-content ol ol,
.alf-docs-reading-content ul ol,
.alf-docs-reading-content ol ul {
    margin-bottom: 0;
    margin-top: 0.25em;
}

.alf-docs-reading-content blockquote {
    margin: 0 0 var(--dc-spacing, var(--alf-space-lg));
    padding: var(--alf-space-sm) var(--alf-space-md);
    border-left: 3px solid var(--dc-blockquote-border, var(--alf-primary));
    background: var(--dc-blockquote-bg, var(--alf-surface-primary-soft));
    border-radius: 0 var(--alf-radius-sm) var(--alf-radius-sm) 0;
}

.alf-docs-reading-content blockquote p:last-child {
    margin-bottom: 0;
}

.alf-docs-reading-content code {
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--dc-code-bg, var(--alf-surface-muted));
    color: var(--dc-code-color, var(--alf-text));
    font-size: 0.85em;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

.alf-docs-reading-content pre {
    margin: 0 0 var(--dc-spacing, var(--alf-space-lg));
    padding: var(--alf-space-md);
    border: 1px solid var(--dc-border-color, var(--alf-border));
    border-radius: var(--alf-radius-sm);
    background: var(--dc-code-bg, var(--alf-surface-muted));
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.alf-docs-reading-content pre code {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: inherit;
}

.alf-docs-reading-content table {
    width: 100%;
    margin: 0 0 var(--dc-spacing, var(--alf-space-lg));
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
}

@media (min-width: 768px) {
    .alf-docs-reading-content table {
        display: table;
    }
}

.alf-docs-reading-content th,
.alf-docs-reading-content td {
    padding: 8px 10px;
    border: 1px solid var(--dc-table-border, var(--alf-border));
    text-align: left;
}

.alf-docs-reading-content th {
    background: var(--dc-table-header-bg, var(--alf-surface-subtle));
    font-weight: var(--alf-font-semibold);
}

.alf-docs-reading-content hr {
    margin: var(--alf-space-xl) 0;
    border: none;
    border-top: 1px solid var(--dc-hr-border, var(--alf-border));
}

.alf-docs-reading-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--alf-radius-sm);
    margin: var(--dc-spacing, var(--alf-space-lg)) 0;
}

.alf-docs-reading-content ul.task-list {
    list-style: none;
    padding-left: 0;
}

.alf-docs-reading-content .task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.alf-docs-reading-content .task-list-item input[type="checkbox"] {
    margin-top: 0.3em;
    accent-color: var(--dc-task-checked-color, var(--alf-success));
}

.alf-docs-reading-content .task-list-item input[type="checkbox"]:checked + p {
    text-decoration: line-through;
    color: var(--dc-muted-color, var(--alf-muted));
}

.alf-docs-reading-content .task-list-item p {
    margin: 0;
}

/* ── Reading Progress ────────────────────────── */

.alf-docs-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: var(--alf-z-drawer, 50);
}

.alf-docs-reading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--alf-primary);
    transition: width 0.1s ease-out;
    border-radius: 0 2px 2px 0;
}

/* ── Sidebar ─────────────────────────────────── */

.alf-docs-reading-sidebar {
    display: grid;
    gap: var(--alf-space-lg);
}

.alf-docs-sidebar-section {
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    padding: var(--alf-space-md);
    background: var(--alf-surface);
}

.alf-docs-sidebar-section-title {
    margin: 0 0 var(--alf-space-sm);
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    color: var(--alf-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alf-docs-index ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.alf-docs-index li {
    margin-bottom: 4px;
}

.alf-docs-index li:last-child {
    margin-bottom: 0;
}

.alf-docs-index a {
    font-size: var(--alf-font-sm);
    color: var(--alf-primary);
    text-decoration: none;
    line-height: var(--alf-leading-normal);
}

.alf-docs-index a:hover {
    text-decoration: underline;
}

/* ── Responsividade ──────────────────────────── */

@media (max-width: 900px) {
    .alf-docs-reading-container {
        grid-template-columns: 1fr;
    }

    .alf-docs-reading-sidebar {
        order: -1;
    }

    .alf-docs-reading-header h1 {
        font-size: 1.375rem;
    }

    .alf-docs-reading-header-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--alf-space-sm);
    }
}

@media (max-width: 600px) {
    .alf-docs-reading {
        padding: 0;
    }

    .alf-docs-reading-header h1 {
        font-size: 1.25rem;
    }

    .alf-docs-breadcrumb ol {
        font-size: var(--alf-text-xs);
    }

    .alf-docs-reading-sidebar {
        order: -1;
    }
}

/* ── Desktop: sticky sidebar ─────────────────── */

@media (min-width: 901px) {
    .alf-docs-reading-sidebar {
        position: sticky;
        top: calc(var(--alf-topbar-height, 52px) + var(--alf-space-md));
    }
}

/* ═══════════════════════════════════════════
   Alfredo Docs Experience — Sprint 2
   Knowledge Experience
   ═══════════════════════════════════════════ */

/* ── Knowledge Section ───────────────────────── */

.alf-docs-knowledge-sections {
    margin-top: var(--alf-space-2xl);
    padding-top: var(--alf-space-xl);
    border-top: 1px solid var(--alf-border-muted);
    max-width: var(--dc-max-width, 760px);
}

.alf-docs-section {
    margin-bottom: var(--alf-space-xl);
}

.alf-docs-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-md);
}

.alf-docs-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface-muted);
    flex-shrink: 0;
}

.alf-docs-section-icon .alf-icon {
    width: 16px;
    height: 16px;
    color: var(--alf-primary);
}

.alf-docs-section-title {
    margin: 0;
    font-size: var(--alf-text-md);
    font-weight: var(--alf-font-semibold);
    color: var(--alf-heading);
}

.alf-docs-section-description {
    margin: 2px 0 0;
    font-size: var(--alf-font-sm);
    color: var(--alf-muted);
}

.alf-docs-section-action {
    margin-left: auto;
}

/* ── Empty State ──────────────────────────────── */

.alf-docs-empty {
    padding: var(--alf-space-lg);
    border: 1px dashed var(--alf-border-muted);
    border-radius: var(--alf-radius);
    text-align: center;
}

.alf-docs-empty p {
    margin: 0;
    font-size: var(--alf-font-sm);
    color: var(--alf-muted);
}

.alf-docs-empty-compact {
    padding: var(--alf-space-md);
}

/* ── Document Context ─────────────────────────── */

.alf-docs-context {
    margin-bottom: var(--alf-space-lg);
}

.alf-docs-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--alf-space-sm);
    margin: 0;
}

.alf-docs-context-item {
    padding: var(--alf-space-sm) var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface-subtle);
}

.alf-docs-context-item dt {
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.alf-docs-context-item dd {
    margin: 0;
    font-size: var(--alf-font-sm);
    color: var(--alf-heading);
    font-weight: var(--alf-font-medium);
}

/* ── Document List / Cards ────────────────────── */

.alf-docs-document-list {
    display: grid;
    gap: var(--alf-space-sm);
}

.alf-docs-document-card {
    display: flex;
    align-items: flex-start;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-sm) var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-sm);
    text-decoration: none;
    transition: border-color var(--alf-transition-fast);
}

.alf-docs-document-card:hover {
    border-color: var(--alf-border);
    background: var(--alf-surface-subtle);
}

.alf-docs-document-card-body {
    flex: 1;
    min-width: 0;
}

.alf-docs-document-card-title {
    display: block;
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    color: var(--alf-heading);
    margin-bottom: 4px;
    line-height: var(--alf-leading-normal);
}

.alf-docs-document-card:hover .alf-docs-document-card-title {
    color: var(--alf-primary);
}

.alf-docs-document-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
}

.alf-docs-document-card-notes {
    margin: 4px 0 0;
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
    font-style: italic;
}

.alf-docs-relationship-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--alf-surface-muted);
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
    text-transform: lowercase;
}

.alf-docs-reference-external .alf-docs-document-card-title::after {
    content: ' ↗';
    font-size: 0.75em;
    opacity: 0.6;
}

.alf-docs-external-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 2px;
}

.alf-docs-external-icon .alf-icon {
    width: 14px;
    height: 14px;
    color: var(--alf-muted);
}

/* ── Sidebar Navigation ───────────────────────── */

.alf-docs-sidebar-nav {
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius);
    padding: var(--alf-space-md);
    background: var(--alf-surface);
}

.alf-docs-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.alf-docs-sidebar-nav li {
    margin-bottom: 4px;
}

.alf-docs-sidebar-nav li:last-child {
    margin-bottom: 0;
}

.alf-docs-sidebar-nav a {
    font-size: var(--alf-font-sm);
    color: var(--alf-primary);
    text-decoration: none;
    line-height: var(--alf-leading-normal);
}

.alf-docs-sidebar-nav a:hover {
    text-decoration: underline;
}

/* ── Responsividade ───────────────────────────── */

@media (max-width: 900px) {
    .alf-docs-knowledge-sections {
        margin-top: var(--alf-space-xl);
    }

    .alf-docs-context-grid {
        grid-template-columns: 1fr 1fr;
    }

    .alf-docs-sidebar-nav {
        display: none;
    }
}

@media (max-width: 600px) {
    .alf-docs-context-grid {
        grid-template-columns: 1fr;
    }

    .alf-docs-document-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
}

/* ═══════════════════════════════════════════
   Alfredo Docs Experience — Sprint 3
   AI Actions Experience
   ═══════════════════════════════════════════ */

.alf-docs-ai-sections {
    margin-top: var(--alf-space-2xl);
    padding-top: var(--alf-space-xl);
    border-top: 1px solid var(--alf-border-muted);
    max-width: var(--dc-max-width, 760px);
}

.alf-docs-ai-actions {
    margin-bottom: var(--alf-space-xl);
}

.alf-docs-ai-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--alf-space-sm);
    margin-top: var(--alf-space-md);
}

.alf-docs-ai-action-button {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-sm) var(--alf-space-md);
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface);
    cursor: pointer;
    transition: border-color var(--alf-transition-fast), background var(--alf-transition-fast);
    font: inherit;
    text-align: left;
    min-height: 44px;
}

.alf-docs-ai-action-button:hover {
    border-color: var(--alf-primary);
    background: var(--alf-surface-primary-soft);
}

.alf-docs-ai-action-button:disabled,
.alf-docs-ai-action-button.is-loading {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.alf-docs-ai-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface-muted);
    flex-shrink: 0;
}

.alf-docs-ai-action-icon .alf-icon {
    width: 16px;
    height: 16px;
    color: var(--alf-primary);
}

.alf-docs-ai-action-label {
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-medium);
    color: var(--alf-heading);
    line-height: var(--alf-leading-normal);
}

/* ── AI Actions Result ───────────────────────── */

.alf-docs-ai-results {
    display: grid;
    gap: var(--alf-space-md);
    margin-top: var(--alf-space-md);
}

.alf-docs-ai-result {
    border: 1px solid var(--alf-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    overflow: hidden;
}

.alf-docs-ai-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-md);
    border-bottom: 1px solid var(--alf-border-muted);
    background: var(--alf-surface-subtle);
}

.alf-docs-ai-result-title {
    margin: 0;
    font-size: var(--alf-font-sm);
    font-weight: var(--alf-font-semibold);
    color: var(--alf-heading);
}

.alf-docs-ai-result-time {
    margin: 2px 0 0;
    font-size: var(--alf-font-xs);
    color: var(--alf-muted);
}

.alf-docs-ai-result-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.alf-docs-ai-result-copy,
.alf-docs-ai-result-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--alf-border-muted);
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--alf-muted);
    transition: border-color var(--alf-transition-fast), color var(--alf-transition-fast);
}

.alf-docs-ai-result-copy:hover,
.alf-docs-ai-result-close:hover {
    border-color: var(--alf-border);
    color: var(--alf-text);
}

.alf-docs-ai-result-content {
    padding: var(--alf-space-md);
    font-size: var(--alf-font-sm);
    line-height: var(--alf-leading-relaxed);
    color: var(--alf-text);
    max-height: 400px;
    overflow-y: auto;
}

.alf-docs-ai-result-content pre {
    margin: 0;
    font-size: var(--alf-font-xs);
    line-height: var(--alf-leading-normal);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── AI Loading ──────────────────────────────── */

.alf-docs-ai-loading {
    display: flex;
    align-items: center;
    gap: var(--alf-space-sm);
    padding: var(--alf-space-lg);
    color: var(--alf-muted);
    font-size: var(--alf-font-sm);
}

.alf-docs-ai-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--alf-border-muted);
    border-top-color: var(--alf-primary);
    border-radius: 50%;
    animation: alf-spin 0.6s linear infinite;
}

@keyframes alf-spin {
    to { transform: rotate(360deg); }
}

/* ── AI Error ────────────────────────────────── */

.alf-docs-ai-error {
    padding: var(--alf-space-sm) var(--alf-space-md);
    border: 1px solid var(--alf-danger);
    border-radius: var(--alf-radius-sm);
    background: var(--alf-surface);
    color: var(--alf-danger);
    font-size: var(--alf-font-sm);
    margin-top: var(--alf-space-md);
}

/* ── Responsividade ──────────────────────────── */

@media (max-width: 600px) {
    .alf-docs-ai-action-grid {
        grid-template-columns: 1fr 1fr;
    }

    .alf-docs-ai-result-content {
        max-height: 300px;
    }
}

/* ── Canvas Organizacional ─────────────────────── */

.alf-canvas-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--alf-surface, #f8fafc);
    border: 1px solid var(--alf-border, #e2e8f0);
    border-radius: var(--alf-radius-md, 8px);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.alf-canvas-container--fill {
    height: 100%;
    border: none;
    border-radius: 0;
}

.alf-canvas-container--fill .alf-canvas-controls {
    right: auto;
    left: 12px;
}

.alf-canvas-container--fill .alf-canvas-layout-indicator {
    right: auto;
    left: 12px;
}

.alf-canvas-container.grabbing {
    cursor: grabbing;
}

.alf-canvas-container.grabbing * {
    cursor: grabbing;
}

.alf-canvas-svg {
    display: block;
    min-height: 100%;
    cursor: grab;
}

.alf-canvas-svg:active {
    cursor: grabbing;
}

.alf-canvas-node {
    cursor: pointer;
    transition: stroke 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
}

.alf-canvas-node-group:hover .alf-canvas-node-card {
    stroke: var(--alf-primary, #4a6cf7);
    stroke-width: 1.5;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
}

.alf-canvas-node-selected .alf-canvas-node {
    stroke: #f59e0b;
    stroke-width: 4;
    filter: brightness(1.25);
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.alf-canvas-node-label {
    pointer-events: none;
    user-select: none;
}

.alf-canvas-node-group {
    cursor: move;
}

.alf-canvas-node-menu-hit {
    cursor: pointer;
}

.alf-canvas-node-menu-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--alf-z-dropdown, 40);
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg, var(--alf-shadow));
}

.alf-canvas-node-menu-dropdown[hidden] {
    display: none;
}

.alf-canvas-node-port-hit {
    cursor: crosshair;
}

.alf-canvas-connect-line {
    stroke: var(--alf-primary, #4a6cf7);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    fill: none;
    pointer-events: none;
}

.alf-canvas-connect-popover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--alf-z-dropdown, 40);
    width: min(260px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--alf-card-border);
    border-radius: var(--alf-radius);
    background: var(--alf-surface);
    box-shadow: var(--alf-shadow-lg, var(--alf-shadow));
}

.alf-canvas-connect-popover[hidden] {
    display: none;
}

.alf-canvas-connect-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--alf-space-sm);
    margin-bottom: var(--alf-space-sm);
}

.alf-canvas-connect-popover-header strong {
    font-size: var(--alf-font-sm);
    line-height: 1.4;
}

.alf-canvas-node-group.dragging .alf-canvas-node {
    opacity: 0.8;
    stroke: #6366f1;
    stroke-dasharray: 4 3;
    transition: none;
}

.alf-canvas-layout-indicator {
    position: absolute;
    bottom: 56px;
    right: 12px;
    font-size: 12px;
    color: var(--alf-muted, #94a3b8);
    background: var(--alf-surface, #ffffff);
    padding: 4px 10px;
    border-radius: var(--alf-radius-sm, 6px);
    border: 1px solid var(--alf-border, #e2e8f0);
    z-index: 40;
    pointer-events: none;
    user-select: none;
}

.alf-canvas-edge {
    stroke-linecap: round;
    cursor: pointer;
    transition: stroke-width 0.15s ease, stroke-opacity 0.15s ease;
}

.alf-canvas-tooltip {
    position: fixed;
    background: var(--alf-primary-soft, #f1eeff);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: #1e293b;
    padding: 8px 12px;
    border-radius: var(--alf-radius-sm, 6px);
    font-size: var(--alf-font-sm, 13px);
    line-height: 1.5;
    pointer-events: none;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-width: 200px;
    white-space: normal;
}

.alf-canvas-tooltip strong {
    display: block;
    font-size: var(--alf-font-md, 14px);
    margin-bottom: 4px;
    color: #1e293b;
}

.alf-canvas-tooltip span {
    color: #475569;
}

.alf-canvas-empty,
.alf-canvas-error {
    padding: 48px 24px;
    text-align: center;
    color: var(--alf-muted, #94a3b8);
    font-size: var(--alf-font-lg, 16px);
}

.alf-canvas-error {
    color: var(--alf-danger, #ef4444);
}

.alf-canvas-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 50;
    background: var(--alf-surface, #ffffff);
    border: 1px solid var(--alf-border, #e2e8f0);
    border-radius: var(--alf-radius-md, 8px);
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.alf-canvas-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--alf-radius-sm, 6px);
    font-size: 16px;
    line-height: 1;
    color: var(--alf-foreground, #1f2937);
    cursor: pointer;
    transition: background 0.15s ease;
}

.alf-canvas-ctrl-btn:hover {
    background: var(--alf-surface-hover, #f1f5f9);
}

.alf-canvas-ctrl-btn:focus-visible {
    outline: 2px solid var(--alf-primary, #4a6cf7);
    outline-offset: -2px;
}

.alf-canvas-ctrl-btn[hidden] {
    display: none;
}

.alf-canvas-save-btn {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--alf-primary, #4a6cf7);
}

.alf-canvas-save-btn:hover {
    background: var(--alf-primary, #4a6cf7);
    opacity: 0.9;
}

.alf-canvas-save-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ── Operational Panel ── */

.alf-operational-panel-wrapper {
    position: relative;
}

.alf-operational-panel-overlay {
    position: fixed;
    inset: 0;
    background: var(--alf-drawer-backdrop, rgba(0,0,0,0.32));
    z-index: calc(var(--alf-z-drawer, 50) - 1);
}

.alf-operational-panel-overlay[hidden] {
    display: none;
}

.alf-operational-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    min-width: 360px;
    max-width: 560px;
    background: var(--alf-surface, #fff);
    border-left: 1px solid var(--alf-border, #e2e8f0);
    z-index: var(--alf-z-drawer, 50);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.alf-operational-panel[hidden] {
    display: none;
}

.alf-operational-panel-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.alf-operational-panel-loading,
.alf-operational-panel-error {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--alf-muted, #94a3b8);
}

.alf-operational-panel-loading[hidden],
.alf-operational-panel-error[hidden] {
    display: none;
}

.alf-operational-panel-error {
    color: var(--alf-danger, #ef4444);
}

.alf-operational-panel-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.alf-operational-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--alf-border, #e2e8f0);
    gap: 12px;
}

.alf-operational-panel-header-info {
    flex: 1;
    min-width: 0;
}

.alf-operational-panel-type {
    display: inline-block;
    font-size: var(--alf-font-xs, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--alf-muted, #94a3b8);
    margin-bottom: 4px;
}

.alf-operational-panel-title {
    font-size: var(--alf-font-xl, 20px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--alf-foreground, #0f172a);
    word-break: break-word;
}

.alf-operational-panel-status {
    display: inline-block;
    font-size: var(--alf-font-xs, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--alf-surface-alt, #f1f5f9);
    color: var(--alf-muted, #64748b);
}

.alf-operational-panel-status.status-active {
    background: #dcfce7;
    color: #166534;
}

.alf-operational-panel-status.status-archived {
    background: #f1f5f9;
    color: #64748b;
}

.alf-operational-panel-content {
    flex: 1;
    padding: 16px 24px;
    overflow-y: auto;
}

.alf-operational-panel-section {
    margin-bottom: 20px;
}

.alf-operational-panel-section-title {
    font-size: var(--alf-font-sm, 13px);
    font-weight: 600;
    color: var(--alf-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}

.alf-operational-panel-text {
    font-size: var(--alf-font-base, 14px);
    line-height: 1.6;
    color: var(--alf-foreground, #0f172a);
    margin: 0;
    white-space: pre-wrap;
}

.alf-operational-panel-info-list {
    margin: 0;
    padding: 0;
}

.alf-operational-panel-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--alf-border-subtle, #f1f5f9);
    gap: 8px;
}

.alf-operational-panel-info-row:last-child {
    border-bottom: none;
}

.alf-operational-panel-info-row dt {
    font-size: var(--alf-font-sm, 13px);
    color: var(--alf-muted, #64748b);
    flex-shrink: 0;
}

.alf-operational-panel-info-row dd {
    font-size: var(--alf-font-sm, 13px);
    color: var(--alf-foreground, #0f172a);
    text-align: right;
    word-break: break-word;
}

.alf-operational-panel-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--alf-border, #e2e8f0);
}

/* ── Block Sections ── */

.alf-operational-panel-block {
    border: 1px solid var(--alf-border, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.alf-operational-panel-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.alf-operational-panel-block-header .alf-operational-panel-section-title {
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--alf-font-base, 14px);
    color: var(--alf-foreground, #0f172a);
}

.alf-operational-panel-block-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--alf-surface-alt, #f1f5f9);
    font-size: var(--alf-font-xs, 11px);
    font-weight: 700;
    color: var(--alf-muted, #64748b);
}

.alf-operational-panel-block-summary {
    font-size: var(--alf-font-sm, 13px);
    color: var(--alf-muted, #64748b);
    margin: 0 0 12px;
}

.alf-operational-panel-block-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alf-operational-panel-block-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    gap: 8px;
}

.alf-operational-panel-block-item-label {
    font-size: var(--alf-font-sm, 13px);
    color: var(--alf-muted, #64748b);
}

.alf-operational-panel-block-item-value {
    font-size: var(--alf-font-sm, 13px);
    font-weight: 600;
    color: var(--alf-foreground, #0f172a);
    text-align: right;
    word-break: break-word;
}

.alf-operational-panel-block-link {
    display: inline-block;
    margin-top: 12px;
    font-size: var(--alf-font-sm, 13px);
    font-weight: 600;
    color: var(--alf-primary, #4a6cf7);
    text-decoration: none;
}

.alf-operational-panel-block-link:hover {
    text-decoration: underline;
}

/* ── Indicators ── */

.alf-operational-panel-indicators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.alf-operational-panel-indicator {
    background: var(--alf-neutral-canvas, #f6f8fa);
    border: 1px solid var(--alf-color-border, #0000001a);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.alf-operational-panel-indicator-value {
    font-size: var(--alf-font-2xl, 24px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--alf-color-foreground, #10100f);
}

.alf-operational-panel-indicator-label {
    font-size: var(--alf-font-xs, 11px);
    color: var(--alf-color-muted-foreground, #717182);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alf-operational-panel-indicator-description {
    font-size: var(--alf-font-xs, 11px);
    color: var(--alf-color-muted-foreground, #717182);
    margin-top: 4px;
}

.alf-operational-panel-indicator-link {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--alf-font-xs, 11px);
    font-weight: 600;
    color: var(--alf-primary, #4a6cf7);
    text-decoration: none;
}

.alf-operational-panel-indicator-link:hover {
    text-decoration: underline;
}

.alf-operational-panel-indicator.status-danger .alf-operational-panel-indicator-value {
    color: var(--alf-danger, #e53e3e);
}

.alf-operational-panel-indicator.status-warning .alf-operational-panel-indicator-value {
    color: var(--alf-warning, #d69e2e);
}

.alf-operational-panel-indicator.status-positive .alf-operational-panel-indicator-value {
    color: var(--alf-success, #38a169);
}

.alf-operational-panel-indicator.status-info .alf-operational-panel-indicator-value {
    color: var(--alf-primary, #4a6cf7);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .alf-operational-panel {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .alf-operational-panel {
        width: 50%;
        min-width: 320px;
        max-width: 440px;
    }
}

/* ── Section item status ── */

.alf-operational-panel-block-item[data-status="danger"] .alf-operational-panel-block-item-value {
    color: var(--alf-danger, #e53e3e);
}

.alf-operational-panel-block-item[data-status="warning"] .alf-operational-panel-block-item-value {
    color: var(--alf-warning, #d69e2e);
}

.alf-operational-panel-block-item[data-status="positive"] .alf-operational-panel-block-item-value {
    color: var(--alf-success, #38a169);
}

.alf-operational-panel-block-item[data-status="neutral"] .alf-operational-panel-block-item-value {
    color: var(--alf-muted, #64748b);
}

/* ─────────────────────────────────────────────────────────────────────────────
   OA-UX-01 — Componentes de conteúdo autenticado (botões, badges, campos,
   tabelas, cards, estado vazio, filtros, mensagens).
   Usa exclusivamente os tokens já definidos em :root e [data-theme]. Não
   introduz framework visual novo nem toca no Platform Shell.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Botões ───────────────────────────────────────────────────────────────────
   Classe base .alf-btn (usada pelas views) + variantes de hierarquia. Cobre
   links (<a>) e <button>; estados hover/focus/disabled/loading. */

.alf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--alf-radius, 10px);
    background: var(--alf-primary, #6d5dfb);
    color: var(--alf-text-inverse, #fff);
    font: inherit;
    font-size: var(--alf-font-sm, 0.8125rem);
    font-weight: var(--alf-font-semibold, 600);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--alf-transition-fast, 0.15s), border-color var(--alf-transition-fast, 0.15s),
        color var(--alf-transition-fast, 0.15s), box-shadow var(--alf-transition-fast, 0.15s);
}

.alf-btn:hover {
    background: var(--alf-primary-strong, #302a63);
    border-color: var(--alf-primary-strong, #302a63);
    color: var(--alf-text-inverse, #fff);
    text-decoration: none;
}

.alf-btn:focus-visible {
    outline: 2px solid var(--alf-focus-ring, rgba(37, 99, 235, 0.14));
    outline-offset: 2px;
}

.alf-btn:disabled,
.alf-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primário: ação principal da página. Para <a> sem :visited corromper. */
.alf-btn.alf-btn-primary,
a.alf-btn-primary,
button.alf-btn-primary {
    background: var(--alf-primary, #6d5dfb);
    border-color: var(--alf-primary, #6d5dfb);
    color: var(--alf-text-inverse, #fff);
}

.alf-btn-primary:hover,
a.alf-btn-primary:hover,
button.alf-btn-primary:hover {
    background: var(--alf-primary-strong, #302a63);
    border-color: var(--alf-primary-strong, #302a63);
    color: var(--alf-text-inverse, #fff);
}

/* Secundário: realce suave, usado quando há duas ações. */
.alf-btn-secondary,
a.alf-btn-secondary,
button.alf-btn-secondary {
    background: var(--alf-primary-soft, #f1eeff);
    border-color: transparent;
    color: var(--alf-primary-strong, #302a63);
}

.alf-btn-secondary:hover {
    background: var(--alf-alpha-primary-20, rgba(37, 99, 235, 0.2));
    color: var(--alf-primary-strong, #302a63);
}

/* Contorno/neutro: ação de menor ênfase (voltar, cancelar, filtrar). */
.alf-btn-outline,
a.alf-btn-outline,
button.alf-btn-outline {
    background: var(--alf-surface, #fff);
    border-color: var(--alf-border, rgba(0, 0, 0, 0.1));
    color: var(--alf-text, #1f2937);
}

.alf-btn-outline:hover,
a.alf-btn-outline:hover,
button.alf-btn-outline:hover {
    background: var(--alf-surface-muted, #eef2f6);
    border-color: var(--alf-border, rgba(0, 0, 0, 0.12));
    color: var(--alf-text, #1f2937);
    text-decoration: none;
}

/* Perigo: ações destrutivas (ex.: revogar). */
.alf-btn-danger,
a.alf-btn-danger,
button.alf-btn-danger {
    background: var(--alf-surface, #fff);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--alf-danger, #dc2626);
}

.alf-btn-danger:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--alf-danger, #dc2626);
    color: var(--alf-danger-strong, #b42318);
}

/* Fantasma: ainda mais silencioso, puro texto com hover suave. */
.alf-btn-ghost,
a.alf-btn-ghost,
button.alf-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--alf-primary-strong, #302a63);
}

.alf-btn-ghost:hover {
    background: var(--alf-surface-muted, #eef2f6);
    color: var(--alf-primary-strong, #302a63);
    text-decoration: none;
}

/* Compacto: ações de tabela / linhas. */
.alf-btn-sm {
    min-height: 30px;
    padding: 4px 10px;
    font-size: var(--alf-font-xs, 0.75rem);
}

/* ── Badges / status ─────────────────────────────────────────────────────────
   Classe base .alf-badge (usada pelas views) + variantes de cor. Usa os
   tokens --alf-badge-* / --alf-status-* já existentes. */

.alf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--alf-status-neutral-background, #eef2f6);
    color: var(--alf-status-neutral-text, #64748b);
    font-size: var(--alf-font-xs, 0.75rem);
    font-weight: var(--alf-font-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.alf-badge--success {
    background: var(--alf-badge-success-background, rgba(22, 163, 74, 0.1));
    color: var(--alf-success-strong, #067647);
}

.alf-badge--warning {
    background: var(--alf-badge-warning-background, rgba(245, 158, 11, 0.12));
    color: var(--alf-warning-strong, #b45309);
}

.alf-badge--danger {
    background: rgba(220, 38, 38, 0.1);
    color: var(--alf-danger-strong, #b42318);
}

.alf-badge--info {
    background: var(--alf-badge-info-background, rgba(37, 99, 235, 0.08));
    color: var(--alf-primary-strong, #302a63);
}

.alf-badge--neutral {
    background: var(--alf-status-neutral-background, #eef2f6);
    color: var(--alf-status-neutral-text, #64748b);
}

/* ── Campos de formulário ────────────────────────────────────────────────────
   Padrão consistente de label + input/select/textarea com estados de foco,
   erro, disabled e helper text. Targets .alf-input/.alf-select/.alf-textarea
   dentro de .alf-form-group (convenção usada pelas views). */

.alf-form-group {
    display: grid;
    gap: 6px;
}

.alf-label {
    color: var(--alf-label-color, #717182);
    font-size: var(--alf-font-xs, 0.75rem);
    font-weight: var(--alf-font-semibold, 600);
    line-height: 1.2;
}

.alf-input,
.alf-select,
.alf-textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--alf-border-muted, rgba(0, 0, 0, 0.1));
    border-radius: var(--alf-radius, 10px);
    background: var(--alf-surface, #fff);
    color: var(--alf-text, #1f2937);
    font: inherit;
    font-size: var(--alf-font-sm, 0.8125rem);
    line-height: 1.4;
    transition: border-color var(--alf-transition-fast, 0.15s), box-shadow var(--alf-transition-fast, 0.15s);
}

.alf-input::placeholder,
.alf-textarea::placeholder {
    color: var(--alf-muted, #717182);
}

.alf-select {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256' fill='none' stroke='%2364748b' stroke-width='20' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M64 96l64 64 64-64'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.alf-textarea {
    min-height: 84px;
    resize: vertical;
}

/* Select compacto para ações inline em tabelas. */
.alf-select-sm {
    min-height: 30px;
    padding: 4px 30px 4px 8px;
    font-size: var(--alf-font-xs, 0.75rem);
}

.alf-input:focus,
.alf-select:focus,
.alf-textarea:focus {
    outline: none;
    border-color: var(--alf-primary, #6d5dfb);
    box-shadow: 0 0 0 3px var(--alf-focus-ring, rgba(37, 99, 235, 0.14));
}

.alf-input:disabled,
.alf-select:disabled,
.alf-textarea:disabled {
    background: var(--alf-surface-muted, #eef2f6);
    color: var(--alf-muted, #717182);
    cursor: not-allowed;
    opacity: 1;
}

/* Campo com erro: usa a classe .is-invalid no elemento (checada nas views). */
.alf-input.is-invalid,
.alf-select.is-invalid,
.alf-textarea.is-invalid {
    border-color: var(--alf-danger, #dc2626);
}

.alf-input.is-invalid:focus,
.alf-select.is-invalid:focus,
.alf-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.alf-field-error {
    color: var(--alf-danger-strong, #b42318);
    font-size: var(--alf-font-xs, 0.75rem);
}

.alf-field-error,
.alf-field-error ~ .alf-muted-text {
    margin-top: 0;
    line-height: 1.4;
}

/* Inputs/selects soltos em barras de filtro (sem .alf-form-group ao redor). */
.alf-filter-bar input[type="text"],
.alf-filter-bar input[type="search"],
.alf-filter-bar input[type="email"],
.alf-filter-bar select {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--alf-border-muted, rgba(0, 0, 0, 0.1));
    border-radius: var(--alf-radius, 10px);
    background: var(--alf-surface, #fff);
    color: var(--alf-text, #1f2937);
    font: inherit;
    font-size: var(--alf-font-sm, 0.8125rem);
}

.alf-filter-bar input:focus,
.alf-filter-bar select:focus {
    outline: none;
    border-color: var(--alf-primary, #6d5dfb);
    box-shadow: 0 0 0 3px var(--alf-focus-ring, rgba(37, 99, 235, 0.14));
}

/* ── Cards / grid de aplicações ────────────────────────────────────────────── */

.alf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--alf-space-md, 10px);
}

.alf-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.alf-app-launch-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--alf-card-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--alf-radius-lg, 12px);
    background: var(--alf-surface, #fff);
    box-shadow: var(--alf-shadow, none);
    transition: border-color var(--alf-transition-fast, 0.15s), box-shadow var(--alf-transition-fast, 0.15s);
}

.alf-app-launch-card:hover {
    border-color: var(--alf-card-hover-border, rgba(0, 0, 0, 0.16));
    box-shadow: var(--alf-shadow-lg, 0 14px 36px rgba(15, 23, 42, 0.08));
}

.alf-app-launch-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.alf-app-launch-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.12);
    font-size: 1.4rem;
    line-height: 1;
}

.alf-app-launch-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--alf-heading, #10100f);
}

.alf-app-launch-desc {
    margin: 0;
    color: var(--alf-muted, #717182);
    font-size: 0.85rem;
    line-height: 1.5;
}

.alf-app-launch-actions {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--alf-border-light, rgba(0, 0, 0, 0.06));
}

.alf-app-launch-actions .alf-btn {
    width: 100%;
}

/* ── Estado vazio profissional ─────────────────────────────────────────────── */

.alf-empty-state-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
}

.alf-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--alf-surface-muted, #eef2f6);
    color: var(--alf-muted, #717182);
}

.alf-empty-state-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--alf-heading, #10100f);
}

.alf-empty-state-text {
    margin: 0;
    max-width: 420px;
    color: var(--alf-muted, #717182);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── Ferramenta de filtro reutilizável (.alf-filter-bar) ──────────────────── */

.alf-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.alf-filter-bar .alf-filter-clear {
    color: var(--alf-muted, #717182);
    font-size: var(--alf-font-xs, 0.75rem);
    text-decoration: underline;
}

.alf-section-subheading {
    margin: 16px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--alf-heading, #10100f);
}

.alf-form-sections {
    display: grid;
    gap: 10px;
}

.alf-invite-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alf-invite-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--alf-border-muted, rgba(0, 0, 0, 0.08));
    border-radius: var(--alf-radius, 10px);
    background: var(--alf-surface-subtle, #f8fafc);
}

.alf-profile-avatar {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #6d5dfb 0%, #302a63 100%);
}

.alf-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alf-profile-avatar span {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
}

.alf-input-file {
    padding: 6px 10px;
}

.alf-field-hint {
    font-size: 0.78rem;
}

.alf-filter-bar .alf-filter-clear:hover {
    color: var(--alf-primary-strong, #302a63);
}

/* ── Tabelas: refinamentos de header, hover, alinhamento e linhas ─────────── */

.alf-card .alf-table th {
    background: var(--alf-surface-subtle, #f8fafc);
}

.alf-table tbody tr {
    transition: background var(--alf-transition-fast, 0.15s);
}

.alf-table tbody tr:hover {
    background: var(--alf-surface-subtle, #f8fafc);
}

.alf-table tbody td {
    vertical-align: top;
}

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

.alf-table-row-empty td {
    padding: 32px 16px !important;
    text-align: center;
    color: var(--alf-muted, #717182);
}

/* Mensagens de sucesso/erro inline (além dos toasts do shell) */
.alf-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--alf-border-muted, rgba(0, 0, 0, 0.08));
    border-left: 3px solid var(--alf-info, #2ba7b3);
    border-radius: var(--alf-radius, 10px);
    background: var(--alf-surface, #fff);
    color: var(--alf-text, #1f2937);
    font-size: 0.85rem;
    line-height: 1.45;
}

.alf-message--success {
    border-left-color: var(--alf-success, #16a34a);
    background: var(--alf-alert-success-background, rgba(22, 163, 74, 0.08));
    color: var(--alf-success-strong, #067647);
}

.alf-message--error {
    border-left-color: var(--alf-danger, #dc2626);
    background: rgba(220, 38, 38, 0.06);
    color: var(--alf-danger-strong, #b42318);
}

/* Cabeçalhos de seção de formulário */
.alf-form-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--alf-heading, #10100f);
}

.alf-form-section-hint {
    margin: 0 0 16px;
    color: var(--alf-muted, #717182);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ── Utilitários de layout para páginas autenticadas ──────────────────────── */

.alf-layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.alf-secret-block {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--alf-border-muted, rgba(0, 0, 0, 0.1));
    border-radius: var(--alf-radius, 10px);
    background: var(--alf-surface-subtle, #f8fafc);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    word-break: break-word;
}

.alf-card-heading {
    margin: 0 0 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--alf-heading, #10100f);
}

.alf-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.alf-count {
    font-weight: 600;
    color: var(--alf-primary, #6d5dfb);
}

@media (max-width: 860px) {
    .alf-layout-2col {
        grid-template-columns: 1fr;
    }
}

/* Cabeçalho de card com título + badges e ícone de aplicação. */
.alf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--alf-border-light, rgba(0, 0, 0, 0.06));
}

.alf-card-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.alf-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 8px;
    background: rgba(6, 182, 212, 0.12);
    font-size: 1.5rem;
    line-height: 1;
}

.alf-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .alf-form-grid {
        grid-template-columns: 1fr;
    }
}