/* ===== CSS Variables ===== */
:root, .theme-dark {
    --an-bg:         #0f172a;
    --an-surface:    #1e293b;
    --an-surface2:   #27303f;
    --an-border:     #334155;
    --an-text:       #f1f5f9;
    --an-text-muted: #94a3b8;
    --an-accent:     #3b82f6;
    --an-accent-h:   #2563eb;
    --an-accent-text: #ffffff;
    --an-success:    #22c55e;
    --an-warning:    #f59e0b;
    --an-danger:     #ef4444;
    --an-info:       #38bdf8;
    --an-accent2:    #8b5cf6;
    --an-radius:     0.5rem;
    --an-sidebar-w:  260px;
    --an-sidebar-collapsed: 56px;
    --an-bar-h:      56px;
}

/* RESPONSIVE FIX: reduce sidebar at 1200px to give content more room */
@media (max-width: 1200px) {
    :root { --an-sidebar-w: 220px; }
}

.theme-light {
    --an-bg:         #f1f5f9;
    --an-surface:    #ffffff;
    --an-surface2:   #f8fafc;
    --an-border:     #e2e8f0;
    --an-text:       #0f172a;
    --an-text-muted: #64748b;
    --an-accent-text: #ffffff;
    --an-success:    #16a34a;
    --an-warning:    #d97706;
    --an-danger:     #dc2626;
    --an-info:       #0284c7;
    --an-accent2:    #7c3aed;
    --an-radius:     0.5rem;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* ===== Global Focus Reset ===== */
/* Usuń outline dla kliknięć myszą — zachowaj dla klawiatury (dostępność) */
*:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
*:focus-visible { outline: 2px solid var(--an-accent); outline-offset: 2px; }

body {
    background: var(--an-bg);
    color: var(--an-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Shell — flex container ===== */
.an-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--an-bg);
    color: var(--an-text);
}

/* ===== Sidebar ===== */
.an-sidebar {
    width: var(--an-sidebar-w);
    min-width: var(--an-sidebar-w);
    height: 100vh;
    background: var(--an-surface);
    border-right: 1px solid var(--an-border);
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease, min-width 0.25s ease;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 100;
}

.an-sidebar.collapsed {
    width: var(--an-sidebar-collapsed);
    min-width: var(--an-sidebar-collapsed);
}

/* Sidebar header / logo */
.an-sidebar-header {
    height: var(--an-bar-h);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--an-border);
    flex-shrink: 0;
    overflow: hidden;
}

.an-logo-icon {
    width: 28px;
    height: 28px;
    background: var(--an-accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Icon-only logo: hidden when expanded, shown when collapsed */
.an-logo-icon-img {
    flex-shrink: 0;
    display: none;
}

.an-sidebar.collapsed .an-logo-icon-img {
    display: block;
}

.an-logo-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--an-text);
    white-space: nowrap;
    overflow: hidden;
}

/* Navigation */
.an-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
    display: flex;
    flex-direction: column;
}

.an-nav-spacer { flex: 1; }

.an-nav-divider {
    height: 1px;
    background: var(--an-border);
    margin: 0.5rem 0.75rem;
}

.an-nav-section-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--an-text-muted);
    padding: 0.75rem 1.25rem 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
}

.an-sidebar.collapsed .an-nav-section-label,
.an-sidebar.collapsed .an-logo-text {
    opacity: 0;
    pointer-events: none;
}

/* Nav items */
.an-nav-item { display: block; }

.an-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    color: var(--an-text-muted);
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
}

.an-nav-link:hover {
    background: var(--an-surface2);
    color: var(--an-text);
}

.an-nav-link.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--an-accent);
    border-left-color: var(--an-accent);
}

.an-nav-icon {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.an-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
}

.an-sidebar.collapsed .an-nav-label {
    opacity: 0;
    width: 0;
}

/* ===== Main area ===== */
.an-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ===== AppBar ===== */
.an-appbar {
    height: var(--an-bar-h);
    min-height: var(--an-bar-h);
    background: var(--an-surface);
    border-bottom: 1px solid var(--an-border);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.5rem;
    flex-shrink: 0;
    z-index: 99;
}

.an-appbar-spacer { flex: 1; }

/* ===== Page content ===== */
.an-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    background: var(--an-bg);
}

/* ===== Pending approvals banner (Task143 — sticky, shows when count > 0) ===== */
.an-approval-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--an-warning, #f59e0b);
    color: #111;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--an-border);
    position: sticky;
    top: 0;
    z-index: 60;
    transition: background 0.15s ease;
}
.an-approval-banner:hover {
    background: var(--an-warning-hover, #d97706);
    color: #111;
    text-decoration: none;
}
.an-approval-banner i {
    font-size: 1.05rem;
}

/* ===== Buttons ===== */
.an-hamburger, .an-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--an-text-muted);
    font-size: 1.1rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.an-hamburger:hover, .an-icon-btn:hover {
    color: var(--an-text);
    background: var(--an-surface2);
}

/* User menu */
.an-user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--an-border);
    margin-left: 0.25rem;
}

.an-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--an-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.an-user-name {
    font-size: 0.8rem;
    color: var(--an-text-muted);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Page headers ===== */
.an-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--an-border);
}

.an-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--an-text);
}

/* ===== Badges ===== */
.an-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--an-surface2);
    color: var(--an-text-muted);
    white-space: nowrap;
}
.an-badge--admin     { background: rgba(239,68,68,0.15);  color: #f87171; }
.an-badge--leader    { background: rgba(245,158,11,0.15); color: #fbbf24; }
.an-badge--member    { background: rgba(34,197,94,0.15);  color: #4ade80; }
.an-badge--learner   { background: rgba(59,130,246,0.15); color: #60a5fa; }
.an-badge--candidate { background: var(--an-surface2);    color: var(--an-text-muted); }
.an-badge--status    { background: var(--an-surface2);    color: var(--an-text-muted); }
.an-badge--active    { background: rgba(34,197,94,0.15);  color: #4ade80; }
.an-badge--warning   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.an-badge--danger    { background: rgba(239,68,68,0.15);  color: #f87171; }
.an-badge--info      { background: rgba(59,130,246,0.15); color: #60a5fa; }
.an-badge--muted     { background: var(--an-surface2);    color: var(--an-text-muted); }

/* ===== Small buttons ===== */
.an-btn-sm {
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    border: 1px solid var(--an-border);
    border-radius: 0.25rem;
    background: var(--an-surface2);
    color: var(--an-text);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.an-btn-sm:hover { background: var(--an-accent); border-color: var(--an-accent); color: white; }
.an-btn-sm--danger:hover { background: #ef4444; border-color: #ef4444; color: white; }

/* ===== Modal ===== */
.an-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.an-modal {
    background: var(--an-surface);
    border-radius: 0.75rem;
    width: 100%; max-width: 500px;
    padding: 1.5rem;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border: 1px solid var(--an-border);
}
.an-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--an-border);
}
.an-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.an-modal-footer {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--an-border);
    display: flex; align-items: center; gap: 0.75rem;
}
.an-field-row {
    display: flex; gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
}
.an-field-row label {
    width: 140px; font-size: 0.82rem;
    color: var(--an-text-muted); flex-shrink: 0;
}

/* ===== Form card ===== */
.an-form-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 560px;
}

/* ===== Pagination ===== */
.an-pagination {
    display: flex; gap: 1rem; align-items: center;
    margin-top: 1rem; font-size: 0.82rem; color: var(--an-text-muted);
}
.an-pagination button {
    padding: 0.3rem 0.7rem;
    background: var(--an-surface2);
    border: 1px solid var(--an-border);
    border-radius: 0.375rem;
    color: var(--an-text);
    cursor: pointer;
    font-size: 0.82rem;
}
.an-pagination button:hover:not(:disabled) { background: var(--an-accent); color: white; border-color: var(--an-accent); }
.an-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Misc ===== */
.an-save-msg { font-size: 0.82rem; color: var(--an-text-muted); }
.an-loading { padding: 3rem; color: var(--an-text-muted); text-align: center; }
.an-text-muted { color: var(--an-text-muted); font-size: 0.82rem; }
.form-input-color { width: 3rem; height: 2rem; padding: 0; border: none; cursor: pointer; border-radius: 0.25rem; }

/* ===== Custom icons (brakujące w Syncfusion Bootstrap5) ===== */
/* Telegram - paper plane z Syncfusion font */
.e-telegram::before { content: '\e7d4'; font-family: 'e-icons'; }
/* Alternatywa jeśli powyższe nie działa: */
.e-send-icon::before { content: '\e712'; font-family: 'e-icons'; }

/* ===== Version badge ===== */
.an-version-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.5rem;
}
.an-tenant-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(59,130,246,0.15);
    color: var(--an-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.an-version-tag {
    font-size: 0.7rem;
    color: var(--an-text-muted);
    font-family: monospace;
}

@media (max-width: 768px) {
    .an-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 280px !important;
        min-width: 280px !important;
    }

    .an-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    }

    /* Show full labels when sidebar is open on mobile */
    .an-sidebar.open .an-nav-label { opacity: 1 !important; width: auto !important; }
    .an-sidebar.open .an-nav-section-label { opacity: 1 !important; pointer-events: auto !important; }
    .an-sidebar.open .an-logo-text { opacity: 1 !important; }
    .an-sidebar.open .an-logo-icon-img { display: none !important; }

    .an-hamburger { display: flex !important; }
    .an-user-name { display: none; }
    .an-appbar { padding: 0 0.75rem; gap: 0.35rem; }
    .an-content { padding: 1rem; }
}

/* Backdrop behind sidebar on mobile */
#an-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    backdrop-filter: blur(2px);
    transition: opacity 0.25s;
}

#an-sidebar-backdrop.an-sidebar-backdrop--visible {
    display: block;
}

@media (max-width: 480px) {
    .an-version-badge { display: none; }
    .an-lang-switcher { display: none; }
}

/* ===== Language Switcher ===== */
.an-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-right: 0.25rem;
}
.an-lang-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.2rem 0.3rem;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
    line-height: 1;
}
.an-lang-btn:hover { opacity: 0.8; }
.an-lang-btn.active {
    opacity: 1;
    border-color: var(--an-accent);
}

/* ===== KPI Grid ===== */
.an-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.an-kpi-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.an-kpi-card--accent { border-color: var(--an-accent); }
.an-kpi-card--green  { border-color: #4ade80; }

.an-kpi-icon { font-size: 1.5rem; color: var(--an-text-muted); }
.an-kpi-card--accent .an-kpi-icon { color: var(--an-accent); }
.an-kpi-card--green  .an-kpi-icon { color: #4ade80; }

.an-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--an-text);
    line-height: 1;
}

.an-kpi-label { font-size: 0.8rem; color: var(--an-text-muted); }

/* ===== Ref Banner ===== */
.an-ref-banner {
    background: var(--an-surface);
    border: 1px solid var(--an-accent);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.an-ref-banner-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--an-accent);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.an-ref-banner-url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    background: var(--an-bg);
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--an-border);
}

.an-ref-banner-url code {
    font-size: 0.82rem;
    color: var(--an-text);
    word-break: break-all;
    flex: 1;
}

/* ===== Section header ===== */
.an-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.an-section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* ===== Lead rows ===== */
.an-leads-list { display: flex; flex-direction: column; gap: 0.5rem; }

.an-lead-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.5rem;
    transition: border-color 0.15s;
}

.an-lead-row:hover { border-color: var(--an-accent); }

.an-lead-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--an-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}

.an-lead-avatar--sm { width: 30px; height: 30px; font-size: 0.65rem; }

.an-lead-info { flex: 1; min-width: 0; }
.an-lead-name { font-weight: 500; font-size: 0.875rem; }
.an-lead-email { font-size: 0.75rem; color: var(--an-text-muted); }

.an-lead-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

/* ===== Status filter tabs ===== */
.an-status-filter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.an-status-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--an-border);
    border-radius: 9999px;
    background: var(--an-surface);
    color: var(--an-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.an-status-tab:hover { border-color: var(--an-accent); color: var(--an-text); }
.an-status-tab.active { background: var(--an-accent); border-color: var(--an-accent); color: white; }

.an-status-count {
    background: rgba(255,255,255,0.2);
    border-radius: 9999px;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    min-width: 18px;
    text-align: center;
}

.an-status-tab:not(.active) .an-status-count {
    background: var(--an-surface2);
    color: var(--an-text-muted);
}

/* ===== Lead cell in grid ===== */
.an-lead-cell { display: flex; align-items: center; gap: 0.75rem; }

/* ===== Status badges ===== */
.an-badge--status-new      { background: rgba(148,163,184,0.15); color: #94a3b8; }
.an-badge--status-verified { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.an-badge--status-watching { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.an-badge--status-signed   { background: rgba(168,85,247,0.15);  color: #c084fc; }
.an-badge--status-learner  { background: rgba(34,197,94,0.15);   color: #4ade80; }
.an-badge--status-member   { background: rgba(16,185,129,0.15);  color: #34d399; }

/* ===== Empty state ===== */
.an-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--an-text-muted);
}

.an-text-danger { color: #f87171; }

/* ===== Test report (Task069) ===== */
.ob-test-report { margin-top:0.75rem; border:1px solid var(--an-border); border-radius:0.5rem; overflow:hidden; font-size:0.82rem; }
.ob-test-report-header { background:var(--an-bg-secondary); padding:0.5rem 0.75rem; font-weight:600; color:var(--an-text-muted); font-size:0.75rem; display:flex; align-items:center; gap:0.4rem; }
.ob-test-report-item { display:flex; align-items:flex-start; gap:0.5rem; padding:0.4rem 0.75rem; border-top:1px solid var(--an-border); }
.ob-test-report-item.ok i { color:var(--an-success); }
.ob-test-report-item.warn i { color:var(--an-warning); }
.ob-test-report-label { font-weight:500; flex-shrink:0; }
.ob-test-report-detail { color:var(--an-text-muted); font-size:0.75rem; margin-left:auto; text-align:right; }
.ob-test-report-summary { padding:0.5rem 0.75rem; border-top:1px solid var(--an-border); background:var(--an-bg-secondary); font-weight:600; font-size:0.8rem; }

/* ===== Alert / config warnings (Task068) ===== */
.an-alert { display:flex; align-items:flex-start; gap:0.5rem; padding:0.65rem 0.9rem; border-radius:0.375rem; font-size:0.82rem; line-height:1.4; }
.an-alert--warning { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); color:#fbbf24; }
.an-alert--info    { background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.2); color:#60a5fa; }
.an-alert--error   { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); color:#f87171; }

/* ===== Language switcher ===== */
.an-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.15rem;
    background: var(--an-surface2);
    border-radius: 0.375rem;
    border: 1px solid var(--an-border);
}

.an-lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: var(--an-text-muted);
    transition: color 0.15s, background 0.15s;
}

.an-lang-btn:hover {
    color: var(--an-text);
    background: var(--an-surface);
}

.an-lang-btn.active {
    color: var(--an-text);
    background: var(--an-accent);
    color: white;
}

/* Pasek językowy na stronach publicznych (login, join) */
.an-public-lang-bar {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 0.5rem;
    border: 1px solid #334155;
    z-index: 1000;
}

/* ===== Landing Page ===== */
.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--an-bg);
    padding: 0 1rem;
}

.landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem 3rem;
    max-width: 640px;
    width: 100%;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}

.landing-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--an-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.landing-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--an-text);
}

.landing-title {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 800;
    color: var(--an-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.landing-subtitle {
    font-size: 1.05rem;
    color: var(--an-text-muted);
    margin: 0 0 2rem;
    max-width: 480px;
    line-height: 1.6;
}

.landing-invited-by {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    margin-bottom: 2rem;
}

.landing-referrer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--an-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.landing-referrer-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.1rem;
}

.landing-referrer-label {
    font-size: 0.7rem;
    color: var(--an-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.landing-referrer-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--an-text);
}

.landing-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.landing-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--an-accent);
    color: white;
    text-decoration: none;
    padding: 0.85rem 2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.15s, transform 0.1s;
}

.landing-btn-primary:hover {
    background: var(--an-accent-h);
    transform: translateY(-1px);
}

.landing-cta-hint {
    font-size: 0.78rem;
    color: var(--an-text-muted);
    margin: 0;
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    max-width: 720px;
    width: 100%;
    padding: 0 1rem 3rem;
}

.landing-feature {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

.landing-feature-icon {
    font-size: 1.75rem;
    color: var(--an-text-muted);
    display: block;
    margin-bottom: 0.75rem;
}

.landing-feature h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--an-text);
}

.landing-feature p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--an-text-muted);
    line-height: 1.5;
}

.landing-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    font-size: 0.78rem;
    color: var(--an-text-muted);
}

.landing-footer a {
    color: var(--an-accent);
    text-decoration: none;
}

.landing-footer-sep { opacity: 0.4; }

/* ===== Onboarding Page ===== */
.onboarding-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--an-bg);
    padding: 2rem 1rem;
}

.onboarding-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 1rem;
    padding: clamp(1rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 2rem); /* RESPONSIVE FIX Task065 */
    max-width: 640px;
    width: 100%;
}

.onboarding-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--an-text);
}

.onboarding-subtitle {
    color: var(--an-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.onboarding-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
}

.onboarding-video-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.onboarding-hint {
    font-size: 0.78rem;
    color: var(--an-text-muted);
    text-align: center;
    margin: 0.5rem 0 0;
}

.onboarding-disclaimer-text {
    background: var(--an-bg);
    border: 1px solid var(--an-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
    max-height: 320px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--an-text-muted);
    margin-bottom: 1.25rem;
}

.onboarding-accept-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.onboarding-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--an-accent);
}

.onboarding-accept-row label {
    font-size: 0.875rem;
    color: var(--an-text);
    cursor: pointer;
    line-height: 1.5;
}

.onboarding-code-input {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.onboarding-code-field {
    width: 200px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 6px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--an-border);
    border-radius: 0.5rem;
    background: var(--an-bg);
    color: var(--an-text);
    outline: none;
    transition: border-color 0.2s;
}

.onboarding-code-field:focus {
    border-color: var(--an-accent, #3b82f6);
}

.onboarding-code-field::placeholder {
    color: var(--an-text-muted);
    opacity: 0.4;
    letter-spacing: 6px;
}

/* ===== Admin Form Card ===== */
.an-form-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.an-field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.an-field-row label {
    font-size: 0.85rem;
    color: var(--an-text-muted);
    min-width: 150px;
}

/* ===== Course Builder ===== */
.course-builder { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.course-stages-panel, .course-materials-panel {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 0.75rem; padding: 1.25rem;
}
.course-stage-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
    border-radius: 0.375rem; cursor: pointer; transition: background 0.15s;
}
.course-stage-item:hover { background: var(--an-surface2); }
.course-stage-item.active { background: rgba(59,130,246,0.1); color: var(--an-accent); }
.course-stage-badge {
    font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 9999px;
    background: var(--an-accent); color: white; font-weight: 600;
}
.course-material-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--an-border); border-radius: 0.375rem;
    margin-bottom: 0.5rem; background: var(--an-bg); cursor: pointer;
    transition: border-color 0.15s;
}
.course-material-item:hover { border-color: var(--an-accent); }
.course-component-type {
    font-size: 0.68rem; padding: 0.15rem 0.45rem; border-radius: 0.25rem;
    background: var(--an-surface2); color: var(--an-text-muted); font-weight: 500;
}
.course-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.course-panel-header h3 {
    margin: 0; font-size: 0.85rem; color: var(--an-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.course-actions { display: flex; gap: 0.35rem; }
.course-actions button {
    background: none; border: 1px solid var(--an-border); color: var(--an-text-muted);
    border-radius: 0.25rem; padding: 0.2rem 0.4rem; font-size: 0.75rem;
    cursor: pointer; transition: all 0.15s;
}
.course-actions button:hover { border-color: var(--an-accent); color: var(--an-accent); }
.course-actions button.danger:hover { border-color: #f87171; color: #f87171; }

/* ===== Course Player ===== */
/* RESPONSIVE FIX: was 280px 1fr */
.course-player { display: grid; grid-template-columns: clamp(200px, 22%, 280px) 1fr; gap: 0; min-height: calc(100vh - 56px); }
.course-sidebar {
    background: var(--an-surface); border-right: 1px solid var(--an-border);
    overflow-y: auto; padding: 1rem 0;
}
.course-content { padding: 2rem; overflow-y: auto; }
.course-sidebar-stage { padding: 0.5rem 1rem 0.25rem; }
.course-sidebar-stage-title {
    font-size: 0.78rem; font-weight: 600; color: var(--an-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    display: flex; align-items: center; gap: 0.5rem;
}
.course-sidebar-material {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 1rem 0.4rem 1.5rem; font-size: 0.82rem;
    cursor: pointer; color: var(--an-text-muted); transition: all 0.15s;
}
.course-sidebar-material:hover { color: var(--an-text); background: var(--an-surface2); }
.course-sidebar-material.active { color: var(--an-accent); background: rgba(59,130,246,0.08); }
.course-sidebar-material.completed { color: var(--an-text); }
.course-sidebar-material.locked { opacity: 0.4; cursor: not-allowed; }

/* Video wrapper 16:9 */
.course-video-wrapper {
    position: relative; width: 100%; padding-top: 56.25%;
    background: #000; border-radius: 0.5rem; overflow: hidden;
    margin-bottom: 1.5rem;
}
.course-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Text block */
.course-text-block {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 0.5rem; padding: 1.5rem; line-height: 1.8;
    font-size: 0.9rem; color: var(--an-text); margin-bottom: 1.5rem;
}

/* Quiz */
.quiz-question { margin-bottom: 1.5rem; }
.quiz-question p { font-weight: 500; margin-bottom: 0.75rem; }
.quiz-answer {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--an-border); border-radius: 0.375rem;
    cursor: pointer; margin-bottom: 0.35rem; transition: all 0.15s;
}
.quiz-answer:hover { border-color: var(--an-accent); background: var(--an-surface2); }
.quiz-answer.selected { border-color: var(--an-accent); background: rgba(59,130,246,0.08); }
.quiz-result { text-align: center; padding: 2rem; border-radius: 0.75rem; }
.quiz-result.passed { background: rgba(34,197,94,0.1); border: 1px solid #4ade80; }
.quiz-result.failed { background: rgba(239,68,68,0.1); border: 1px solid #f87171; }

/* Quiz question header */
.quiz-question-header { margin-bottom: 0.25rem; }
.quiz-q-number { font-size: 0.72rem; color: var(--an-text-muted); font-weight: 500; }
.quiz-q-text { font-weight: 500; margin: 0.25rem 0 0.75rem; }

/* Quiz summary */
.quiz-summary { margin-top: 1.5rem; }
.quiz-summary-question {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.quiz-summary-answer {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    flex-direction: column;
}
.quiz-summary-answer.correct-selected {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
}
.quiz-summary-answer.wrong-selected {
    background: rgba(239,68,68,0.12);
    color: #f87171;
}
.quiz-summary-answer.correct-missed {
    background: rgba(245,158,11,0.1);
    color: #fbbf24;
    border-left: 2px solid #fbbf24;
}
.quiz-answer-explanation {
    font-size: 0.78rem;
    color: var(--an-text-muted);
    margin-top: 0.25rem;
    font-style: italic;
}
.quiz-full-answer {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59,130,246,0.08);
    border-left: 2px solid var(--an-accent);
    border-radius: 0 0.25rem 0.25rem 0;
    font-size: 0.82rem;
    color: var(--an-text-muted);
}

/* Course progress bar */
.course-progress-bar {
    height: 4px; background: var(--an-border); border-radius: 2px; margin-bottom: 1rem;
}
.course-progress-fill {
    height: 100%; background: var(--an-accent); border-radius: 2px;
    transition: width 0.3s;
}

/* Course list card */
.course-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.course-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 0.75rem; padding: 1.25rem; transition: border-color 0.15s;
}
.course-card:hover { border-color: var(--an-accent); }
.course-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.course-card p { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--an-text-muted); }

/* ===== Onboarding ref link box ===== */
.onboarding-reflink-box {
    background: var(--an-bg);
    border: 1px solid var(--an-accent);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    width: 100%;
    margin: 0.5rem 0;
}
.onboarding-reflink-label {
    font-size: 0.78rem;
    color: var(--an-accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.onboarding-reflink-url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.onboarding-reflink-url code {
    font-size: 0.82rem;
    color: var(--an-text);
    word-break: break-all;
    flex: 1;
}

/* ===== Dashboard ref link banner ===== */
.an-ref-banner {
    background: var(--an-surface);
    border: 1px solid var(--an-accent);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.an-ref-banner-label {
    font-size: 0.78rem;
    color: var(--an-accent);
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.an-ref-banner-url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.an-ref-banner-url code {
    font-size: 0.85rem;
    color: var(--an-text);
    word-break: break-all;
    flex: 1;
}

/* ===== Footer ===== */
.an-footer {
    height: 32px;
    min-height: 32px;
    background: var(--an-surface);
    border-top: 1px solid var(--an-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: var(--an-text-muted);
    flex-shrink: 0;
}

.an-footer a {
    color: var(--an-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.an-footer a:hover { color: var(--an-accent); }

/* ===== Legal Pages ===== */
.legal-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--an-bg);
    padding: 4rem 1rem 2rem;
}

.legal-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    padding: 2rem 2.5rem;
    max-width: 720px;
    width: 100%;
}

.legal-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
    font-weight: 700;
    color: var(--an-text);
}

.legal-content {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--an-text-muted);
}

.legal-content h2 {
    font-size: 1.25rem;
    color: var(--an-text);
    margin: 0 0 0.5rem;
}

.legal-content h3 {
    font-size: 0.95rem;
    color: var(--an-text);
    margin: 1.5rem 0 0.5rem;
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 0.75rem 0;
}

.legal-content th, .legal-content td {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--an-border);
    text-align: left;
}

.legal-content th {
    background: var(--an-surface2);
    font-weight: 600;
    color: var(--an-text);
}

.legal-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--an-border);
    font-size: 0.75rem;
    color: var(--an-text-muted);
}

.legal-footer a {
    color: var(--an-accent);
    text-decoration: none;
}

.legal-operator-block {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--an-border);
    border-radius: 8px;
    background: var(--an-bg-secondary);
}

.legal-operator-block h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--an-text);
}

.legal-operator-block p {
    font-size: 0.85rem;
    color: var(--an-text-muted);
    margin: 0 0 0.75rem;
}

.legal-operator-block address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--an-text);
}

.legal-operator-block a {
    color: var(--an-accent);
    text-decoration: none;
}

/* ===== Avatar ===== */
.an-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--an-surface2);
    border: 2px solid var(--an-border);
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 50%;
}
.an-avatar--circle { border-radius: 50%; }
.an-avatar--xs  { width: 24px;  height: 24px;  font-size: 0.6rem; }
.an-avatar--sm  { width: 32px;  height: 32px;  font-size: 0.72rem; }
.an-avatar--md  { width: 40px;  height: 40px;  font-size: 0.875rem; }
.an-avatar--lg  { width: 56px;  height: 56px;  font-size: 1.1rem; }
.an-avatar--xl  { width: 80px;  height: 80px;  font-size: 1.4rem; }
.an-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.an-avatar-initials { font-weight: 700; color: var(--an-text); user-select: none; }

/* ===== QR Code ===== */
.an-ref-qr { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.an-qr-img { width: 80px; height: 80px; border-radius: 0.4rem; background: white; padding: 4px; }
.an-qr-download { font-size: 0.72rem; color: var(--an-text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.25rem; }
.an-qr-download:hover { color: var(--an-accent); }

/* ===== Share Page ===== */
.share-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--an-bg);
    padding: 2rem 1rem;
}
.share-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.share-qr { width: 200px; height: 200px; border-radius: 0.75rem; background: white; padding: 8px; }
.share-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1.25rem;
    background: var(--an-accent);
    color: white;
    text-decoration: none;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s;
}
.share-download-btn:hover { background: var(--an-accent-h); }

/* ===== Select / dropdown elements ===== */
select {
    background-color: var(--an-surface2) !important;
    color: var(--an-text) !important;
    border: 1px solid var(--an-border) !important;
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
}
select:focus {
    border-color: var(--an-accent) !important;
}
select option {
    background-color: var(--an-surface2);
    color: var(--an-text);
}

/* ===== About page ===== */
.about-page {
    padding: 2.5rem 1rem;
    max-width: 680px;
    margin: 0 auto;
}
.about-avatar {
    display: block;
    margin: 0 auto;
    width: 160px !important;
    height: 160px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 4px solid var(--an-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.about-content p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--an-text);
}

/* ===== Referrals page ===== */
.ref-page {
    max-width: 680px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ref-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--an-text);
    margin: 0 0 0.5rem;
}
.ref-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.625rem;
    padding: 1.25rem 1.5rem;
}
.ref-card-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--an-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.ref-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.ref-link-input {
    flex: 1;
    background: var(--an-surface2);
    border: 1px solid var(--an-border);
    border-radius: 0.375rem;
    color: var(--an-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: monospace;
    outline: none;
    min-width: 0;
}
.ref-copy-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--an-border);
    background: var(--an-surface2);
    color: var(--an-text);
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.ref-copy-btn:hover { background: var(--an-border); }
.ref-copy-btn.copied { border-color: #4ade80; color: #4ade80; }
.ref-code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.ref-code {
    background: var(--an-surface2);
    border: 1px solid var(--an-border);
    border-radius: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.82rem;
    color: var(--an-accent);
}
.referrals-stats {
    display: flex;
    gap: 1rem;
}
.referrals-stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.625rem;
    gap: 0.4rem;
}
.referrals-stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}
.referrals-stat-label {
    font-size: 0.72rem;
    color: var(--an-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ref-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.ref-qr-img {
    width: 180px;
    height: 180px;
    border-radius: 0.5rem;
    background: white;
    padding: 8px;
}
.ref-qr-actions {
    display: flex;
    gap: 0.75rem;
}
.ref-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid;
    transition: all 0.15s;
}
.ref-btn-primary {
    background: var(--an-accent);
    border-color: var(--an-accent);
    color: white;
}
.ref-btn-primary:hover { background: var(--an-accent-h); border-color: var(--an-accent-h); color: white; }
.ref-btn-secondary {
    background: transparent;
    border-color: var(--an-border);
    color: var(--an-text);
}
.ref-btn-secondary:hover { background: var(--an-surface2); color: var(--an-text); }

/* ===== Field hint ===== */
.field-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--an-text-muted);
    line-height: 1.4;
}

/* ===== Radio card (theme preset selector) ===== */
.an-radio-card {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--an-border);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
    background: var(--an-surface);
}
.an-radio-card:hover { border-color: var(--an-accent); }
.an-radio-card.active {
    border-color: var(--an-accent);
    background: rgba(59,130,246,0.08);
    color: var(--an-accent);
}
.an-radio-card input[type="radio"] { margin: 0; }

/* ===== Ownership Notice ===== */
.an-ownership-notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--an-text-muted);
}
.an-ownership-notice i { color: #fbbf24; font-size: 1.1rem; flex-shrink: 0; }
.an-ownership-notice strong { display: block; color: var(--an-text); margin-bottom: 0.25rem; }

/* ===== Spin animation ===== */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ===== Onboarding V2 Builder (ob-*) ===== */
.ob-topbar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--an-border);
    background: var(--an-surface); position: sticky; top: 0; z-index: 10;
}

/* Builder zajmuje cały obszar — usuń padding i scroll z an-content */
.an-content:has(.ob-topbar) {
    padding: 0 !important;
    overflow: hidden !important;
}
.ob-back { color: var(--an-text-muted); font-size: 0.82rem; text-decoration: none; display: flex; align-items: center; gap: 0.3rem; }
.ob-back:hover { color: var(--an-text); }
.ob-flow-name { font-weight: 600; font-size: 0.95rem; }
.ob-tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--an-border);
    background: var(--an-surface); padding: 0 1rem;
}
.ob-tab {
    padding: 0.6rem 1rem; background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--an-text-muted); font-size: 0.85rem; cursor: pointer; transition: all 0.15s;
}
.ob-tab:hover { color: var(--an-text); }
.ob-tab--active { color: var(--an-accent); border-bottom-color: var(--an-accent); }

.ob-layout {
    display: grid; grid-template-columns: 18% 1fr 26%;
    min-width: 0;
    height: calc(100vh - var(--an-bar-h) - 52px - 41px); overflow: hidden;
}
.ob-sidebar {
    border-right: 1px solid var(--an-border); overflow-y: auto;
    background: var(--an-surface); padding: 0.75rem;
}
.ob-canvas { overflow-y: auto; padding: 1rem; }
.ob-properties {
    border-left: 1px solid var(--an-border); overflow-y: auto;
    background: var(--an-surface); padding: 0; min-width: 0; max-width: 100%;
}

/* ===== Builder Component Library (ob-library-*) ===== */
.ob-library { padding: 0.25rem 0; }
.ob-library-category { margin-bottom: 0.5rem; }
.ob-library-category-header {
    display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--an-text-muted);
    padding: 0.3rem 0.25rem; cursor: pointer; user-select: none;
}
.ob-library-category-header:hover { color: var(--an-text); }
.ob-library-count {
    margin-left: auto; font-size: 0.65rem;
    background: var(--an-surface2); border-radius: 9999px;
    padding: 0 0.35rem; color: var(--an-text-muted);
}
.ob-library-category-items {
    display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.25rem 0;
}
.ob-library-item {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem;
    background: var(--an-surface2);
    border: 1px solid var(--an-border);
    border-radius: 9999px;
    font-size: 0.71rem; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap; color: var(--an-text); user-select: none;
}
.ob-library-item:hover {
    background: var(--an-accent); border-color: var(--an-accent); color: #fff;
}
.ob-library-badge {
    font-size: 0.58rem; font-weight: 700; padding: 0.05rem 0.28rem;
    background: var(--an-accent); color: #fff;
    border-radius: 9999px; letter-spacing: 0.03em;
}
.ob-library-item:hover .ob-library-badge { background: rgba(255,255,255,0.25); }

/* ===== Onboarding Template Picker (ob-template-*) ===== */
.ob-template-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem; padding: 1.25rem;
}
.ob-template-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: 0.75rem; padding: 1.25rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    transition: border-color 0.15s;
}
.ob-template-card:hover { border-color: var(--an-accent); }
.ob-template-card-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ob-template-name { font-weight: 600; font-size: 0.95rem; }
.ob-template-desc { font-size: 0.82rem; color: var(--an-text-muted); margin: 0; flex: 1; }

/* ===== Onboarding Wizard (ob-wizard-*) ===== */
.ob-wizard {
    max-width: 560px; margin: 2rem auto; padding: 1.5rem;
    background: var(--an-surface); border: 1px solid var(--an-border); border-radius: 0.75rem;
}
.ob-wizard-header { display: flex; align-items: center; margin-bottom: 1.5rem; }
.ob-wizard-header h2 { margin: 0; font-size: 1.1rem; }
.ob-wizard-progress {
    height: 4px; background: var(--an-border); border-radius: 2px; margin-bottom: 1.5rem;
}
.ob-wizard-progress-bar {
    height: 100%; background: var(--an-accent); border-radius: 2px; transition: width 0.3s;
}
.ob-wizard-question { margin-bottom: 1.5rem; }
.ob-wizard-q-num { font-size: 0.75rem; color: var(--an-text-muted); margin-bottom: 0.25rem; }
.ob-wizard-question h3 { margin: 0 0 1rem; font-size: 1rem; }
.ob-wizard-options { display: flex; flex-direction: column; gap: 0.5rem; }
.ob-wizard-option {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.9rem; border: 1px solid var(--an-border); border-radius: 0.5rem;
    cursor: pointer; font-size: 0.9rem; transition: all 0.15s;
}
.ob-wizard-option:hover { border-color: var(--an-accent); background: rgba(59,130,246,0.05); }
.ob-wizard-option--selected { border-color: var(--an-accent); background: rgba(59,130,246,0.1); color: var(--an-accent); }
.ob-wizard-option input[type="radio"] { accent-color: var(--an-accent); }
.ob-wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.ob-wizard-review h3 { margin: 0 0 1rem; font-size: 1rem; }
.ob-wizard-review-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ob-wizard-review-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.4rem 0; border-bottom: 1px solid var(--an-border);
}
.ob-wizard-review-label { font-size: 0.85rem; color: var(--an-text-muted); }
.ob-wizard-review-value { font-size: 0.85rem; font-weight: 500; }

/* ===== Onboarding Builder Translations Tab — 2-column layout ===== */
.ob-translations-layout {
    display: grid;
    grid-template-columns: clamp(180px, 20%, 240px) 1fr; /* RESPONSIVE FIX: was 240px 1fr */
    height: 100%;
    overflow: hidden;
}

/* Left column */
.ob-trans-steps-list {
    border-right: 1px solid var(--an-border);
    overflow-y: auto;
    background: var(--an-surface);
    display: flex;
    flex-direction: column;
}

/* Language selector */
.ob-trans-locale-selector {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ob-trans-locale-label {
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--an-text-muted);
}
.ob-trans-locale-options { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ob-trans-locale-btn {
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.45rem; background: none;
    border: 1px solid var(--an-border); border-radius: 4px;
    cursor: pointer; font-size: 0.72rem; color: var(--an-text-muted); transition: all 0.15s;
}
.ob-trans-locale-btn:hover { border-color: var(--an-accent); color: var(--an-text); }
.ob-trans-locale-btn--active {
    background: rgba(59,130,246,0.12); border-color: var(--an-accent);
    color: var(--an-accent); font-weight: 600;
}
.ob-trans-flag { font-size: 1rem; line-height: 1; }
.ob-trans-locale-code { font-size: 0.68rem; }
.ob-trans-divider { height: 1px; background: var(--an-border); }

/* Step list items */
.ob-trans-step-item {
    display: flex; align-items: center; width: 100%;
    padding: 0.6rem 0.75rem; background: none; border: none;
    border-left: 3px solid transparent; cursor: pointer; text-align: left;
    gap: 0.5rem; transition: background 0.12s;
}
.ob-trans-step-item:hover { background: rgba(255,255,255,0.04); }
.ob-trans-step-item--active {
    background: rgba(59,130,246,0.08); border-left-color: var(--an-accent);
}
.ob-trans-step-info { flex: 1; min-width: 0; }
.ob-trans-step-title {
    display: block; font-size: 0.82rem; font-weight: 600; color: var(--an-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-trans-step-key {
    display: block; font-size: 0.68rem; color: var(--an-text-muted); font-family: monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-trans-step-badge { flex-shrink: 0; }
.ob-trans-progress {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 9999px;
    font-size: 0.68rem; font-weight: 700; padding: 0 0.3rem;
}
.ob-trans-progress--done    { background: rgba(16,185,129,0.12); color: #10b981; }
.ob-trans-progress--partial { background: rgba(251,191,36,0.12);  color: #d97706; }
.ob-trans-progress--none    { background: rgba(239,68,68,0.08);   color: #f87171; }

/* Right panel */
.ob-trans-components-panel { overflow-y: auto; padding: 0; }
.ob-trans-panel-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; background: var(--an-surface);
    border-bottom: 1px solid var(--an-border);
    position: sticky; top: 0; z-index: 1;
}
.ob-trans-panel-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 600; font-size: 0.88rem;
}
.ob-trans-panel-key {
    font-size: 0.72rem; color: var(--an-text-muted); font-family: monospace;
    background: var(--an-surface2); padding: 0.1rem 0.3rem; border-radius: 3px;
}
.ob-trans-panel-progress { margin-left: auto; font-size: 0.72rem; color: var(--an-text-muted); }

/* Component card */
.ob-trans-comp-card {
    margin: 0.75rem; border: 1px solid var(--an-border);
    border-radius: 8px; overflow: hidden; transition: border-color 0.15s;
}
.ob-trans-comp-card--translated { border-color: rgba(16,185,129,0.3); }
.ob-trans-comp-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; background: var(--an-surface2);
    border-bottom: 1px solid var(--an-border);
}
.ob-trans-comp-type-badge {
    font-size: 0.7rem; font-weight: 700;
    background: rgba(59,130,246,0.1); color: var(--an-accent);
    padding: 0.15rem 0.5rem; border-radius: 4px;
}
.ob-trans-comp-key { font-size: 0.68rem; color: var(--an-text-muted); font-family: monospace; }
.ob-trans-comp-status {
    margin-left: auto; font-size: 0.7rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.25rem;
}
.ob-trans-comp-status--ok      { color: #10b981; }
.ob-trans-comp-status--missing { color: var(--an-text-muted); }

/* Fields */
.ob-trans-comp-fields { padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ob-trans-field { display: flex; flex-direction: column; gap: 0.25rem; }
.ob-trans-field-label {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--an-text-muted);
}
.ob-trans-textarea { resize: vertical; min-height: 60px; font-size: 0.82rem; }

/* Options rows */
.ob-trans-option-row {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;
}
.ob-trans-option-source {
    min-width: 120px; max-width: 150px; font-size: 0.78rem; color: var(--an-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.ob-trans-option-row .an-input { font-size: 0.82rem; }

/* Actions */
.ob-trans-comp-actions {
    display: flex; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border-top: 1px solid var(--an-border);
    background: var(--an-surface2);
}

/* Messages */
.ob-trans-msg {
    margin: 0 0.75rem; font-size: 0.78rem; padding: 0.3rem 0.5rem;
    border-radius: 4px; display: flex; align-items: center; gap: 0.35rem;
}
.ob-trans-msg--ok    { color: #10b981; background: rgba(16,185,129,0.08); }
.ob-trans-msg--error { color: #f87171; background: rgba(239,68,68,0.08); }

/* Non-translatable notice */
.ob-trans-no-fields {
    margin: 0.75rem; padding: 0.5rem 0.75rem;
    background: rgba(59,130,246,0.04); border-radius: 6px;
    font-size: 0.75rem; color: var(--an-text-muted);
    display: flex; align-items: center; gap: 0.4rem;
}

/* Empty states */
.ob-trans-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; gap: 0.5rem; color: var(--an-text-muted); font-size: 0.82rem;
}
.ob-trans-empty-state--center { height: 100%; min-height: 200px; }
.ob-trans-empty-state i { font-size: 1.5rem; opacity: 0.4; }

/* ===== Onboarding Flow Page (of-*) ===== */
.of-loading {
    display: flex; justify-content: center; align-items: center;
    height: 60vh; font-size: 2rem; color: var(--an-text-muted);
}
.of-error {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 60vh; gap: 0.75rem; color: var(--an-danger, #f87171);
}
.of-completed {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 60vh; gap: 0.75rem; text-align: center;
}
.of-completed i { font-size: 3rem; color: var(--an-success, #4ade80); }
.of-wrapper { max-width: 680px; width: 100%; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 3vw, 1rem); } /* RESPONSIVE FIX Task065 */
.of-progress {
    height: 4px; background: var(--an-border); border-radius: 2px; margin-bottom: 0.25rem;
}
.of-progress-bar {
    height: 100%; background: var(--an-accent); border-radius: 2px; transition: width 0.4s;
}
.of-progress-label {
    font-size: 0.75rem; color: var(--an-text-muted); text-align: right; margin-bottom: 1.5rem;
}
.of-step { }
.of-step-title { margin: 0 0 0.5rem; font-size: 1.2rem; }
.of-step-desc { margin: 0 0 1.25rem; color: var(--an-text-muted); font-size: 0.9rem; }
.of-components { display: flex; flex-direction: column; gap: 1rem; }
.of-heading { margin: 0.5rem 0; }
.of-heading--h3 { font-size: 1rem; }
.onboarding-component { }

/* ===== Onboarding Runtime Components ===== */
.of-consent-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.of-consent-row input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--an-accent); }
.of-manual-confirm button { margin-top: 0.5rem; }
.of-text-input label, .of-single-choice legend { display: block; font-weight: 500; margin-bottom: 0.4rem; font-size: 0.9rem; }
.of-radio-option { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; cursor: pointer; font-size: 0.9rem; }
.of-radio-option input { accent-color: var(--an-accent); }
.of-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 0.6rem 1.25rem; border-radius: 0.5rem;
    background: var(--an-accent); color: var(--an-bg, #fff); border: none;
    font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s;
}
.of-btn-primary:hover { background: var(--an-accent); filter: brightness(1.12); }

/* BEM aliases — components use of-btn--* classes */
.of-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 0.6rem 1.25rem; border-radius: 0.5rem;
    font-size: 0.9rem; font-weight: 500; cursor: pointer; border: none;
    transition: filter 0.15s, background 0.15s;
}
.of-btn--primary {
    background: var(--an-accent); color: var(--an-bg, #fff);
}
.of-btn--primary:hover { background: var(--an-accent); filter: brightness(1.12); }
.of-btn--secondary {
    background: var(--an-surface2); color: var(--an-text);
    border: 1px solid var(--an-border);
}
.of-btn--secondary:hover { filter: brightness(1.1); }
.of-btn--action {
    width: 100%; justify-content: center;
}
.of-button-wrap {
    margin-top: 1rem; display: flex; justify-content: center;
}
.of-input {
    width: 100%; padding: 0.55rem 0.85rem; border-radius: 0.4rem;
    border: 1px solid var(--an-border); background: var(--an-surface2);
    color: var(--an-text); font-size: 0.9rem; outline: none;
    transition: border-color 0.15s;
}
.of-input:focus { border-color: var(--an-accent); }
.of-input-label {
    display: block; font-weight: 500; font-size: 0.9rem;
    margin-bottom: 0.35rem; color: var(--an-text);
}
.of-divider {
    border: none; border-top: 1px solid var(--an-border);
    margin: 1rem 0;
}
.of-consent {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.75rem; background: var(--an-surface2);
    border: 1px solid var(--an-border); border-radius: 0.4rem;
}
.of-consent-label {
    font-size: 0.9rem; color: var(--an-text); cursor: pointer; line-height: 1.5;
}
.of-confirmed {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--an-success, #4ade80); font-size: 0.9rem; padding: 0.5rem 0;
}
.of-choice-btn {
    display: block; width: 100%; text-align: left;
    padding: 0.6rem 1rem; margin-bottom: 0.4rem;
    border: 1px solid var(--an-border); border-radius: 0.4rem;
    background: var(--an-surface2); color: var(--an-text);
    font-size: 0.9rem; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.of-choice-btn:hover { border-color: var(--an-accent); }
.of-choice-btn.selected {
    border-color: var(--an-accent); background: var(--an-surface3, var(--an-surface2));
    color: var(--an-accent);
}

.of-telegram-connect, .of-telegram-groups, .of-discord-join,
.of-sponsor-gate, .of-broker-reg {
    padding: 1rem; background: var(--an-surface2); border-radius: 0.5rem;
    border: 1px solid var(--an-border);
}
.of-approval-pending { color: var(--an-warning, #fbbf24); font-size: 0.85rem; margin-top: 0.5rem; }
.of-approval-approved { color: var(--an-success, #4ade80); font-size: 0.85rem; margin-top: 0.5rem; }

/* ── VersionsTab ──────────────────────────────────────────────────────────── */
.ob-versions { padding: 1rem 1.5rem; }
.ob-version-row {
    background: var(--an-bg-card, var(--an-surface));
    border: 1px solid var(--an-border);
    border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.5rem;
}
.ob-version-header {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem;
}
.ob-version-meta {
    font-size: 0.75rem; color: var(--an-text-muted, #94a3b8); margin-bottom: 0.4rem;
}
.ob-version-changelog {
    font-size: 0.75rem; color: var(--an-text-secondary, #94a3b8);
    font-style: italic; margin-bottom: 0.4rem;
}
.ob-version-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Diff view */
.ob-diff {
    background: var(--an-bg-secondary, var(--an-surface2));
    border: 1px solid var(--an-border); border-radius: 6px;
    padding: 0.75rem 1rem; margin-top: 0.75rem;
}
.ob-diff-title {
    font-size: 0.78rem; font-weight: 600; color: var(--an-text-muted, #94a3b8);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.ob-diff-section { margin-bottom: 0.6rem; }
.ob-diff-section-header {
    font-size: 0.78rem; font-weight: 600; margin-bottom: 0.2rem;
    color: var(--an-text-secondary, #94a3b8);
}
.ob-diff-added  { color: var(--an-success, #4ade80); font-size: 0.8rem; }
.ob-diff-removed { color: var(--an-danger, #f87171);  font-size: 0.8rem; }
.ob-diff-changed { color: var(--an-warning, #fbbf24); font-size: 0.8rem; }
.ob-diff-empty  { font-size: 0.78rem; color: var(--an-text-muted, #94a3b8); font-style: italic; }

/* Migration result */
.ob-migrate-result { font-size: 0.82rem; color: var(--an-success, #4ade80); margin-top: 0.4rem; }
.ob-migrate-result--error { color: var(--an-danger, #f87171); }
.of-approval-rejected { color: var(--an-danger, #f87171); font-size: 0.85rem; margin-top: 0.5rem; }

/* ===== PropertiesPanel + ComponentPropEditor ===== */
.ob-props { display: flex; flex-direction: column; gap: 0; padding: 0; }

.ob-props-title {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--an-text-muted);
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--an-border); margin: 0;
}

.ob-props-readonly {
    font-size: 0.82rem; color: var(--an-text); font-family: 'Courier New', monospace;
    background: var(--an-surface2); padding: 0.25rem 0.5rem;
    border-radius: 4px; border: 1px solid var(--an-border); word-break: break-all;
}

.ob-props-meta {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--an-border);
    background: var(--an-surface2);
}
.ob-props-meta-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.ob-props-meta-label {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--an-text-muted);
    min-width: 45px; flex-shrink: 0;
}
.ob-props-meta-value {
    font-size: 0.8rem; font-weight: 600; color: var(--an-text);
    font-family: 'Courier New', monospace;
    background: var(--an-bg); padding: 0.15rem 0.4rem;
    border-radius: 3px; border: 1px solid var(--an-border);
}

.ob-props-section-header {
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--an-accent);
    padding: 0.6rem 0.75rem 0.3rem;
    border-top: 1px solid var(--an-border); margin-top: 0.25rem;
    background: rgba(59,130,246,0.04);
}

.ob-prop-field, .ob-props-field {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ob-prop-field:last-child, .ob-props-field:last-child { border-bottom: none; }
.ob-prop-field .an-label, .ob-props-field .an-label {
    font-size: 0.7rem; font-weight: 700; color: var(--an-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    line-height: 1.3; margin-bottom: 0.1rem;
}
.ob-prop-field .an-input, .ob-props-field .an-input { width: 100%; font-size: 0.82rem; padding: 0.35rem 0.5rem; border-radius: 4px; min-height: unset; }
.ob-prop-field .an-input:focus, .ob-props-field .an-input:focus {
    border-color: var(--an-accent); outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.ob-prop-field textarea.an-input, .ob-props-field textarea.an-input { resize: vertical; min-height: 60px; max-height: 200px; font-size: 0.8rem; line-height: 1.5; }
.ob-prop-field select.an-input, .ob-props-field select.an-input { width: 100% !important; max-width: 100% !important; }

.ob-prop-hint { font-size: 0.72rem; color: var(--an-text-muted); line-height: 1.4; font-style: italic; }

.ob-prop-field--toggle { padding: 0.4rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ob-prop-field--toggle .an-label {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    font-size: 0.82rem; font-weight: 500; color: var(--an-text);
}
.ob-prop-field--toggle input[type="checkbox"] {
    width: 14px; height: 14px; flex-shrink: 0;
    accent-color: var(--an-accent); cursor: pointer;
}

.ob-prop-info {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(59,130,246,0.06); border-left: 3px solid var(--an-accent);
    margin: 0.5rem 0.75rem; border-radius: 0 4px 4px 0;
    font-size: 0.78rem; color: var(--an-text-muted); line-height: 1.5;
}
.ob-prop-info i { color: var(--an-accent); flex-shrink: 0; margin-top: 1px; }

.ob-props-advanced { border-top: 1px solid var(--an-border); margin-top: 0.25rem; }
.ob-props-advanced-toggle {
    display: flex; align-items: center; gap: 0.4rem;
    width: 100%; background: none; border: none; cursor: pointer;
    color: var(--an-text-muted); font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.5rem 0.75rem; transition: color 0.15s;
}
.ob-props-advanced-toggle:hover { color: var(--an-text); }

/* Przycisk Zapisz — sticky na dole, zawsze widoczny bez scrollowania */
.ob-props .an-btn {
    position: sticky; bottom: 0; z-index: 2;
    width: 100%; margin: 0;
    justify-content: center;
    border-radius: 0;
    border-top: 1px solid var(--an-border);
    background: var(--an-surface);
    padding: 0.65rem 1rem;
}

.ob-props-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 200px; text-align: center; padding: 2rem 1rem; color: var(--an-text-muted);
}
.ob-props-empty p { font-size: 0.82rem; margin: 0.5rem 0 0; }

.ob-props-error {
    margin: 0 0.75rem; font-size: 0.78rem; color: #f87171;
    padding: 0.35rem 0.5rem; background: rgba(239,68,68,0.08);
    border-radius: 4px; border-left: 3px solid #f87171;
}

/* Token chips */
.ob-token-chips {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    margin-top: 0.35rem; margin-bottom: 0.25rem;
}
.ob-token-chips--rte { margin-bottom: 0.5rem; }
.ob-token-chip {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.45rem;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.4);
    border-radius: 9999px;
    font-size: 0.68rem; font-family: 'Courier New', monospace;
    color: var(--an-accent); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap; line-height: 1.4;
}
.ob-token-chip:hover { background: rgba(59,130,246,0.22); border-color: var(--an-accent); }
.ob-token-chip:active { transform: scale(0.96); }

/* ETAP 2 — Key field validation */
.an-input--error { border-color: #f87171 !important; }
.ob-prop-hint--error { color: #f87171; font-style: normal; }

/* ETAP 3 — ConditionBuilder */
.ob-condition-builder { display: flex; flex-direction: column; gap: 0.4rem; }
.ob-condition-row { display: flex; align-items: center; gap: 0.35rem; }
.ob-condition-row .an-input { font-size: 0.78rem; padding: 0.3rem 0.4rem; }
.ob-condition-remove {
    background: none; border: none; cursor: pointer;
    color: var(--an-text-muted); padding: 0.2rem; flex-shrink: 0; line-height: 1;
}
.ob-condition-remove:hover { color: #f87171; }
.ob-condition-logic { display: flex; align-items: center; padding-left: 0.25rem; }
.ob-condition-empty {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--an-text-muted); padding: 0.25rem 0;
}

/* ETAP 4 — Preview banner */
.of-preview-banner {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--an-warning-rgb, 251, 191, 36), 0.12);
    border-bottom: 2px solid var(--an-warning, #fbbf24);
    color: var(--an-warning, #d97706); font-size: 0.85rem;
    position: sticky; top: 0; z-index: 100;
}

/* ETAP 7 (Task044) — Field selector UI */
.ob-field-key-preview {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.3rem; font-size: 0.78rem;
    color: var(--an-text-muted);
}
.ob-field-key-preview code {
    background: rgba(255,255,255,0.06); border-radius: 3px;
    padding: 0.1rem 0.35rem; font-size: 0.78rem; color: var(--an-text-primary);
}
.ob-field-key-preview small { color: var(--an-text-muted); font-style: italic; }

.ob-field-preview {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.3rem; font-size: 0.78rem; color: var(--an-text-muted);
}
.ob-field-preview code {
    background: rgba(255,255,255,0.06); border-radius: 3px;
    padding: 0.1rem 0.35rem; font-size: 0.78rem; color: var(--an-text-primary);
}
.ob-field-usage {
    margin-left: auto; font-size: 0.72rem;
    background: rgba(255,255,255,0.06); border-radius: 10px;
    padding: 0.1rem 0.45rem; color: var(--an-text-muted);
}

.of-prefill-hint {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: var(--an-text-muted);
    margin-top: 0.2rem; font-style: italic;
}

/* ── Nav visibility (global) ── */
.an-hidden { display: none !important; }

.an-nav-link.nav-item--ghost {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* ===== Admin Nav Groups (collapsible) ===== */
.an-nav-group {
    display: block;
    margin-top: 0.1rem;
}

.an-nav-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    color: var(--an-text-muted);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.15s;
}

.an-nav-group-header:hover {
    background: var(--an-surface2);
    color: var(--an-text);
}

.an-nav-group-header--open {
    color: var(--an-text);
}

.an-nav-group-chev {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.6;
}

.an-nav-group-items {
    display: flex;
    flex-direction: column;
    padding: 0.1rem 0;
    background: rgba(0, 0, 0, 0.08);
}

.an-nav-link.an-nav-sub {
    padding-left: 2.4rem;
    font-size: 0.82rem;
}

.an-sidebar.collapsed .an-nav-group-chev,
.an-sidebar.collapsed .an-nav-group-items {
    display: none;
}

/* ===== Workflow Map (Task154 — SVG renderer + Interact.js) ===== */
.wfm-shell {
    display: grid;
    grid-template-columns: 220px 1fr 280px var(--wfm-panel-w, 0px);
    height: calc(100vh - var(--an-bar-h));
    overflow: hidden;
    background: var(--an-bg);
}

.wfm-sidebar {
    border-right: 1px solid var(--an-border);
    overflow-y: auto;
    background: var(--an-surface);
    padding: 0.6rem 0.5rem;
}

.wfm-canvas-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.wfm-inspector {
    border-left: 1px solid var(--an-border);
    overflow-y: auto;
    background: var(--an-surface);
}

/* ===== Toolbar ===== */
.wfm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--an-border);
    background: var(--an-surface);
    flex-shrink: 0;
}
.wfm-toolbar-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.95rem; font-weight: 600; color: var(--an-text);
    margin: 0;
}
.wfm-toolbar-tenant {
    font-size: 0.72rem; color: var(--an-text-muted); font-weight: 400;
}
.wfm-toolbar-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-left: 0.75rem; }
.wfm-toolbar-spacer { flex: 1; }
.wfm-toolbar-actions { display: flex; gap: 0.35rem; }
.wfm-counter {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; padding: 0.15rem 0.5rem;
    background: var(--an-surface2); color: var(--an-text-muted);
    border: 1px solid var(--an-border); border-radius: 4px;
}
.wfm-counter--ok    { background: rgba(15,110,86,0.12);  color: #0F6E56; border-color: rgba(15,110,86,0.3); }
.wfm-counter--warn  { background: rgba(186,117,23,0.12); color: #BA7517; border-color: rgba(186,117,23,0.3); }
.wfm-counter--error { background: rgba(163,45,45,0.15);  color: #A32D2D; border-color: rgba(163,45,45,0.3); }

/* ===== Canvas ===== */
.wfm-canvas-outer {
    flex: 1;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0) 0 0 / 20px 20px,
        var(--an-bg);
    cursor: grab;
    touch-action: none;
}
.theme-light .wfm-canvas-outer {
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.08) 1px, transparent 0) 0 0 / 20px 20px,
        var(--an-bg);
}
.wfm-canvas-outer:active { cursor: grabbing; }

.wfm-canvas-inner {
    position: absolute;
    top: 0; left: 0;
    width: 4000px; height: 4000px;
    transform-origin: 0 0;
    transform: translate(0px, 0px) scale(1);
}

.wfm-svg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 4000px; height: 4000px;
    pointer-events: none;
    overflow: visible;
}

/* ===== Node (top-level, absolutely positioned, draggable) ===== */
.wfm-node {
    position: absolute;
    top: 0; left: 0;
    border-radius: 8px;
    border: 1.5px solid;
    min-width: 200px;
    max-width: 260px;
    background: var(--an-surface);
    color: var(--an-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    user-select: none;
    cursor: grab;
    touch-action: none;
    transition: box-shadow .15s ease;
}
.wfm-node:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.wfm-node:active { cursor: grabbing; }
.wfm-node.wfm-selected {
    outline: 2px solid #534AB7;
    outline-offset: 2px;
}

.wfm-node-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
}
.wfm-node-header i.bi { font-size: 0.95rem; flex-shrink: 0; }
.wfm-node-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wfm-node-sublabel {
    font-size: 0.65rem; font-weight: 400;
    opacity: 0.7;
    padding: 0.05rem 0.3rem;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
}
.wfm-node-toggle {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    font-size: 0.85rem;
}
.wfm-node-toggle:hover { background: rgba(0,0,0,0.08); }

.wfm-node-body {
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    color: var(--an-text-muted);
}
.wfm-node-body:empty { display: none; }

.wfm-badges { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-bottom: 0.3rem; }
.wfm-badge {
    font-size: 0.6rem;
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    color: var(--an-text);
    text-transform: lowercase;
    white-space: nowrap;
}
.theme-dark .wfm-badge { background: rgba(255,255,255,0.08); color: var(--an-text); }

.wfm-warnings { display: flex; flex-direction: column; gap: 0.18rem; margin-top: 0.25rem; }
.wfm-warning {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.62rem;
    padding: 0.12rem 0.35rem;
    border-radius: 3px;
}
.wfm-warning--warning { background: rgba(186,117,23,0.15); color: #BA7517; }
.wfm-warning--error   { background: rgba(163,45,45,0.18);  color: #A32D2D; }

/* ===== Node types ===== */
.wfm-node-start      { border-color: #888780; }
.wfm-node-start      .wfm-node-header { background: #F1EFE8; color: #2C2C2A; }
.wfm-node-flow       { border-color: #534AB7; }
.wfm-node-flow       .wfm-node-header { background: #EEEDFE; color: #26215C; }
.wfm-node-trigger    { border-color: #BA7517; }
.wfm-node-trigger    .wfm-node-header { background: #FAEEDA; color: #412402; }
.wfm-node-step       { border-color: #185FA5; }
.wfm-node-step       .wfm-node-header { background: #E6F1FB; color: #042C53; }
.wfm-node-component  { border-color: #5F5E5A; }
.wfm-node-component  .wfm-node-header { background: #F1EFE8; color: #2C2C2A; }
.wfm-node-transition { border-color: #993C1D; }
.wfm-node-transition .wfm-node-header { background: #FAECE7; color: #4A1B0C; }
.wfm-node-course     { border-color: #0F6E56; }
.wfm-node-course     .wfm-node-header { background: #E1F5EE; color: #04342C; }
.wfm-node-stage      { border-color: #3B6D11; }
.wfm-node-stage      .wfm-node-header { background: #EAF3DE; color: #173404; }
.wfm-node-material   { border-color: #639922; }
.wfm-node-material   .wfm-node-header { background: #EAF3DE; color: #173404; }

/* ===== Static nodes (fixed system journey nodes — not editable) ===== */
.wfm-node-static-wrapper {
    cursor: default !important;
    user-select: none;
}
.wfm-node-static-wrapper:hover {
    box-shadow: none !important;
}
.wfm-node-static-wrapper .wfm-node-header--static {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
}
/* Default static node header — grey */
.wfm-node-static .wfm-node-header--static {
    background: #F1EFE8;
    color: #2C2C2A;
    border-color: #5F5E5A;
}
.wfm-node-static-wrapper.wfm-node-static {
    border-color: #5F5E5A;
    opacity: 0.9;
}
.wfm-static-lock {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.45;
    flex-shrink: 0;
}
.wfm-static-edit-btn {
    margin-left: auto;
    color: #534AB7;
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
}
.wfm-static-edit-btn:hover { opacity: 0.75; }

/* Status waterfall node colours */
.wfm-status-inactive .wfm-node-header--static { background: #FCEBEB; color: #A32D2D; border-color: #A32D2D; }
.wfm-node-static-wrapper.wfm-status-inactive  { border-color: #A32D2D; }

.wfm-status-member   .wfm-node-header--static { background: #EAF3DE; color: #3B6D11; border-color: #3B6D11; }
.wfm-node-static-wrapper.wfm-status-member    { border-color: #3B6D11; }

.wfm-status-learner  .wfm-node-header--static { background: #E1F5EE; color: #0F6E56; border-color: #0F6E56; }
.wfm-node-static-wrapper.wfm-status-learner   { border-color: #0F6E56; }

.wfm-status-signed   .wfm-node-header--static { background: #EEEDFE; color: #534AB7; border-color: #534AB7; }
.wfm-node-static-wrapper.wfm-status-signed    { border-color: #534AB7; }

.wfm-status-watching .wfm-node-header--static { background: #FAEEDA; color: #BA7517; border-color: #BA7517; }
.wfm-node-static-wrapper.wfm-status-watching  { border-color: #BA7517; }

.wfm-status-verified .wfm-node-header--static { background: #E6F1FB; color: #185FA5; border-color: #185FA5; }
.wfm-node-static-wrapper.wfm-status-verified  { border-color: #185FA5; }

.wfm-status-new      .wfm-node-header--static { background: #F1EFE8; color: #888780; border-color: #888780; }
.wfm-node-static-wrapper.wfm-status-new       { border-color: #888780; }

/* Static edge group — no pointer events (not interactive) */
.wfm-edge-group--static { pointer-events: none; }

/* ===== Node states ===== */
.wfm-state-published { border-left-width: 3px; border-left-color: #0F6E56 !important; }
.wfm-state-draft     { border-left-width: 3px; border-left-color: #BA7517 !important; opacity: 0.88; }
.wfm-state-error     { border-left-width: 3px; border-left-color: #A32D2D !important; }
.wfm-state-inactive  { opacity: 0.5; filter: grayscale(0.4); }

/* ===== Children (rendered inside parent when expanded) ===== */
.wfm-children {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--an-border);
}
.wfm-child {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    border-left: 2px solid;
    background: var(--an-surface2);
    font-size: 0.72rem;
    color: var(--an-text);
    cursor: pointer;
    transition: background .12s ease;
}
.wfm-child:hover { background: var(--an-bg); }
.wfm-child i.bi { font-size: 0.8rem; flex-shrink: 0; opacity: 0.85; }
.wfm-child-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfm-child-sub { font-size: 0.6rem; opacity: 0.6; }
.wfm-child--trigger    { border-left-color: #BA7517; }
.wfm-child--step       { border-left-color: #185FA5; }
.wfm-child--component  { border-left-color: #5F5E5A; }
.wfm-child--transition { border-left-color: #993C1D; }
.wfm-child--stage      { border-left-color: #3B6D11; }
.wfm-child--material   { border-left-color: #639922; }

/* ===== Edges (SVG paths) ===== */
/* Invisible thick hit-path for pointer events — companion to visual .wfm-edge */
.wfm-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 12;
    cursor: pointer;
    pointer-events: stroke;
}

/* Hover: brighten the visual sibling path via group selector */
.wfm-edge-group:hover .wfm-edge {
    stroke-width: 2.5;
    filter: brightness(1.4);
}

.wfm-edge { fill: none; stroke-width: 1.5; }
.wfm-edge-trigger,
.wfm-edge-gateflowkey       { stroke: #534AB7; stroke-dasharray: none; }
.wfm-edge-completedflowkeys { stroke: #534AB7; stroke-dasharray: 6 4; }
.wfm-edge-prerequisitecourse,
.wfm-edge-unlockedaftermat  { stroke: #0F6E56; stroke-dasharray: 6 4; }
.wfm-edge-structural        { stroke: #888780; stroke-dasharray: 3 5; stroke-width: 1; }
.wfm-edge-transitionfallback{ stroke: #BA7517; }
.wfm-edge-error             { stroke: #A32D2D; stroke-width: 2; }

/* ===== Palette (sidebar) ===== */
.wfm-palette-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--an-text-muted);
    padding: 0.3rem 0.5rem 0.15rem;
    font-weight: 600;
}
.wfm-palette-group { margin-bottom: 0.35rem; }
.wfm-palette-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--an-text);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}
.wfm-palette-header:hover { background: var(--an-surface2); }
.wfm-palette-count {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 0.05rem 0.35rem;
    background: var(--an-surface2);
    color: var(--an-text-muted);
    border-radius: 8px;
}
.wfm-palette-items {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.15rem 0.25rem 0.4rem;
}
.wfm-palette-item {
    display: block;
    padding: 0.35rem 0.5rem;
    background: var(--an-surface2);
    border: 1px solid var(--an-border);
    border-radius: 4px;
    color: var(--an-text);
    font-size: 0.72rem;
    text-decoration: none;
    cursor: grab;
    transition: border-color .12s ease;
}
.wfm-palette-item:hover { border-color: var(--an-accent); color: var(--an-text); }
.wfm-palette-item:active { cursor: grabbing; }
.wfm-palette-item-sub { font-size: 0.62rem; color: var(--an-text-muted); margin-top: 0.15rem; }
.wfm-palette-item--add {
    text-align: center;
    border-style: dashed;
    color: var(--an-text-muted);
}
.wfm-palette-item--add:hover { color: var(--an-accent); border-color: var(--an-accent); }
.wfm-palette-item--flow      { border-left: 3px solid #534AB7; }
.wfm-palette-item--course    { border-left: 3px solid #0F6E56; }
.wfm-palette-item--start     { border-left: 3px solid #888780; }
.wfm-palette-item--logic     { border-left: 3px solid #A32D2D; }

/* ===== Legend ===== */
.wfm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding: 0.4rem 0.85rem;
    border-top: 1px solid var(--an-border);
    background: var(--an-surface);
    font-size: 0.7rem;
    color: var(--an-text-muted);
    flex-shrink: 0;
}
.wfm-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.wfm-legend-line {
    display: inline-block;
    width: 22px; height: 2px;
    background: #534AB7;
    border-radius: 1px;
}
.wfm-legend-line--dashed {
    height: 0;
    border-top: 2px dashed #534AB7;
    background: transparent;
}
.wfm-legend-line--dotted {
    height: 0;
    border-top: 1px dotted #888780;
    background: transparent;
}
.wfm-legend-line--amber  { background: #BA7517; }
.wfm-legend-line--green-dashed {
    height: 0; border-top: 2px dashed #0F6E56; background: transparent;
}

/* Node-type dots in legend */
.wfm-legend-node {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; color: var(--an-text-muted);
}
.wfm-legend-node::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.wfm-legend-node--start::before   { background: #888780; }
.wfm-legend-node--flow::before    { background: #534AB7; }
.wfm-legend-node--course::before  { background: #0F6E56; }
.wfm-legend-node--trigger::before { background: #BA7517; }
.wfm-legend-node--step::before    { background: #185FA5; }
.wfm-legend-node--stage::before   { background: #3B6D11; }
.wfm-legend-node--material::before{ background: #639922; }

/* Separator between node legend and edge legend */
.wfm-legend-sep {
    display: inline-block; width: 1px; height: 12px;
    background: var(--an-border); margin: 0 0.2rem;
}

.wfm-legend-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.wfm-legend-info {
    font-size: 10px;
    color: var(--an-text-muted);
    cursor: help;
    margin-left: 3px;
}
.wfm-legend-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    width: 260px;
    background: var(--an-bg-card);
    border: 0.5px solid var(--an-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 8px 10px;
    font-size: 10px;
    color: var(--an-text-muted);
    line-height: 1.5;
    z-index: 200;
    pointer-events: none;
    white-space: normal;
}
.wfm-legend-tooltip-wrapper:hover .wfm-legend-tooltip {
    display: block;
}

/* Node type label inside header */
.wfm-node-type-label {
    font-size: 9px;
    font-weight: 500;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Inspector panel ===== */
.wfm-insp-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--an-text-muted);
    font-size: 0.78rem;
}
.wfm-insp-empty i.bi { font-size: 2rem; opacity: 0.4; margin-bottom: 0.5rem; }

.wfm-insp-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--an-border);
}
.wfm-insp-header i.bi { font-size: 1.1rem; }
.wfm-insp-header h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfm-insp-body { padding: 0.6rem 0.85rem; font-size: 0.78rem; color: var(--an-text); }
.wfm-insp-section { margin-bottom: 0.85rem; }
.wfm-insp-section h4 {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--an-text-muted);
    font-weight: 600;
}
.wfm-insp-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.18rem 0;
    border-bottom: 1px dashed var(--an-border);
    font-size: 0.74rem;
}
.wfm-insp-row:last-child { border-bottom: none; }
.wfm-insp-row > span:first-child { color: var(--an-text-muted); }
.wfm-insp-row code {
    font-size: 0.7rem;
    background: var(--an-surface2);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}

.wfm-insp-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.25rem; }
.wfm-insp-tag {
    font-size: 0.62rem;
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    background: var(--an-surface2);
    color: var(--an-text);
}
.wfm-insp-tags-label { font-size: 0.62rem; color: var(--an-text-muted); margin-right: 0.25rem; }
.wfm-insp-tag--ok {
    background: rgba(15, 110, 86, 0.15);
    color: #0F6E56;
    border-color: #0F6E56;
}
.wfm-insp-tag--danger {
    background: rgba(163, 45, 45, 0.15);
    color: #A32D2D;
    border-color: #A32D2D;
}
.wfm-insp-subtitle {
    font-size: 0.62rem;
    color: var(--an-text-muted);
    margin: 4px 0 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wfm-insp-trigger {
    padding: 0.35rem 0.4rem;
    border-left: 2px solid #BA7517;
    background: var(--an-surface2);
    border-radius: 3px;
    margin-bottom: 0.3rem;
}
.wfm-insp-trigger-meta { font-size: 0.66rem; color: var(--an-text-muted); margin-top: 0.15rem; }

.wfm-insp-steps { margin: 0; padding-left: 1rem; }
.wfm-insp-steps li { font-size: 0.74rem; padding: 0.1rem 0; }

.wfm-insp-warning {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
}
.wfm-insp-warning--warning { background: rgba(186,117,23,0.15); color: #BA7517; }
.wfm-insp-warning--error   { background: rgba(163,45,45,0.18);  color: #A32D2D; }

.wfm-insp-actions { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.85rem; }

.wfm-insp-desc {
    font-size: 11px;
    color: var(--an-text-muted);
    line-height: 1.6;
    padding: 4px 0;
    margin: 0;
}

/* ===== Loading / error fallbacks (canvas area) ===== */
.wfm-canvas-status {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--an-text-muted);
    font-size: 0.85rem;
}
.wfm-canvas-status--error { color: var(--an-danger); }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .wfm-shell { grid-template-columns: 200px 1fr 240px; }
}
@media (max-width: 900px) {
    .wfm-shell {
        grid-template-columns: 1fr;
        height: auto;
    }
    .wfm-sidebar, .wfm-inspector {
        border: none;
        border-top: 1px solid var(--an-border);
        max-height: 280px;
    }
}

/* ===== Workflow Map — Task155 (ports, modal, context menu, user states, components) ===== */

/* ── Ports (connection drag handles) ─────────────────────────────────── */
.wfm-port {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--an-surface);
    cursor: crosshair;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 10;
    background: #888780;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.wfm-node:hover .wfm-port,
.wfm-node.wfm-selected .wfm-port { opacity: 1; }
.wfm-port:hover { transform: scale(1.4); }

.wfm-port-in  { left:  -6px; top: 50%; margin-top: -6px; }
.wfm-port-out { right: -6px; top: 50%; margin-top: -6px; }

/* Output-port colour mirrors the node accent so the user knows it's draggable */
.wfm-node-flow   .wfm-port-out  { background: #534AB7; }
.wfm-node-course .wfm-port-out  { background: #0F6E56; }
.wfm-node-start  .wfm-port-out  { background: #888780; }

/* Temporary edge drawn while dragging from a port */
.wfm-temp-edge { fill: none; pointer-events: none; }

/* ── Connection-type modal ───────────────────────────────────────────── */
.wfm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.wfm-modal {
    background: var(--an-surface);
    color: var(--an-text);
    border: 1px solid var(--an-border);
    border-radius: 8px;
    width: 440px;
    max-width: 92vw;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    overflow: hidden;
}
.wfm-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 600;
    border-bottom: 1px solid var(--an-border);
}
.wfm-modal-header i.bi { font-size: 1.05rem; color: #534AB7; }
.wfm-modal-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--an-text-muted);
    font-size: 1.1rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.wfm-modal-close:hover { background: var(--an-surface2); color: var(--an-text); }

.wfm-modal-body { padding: 0.95rem; }
.wfm-modal-desc {
    font-size: 0.78rem;
    color: var(--an-text-muted);
    margin: 0 0 0.75rem;
}
.wfm-modal-desc strong { color: var(--an-text); }

.wfm-modal-options { display: flex; flex-direction: column; gap: 0.45rem; }
.wfm-modal-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--an-border);
    background: var(--an-surface2);
    color: var(--an-text);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.wfm-modal-option:hover {
    background: var(--an-bg);
    border-color: #534AB7;
}
.wfm-modal-option-name { font-size: 0.8rem; font-weight: 500; }
.wfm-modal-option-desc { font-size: 0.68rem; color: var(--an-text-muted); margin-top: 0.1rem; }

.wfm-edge-preview {
    display: inline-block;
    width: 44px; height: 0;
    border-top: 2px solid #534AB7;
    flex-shrink: 0;
}
.wfm-edge-preview--gateflowkey       { border-top: 2px solid #534AB7; }
.wfm-edge-preview--trigger           { border-top: 2px solid #534AB7; }
.wfm-edge-preview--completedflowkeys { border-top: 2px dashed #534AB7; }
.wfm-edge-preview--prerequisitecourse{ border-top: 2px dashed #0F6E56; }

/* ── Context menu (right-click) ──────────────────────────────────────── */
.wfm-context-menu {
    position: fixed;
    z-index: 999;
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    padding: 0.25rem 0;
    min-width: 170px;
}
.wfm-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--an-text);
    text-align: left;
}
.wfm-ctx-item:hover { background: var(--an-surface2); }
.wfm-ctx-item i.bi { font-size: 0.85rem; opacity: 0.85; }
.wfm-ctx-divider {
    height: 1px;
    background: var(--an-border);
    margin: 0.25rem 0;
}
.wfm-ctx-danger { color: var(--an-danger); }
.wfm-ctx-danger:hover { background: rgba(239,68,68,0.12); }
.wfm-ctx-label {
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    color: var(--an-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

/* ── User journey states ─────────────────────────────────────────────── */
.wfm-node.wfm-user-completed {
    background: #EAF3DE;
    border-color: #0F6E56;
}
.wfm-node.wfm-user-completed .wfm-node-header {
    background: #C0DD97;
    color: #173404;
}
.theme-dark .wfm-node.wfm-user-completed {
    background: rgba(15,110,86,0.18);
}
.theme-dark .wfm-node.wfm-user-completed .wfm-node-header {
    background: rgba(15,110,86,0.45);
    color: #EAF3DE;
}

.wfm-node.wfm-user-current {
    outline: 2px solid #534AB7;
    outline-offset: 3px;
    animation: wfm-pulse 2s ease-in-out infinite;
}
@keyframes wfm-pulse {
    0%, 100% { outline-offset: 3px; outline-color: #534AB7; }
    50%      { outline-offset: 5px; outline-color: #8B7BE5; }
}

.wfm-node.wfm-user-future { opacity: 0.5; }

/* ── User-view banner (when ?userId= present) ────────────────────────── */
.wfm-user-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(83, 74, 183, 0.1);
    border-bottom: 1px solid #534AB7;
    font-size: 0.78rem;
    color: var(--an-text);
}
.wfm-user-banner .wfm-badge { margin-left: 0.1rem; }
.wfm-user-banner .an-btn { margin-left: auto; }

/* ── Status milestone nodes (LeadStatus reached via set_attribute) ───── */
.wfm-node-status            { border-color: #5F5E5A; }
.wfm-node-status .wfm-node-header { background: #F1EFE8; color: #2C2C2A; }
.wfm-status-verified .wfm-node-header { background: #E6F1FB; color: #185FA5; }
.wfm-status-verified { border-color: #185FA5; }
.wfm-status-watching .wfm-node-header { background: #FAEEDA; color: #BA7517; }
.wfm-status-watching { border-color: #BA7517; }
.wfm-status-signed   .wfm-node-header { background: #EEEDFE; color: #534AB7; }
.wfm-status-signed   { border-color: #534AB7; }
.wfm-status-learner  .wfm-node-header { background: #E1F5EE; color: #0F6E56; }
.wfm-status-learner  { border-color: #0F6E56; }
.wfm-status-member   .wfm-node-header { background: #EAF3DE; color: #3B6D11; }
.wfm-status-member   { border-color: #3B6D11; }
.wfm-status-inactive .wfm-node-header { background: #FCEBEB; color: #A32D2D; }
.wfm-status-inactive { border-color: #A32D2D; }
.wfm-status-new      .wfm-node-header { background: #F1EFE8; color: #888780; }
.wfm-status-new      { border-color: #888780; }

/* ── Component category swatches (used by inline component children) ── */
.wfm-comp {
    border-left-width: 3px;
    border-left-style: solid;
}
.wfm-comp-pres    { background: #EEEDFE; color: #26215C; border-left-color: #534AB7; }
.wfm-comp-input   { background: #E6F1FB; color: #042C53; border-left-color: #185FA5; }
.wfm-comp-profile { background: #EAF3DE; color: #173404; border-left-color: #3B6D11; }
.wfm-comp-quiz    { background: #FAEEDA; color: #412402; border-left-color: #854F0B; }
.wfm-comp-int     { background: #FAECE7; color: #4A1B0C; border-left-color: #993C1D; }
.wfm-comp-logic   { background: #FCEBEB; color: #501313; border-left-color: #A32D2D; }
.wfm-comp-action  { background: #E1F5EE; color: #04342C; border-left-color: #0F6E56; }
.wfm-comp-learn   { background: #EAF3DE; color: #173404; border-left-color: #3B6D11; }
.wfm-comp-required {
    color: #A32D2D;
    font-weight: 600;
    margin-left: auto;
    font-size: 0.85rem;
}
.theme-dark .wfm-comp { color: var(--an-text); }
.theme-dark .wfm-comp-pres    { background: rgba(83,74,183,0.18); }
.theme-dark .wfm-comp-input   { background: rgba(24,95,165,0.18); }
.theme-dark .wfm-comp-profile { background: rgba(59,109,17,0.18); }
.theme-dark .wfm-comp-quiz    { background: rgba(133,79,11,0.18); }
.theme-dark .wfm-comp-int     { background: rgba(153,60,29,0.18); }
.theme-dark .wfm-comp-logic   { background: rgba(163,45,45,0.18); }
.theme-dark .wfm-comp-action  { background: rgba(15,110,86,0.18); }
.theme-dark .wfm-comp-learn   { background: rgba(59,109,17,0.18); }

/* ===== Builder Canvas — step cards & component rows ===== */
.ob-step-card {
    border: 1px solid var(--an-border); border-radius: 6px;
    margin-bottom: 0.75rem; background: var(--an-bg-card); overflow: hidden;
}
.ob-step-card--selected { border-color: var(--an-accent); }
.ob-step-header {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.6rem; background: var(--an-bg-secondary);
    cursor: pointer; font-size: 0.85rem;
}
.ob-step-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; overflow: hidden; }
.ob-step-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-step-note { font-size: 0.65rem; color: var(--an-text-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-drag-handle { cursor: grab; color: var(--an-text-muted); }
.ob-drag-handle-sm { cursor: grab; color: var(--an-text-muted); font-size: 0.75rem; flex-shrink: 0; }
.ob-icon-btn {
    background: none; border: none; cursor: pointer;
    color: var(--an-text-muted); padding: 0.15rem 0.25rem; border-radius: 3px; line-height: 1; flex-shrink: 0;
}
.ob-icon-btn:hover { color: var(--an-text); }
.ob-icon-btn--danger:hover { color: #f87171; }

/* ── Info panel (TriggersTab, etc.) ─────────────────────────────────────── */
.ob-info-panel {
    background: color-mix(in srgb, var(--an-accent) 8%, var(--an-surface));
    border: 1px solid color-mix(in srgb, var(--an-accent) 30%, transparent);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.ob-info-panel-header {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--an-accent);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ob-info-panel-body p { font-size: 0.82rem; color: var(--an-text-muted); margin: 0 0 0.5rem; }
.ob-info-panel-body ul { font-size: 0.82rem; color: var(--an-text-muted); padding-left: 1.2rem; margin: 0.25rem 0 0.5rem; }
.ob-info-priority { font-style: italic; }

/* single-column list for components */
.ob-step-components {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.4rem;
}
.ob-comp-row {
    display: flex; align-items: flex-start; gap: 0.3rem;
    padding: 0.3rem 0.35rem; border: 1px solid var(--an-border); border-radius: 4px;
    cursor: pointer; background: var(--an-bg-secondary); overflow: hidden;
    transition: border-color 0.12s;
}
.ob-comp-row:hover { border-color: var(--an-accent); }
.ob-comp-row--selected { border-color: var(--an-accent); background: rgba(59,130,246,0.08); }
.ob-comp-order {
    font-size: 0.65rem; font-weight: 700;
    color: var(--an-text-muted); min-width: 1rem; opacity: 0.6; flex-shrink: 0;
}
.ob-comp-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; overflow: hidden; }
.ob-comp-type {
    font-size: 0.68rem; font-weight: 600;
    background: rgba(59,130,246,0.12); color: var(--an-accent);
    border-radius: 3px; padding: 0.05rem 0.3rem; align-self: flex-start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ob-comp-key {
    font-size: 0.65rem; color: var(--an-text-muted); font-family: monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-comp-note {
    font-size: 0.65rem; color: var(--an-text-muted); font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Nav visibility editor (builder) ── */
.ob-nav-visibility {
    display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.25rem;
}
.ob-nav-item {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; cursor: pointer; user-select: none;
}
.ob-nav-item input[type="checkbox"] {
    accent-color: var(--an-accent);
    width: 14px; height: 14px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Builder (ob-layout): tablet ≤1200px ── */
@media (max-width: 1200px) {
    .ob-layout {
        grid-template-columns: 200px 1fr 280px;
    }
}

/* ── Builder (ob-layout): small screen ≤900px — single column ── */
@media (max-width: 900px) {
    .ob-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
        overflow: visible;
    }
    .ob-sidebar { border-right: none; border-bottom: 1px solid var(--an-border); max-height: 220px; }
    .ob-properties { border-left: none; border-top: 1px solid var(--an-border); }
}

/* ── Course Player: stack on tablet/mobile ≤768px ── */
@media (max-width: 768px) {
    .course-player {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: unset;
    }
    .course-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--an-border);
        max-height: 200px;
    }
}

/* ── Translations tab: stack on ≤768px ── */
@media (max-width: 768px) {
    .ob-translations-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        overflow: visible;
    }
    .ob-trans-steps-list {
        border-right: none;
        border-bottom: 1px solid var(--an-border);
        max-height: 180px;
    }
}

/* ============================================================
   RESPONSIVE Task065 — Onboarding runtime, landing, legal, share
   ============================================================ */

/* ── Onboarding card: full-screen on mobile ≤640px ── */
@media (max-width: 640px) {
    .onboarding-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        min-height: 100vh;
    }
    .onboarding-page {
        padding: 0;
        align-items: flex-start;
    }
}

/* ── Form inputs inside onboarding components: always full width ── */
.onboarding-component input,
.onboarding-component textarea,
.onboarding-component select {
    width: 100%;
    box-sizing: border-box;
}

/* ── Onboarding primary button: full width on mobile ≤480px ── */
@media (max-width: 480px) {
    .of-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ── Integration components: compact padding on mobile ≤480px ── */
@media (max-width: 480px) {
    .of-telegram-connect,
    .of-telegram-groups,
    .of-discord-join,
    .of-sponsor-gate,
    .of-broker-reg {
        padding: 0.75rem;
    }
}

/* ── Landing page: compact hero + full-width CTA on mobile ≤480px ── */
@media (max-width: 480px) {
    .landing-hero {
        padding: 2rem 0.75rem 1.5rem;
    }
    .landing-btn-primary {
        width: 100%;
        justify-content: center;
    }
    .landing-invited-by {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 0.75rem;
    }
}

/* ── Legal pages: edge-to-edge card on mobile ≤640px ── */
@media (max-width: 640px) {
    .legal-card {
        padding: 1.25rem 1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .legal-page {
        padding: 1rem 0;
    }
}

/* ── Share page: compact on mobile ≤480px ── */
@media (max-width: 480px) {
    .share-card {
        padding: 1.5rem 1rem;
    }
    .share-qr {
        width: 160px;
        height: 160px;
    }
}

/* ============================================================
   Task107 — Profile QR page (pqr-*) + Public Profile (pub-*)
   ============================================================ */

/* ── QR page ─────────────────────────────────────────────── */
.pqr-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    max-width: 420px;
    margin: 0 auto;
    overflow: hidden;
}
.pqr-tabs {
    display: flex;
    border-bottom: 1px solid var(--an-border);
}
.pqr-tab {
    flex: 1;
    padding: 0.75rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--an-text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.pqr-tab--active {
    color: var(--an-accent);
    border-bottom-color: var(--an-accent);
}
.pqr-body {
    padding: 1.5rem;
    text-align: center;
}
.pqr-qr {
    width: 280px;
    height: 280px;
    border-radius: 0.5rem;
    margin: 0 auto 1rem;
    display: block;
}
.pqr-url {
    font-size: 0.78rem;
    color: var(--an-text-muted);
    margin-bottom: 1rem;
    word-break: break-all;
}
.pqr-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Public profile page ─────────────────────────────────── */
.pub-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 2rem 1rem;
    background: var(--an-bg);
}
.pub-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 0.75rem;
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.pub-tenant-logo {
    max-height: 28px;
    margin-bottom: 1rem;
}
.pub-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--an-border);
    margin: 0 auto 0.75rem;
    display: block;
}
.pub-name {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
    color: var(--an-text);
}
.pub-location {
    font-size: 0.82rem;
    color: var(--an-text-muted);
    margin-bottom: 0.5rem;
}
.pub-bio {
    font-size: 0.85rem;
    color: var(--an-text-muted);
    margin: 0.5rem 0 1rem;
}
.pub-section {
    margin-top: 1rem;
    text-align: left;
}
.pub-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--an-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-align: center;
}
.pub-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    color: var(--an-text);
    text-decoration: none;
    font-size: 0.85rem;
}
.pub-row i { color: var(--an-text-muted); }
.pub-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}
.pub-social-link {
    color: var(--an-text-muted);
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.15s;
}
.pub-social-link:hover { color: var(--an-text); }
.pub-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.pub-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s;
}
.pub-cta--primary {
    background: var(--an-accent);
    color: var(--an-bg, #fff);
}
.pub-cta--primary:hover { filter: brightness(1.1); }
.pub-cta--secondary {
    background: var(--an-surface2);
    color: var(--an-text);
    border: 1px solid var(--an-border);
}
.pub-cta--secondary:hover { filter: brightness(1.1); }
.pub-footer {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--an-text-muted);
}
.pub-not-found {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--an-text-muted);
    gap: 0.5rem;
    font-size: 0.9rem;
}
.pub-not-found i { font-size: 3rem; }

/* ── WorkflowMap: Split-panel (Task156) ───────────────────────────────────── */
.wfm-panel-overlay {
    position: relative;
    overflow: hidden;
    height: 100%;
}
.wfm-panel-overlay--open {
    /* width controlled by --wfm-panel-w on .wfm-shell */
}
.wfm-panel-resize-handle {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--an-border);
    cursor: col-resize;
    z-index: 10;
    transition: background .15s;
}
.wfm-panel-resize-handle:hover,
.wfm-panel-resize-handle:active { background: #534AB7; }
.wfm-panel {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--an-bg);
    border-left: 0.5px solid var(--an-border);
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wfm-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--an-border);
    background: var(--an-surface);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}
.wfm-panel-title { flex: 1; }
.wfm-panel-unsaved { font-size: 11px; color: #BA7517; }
.wfm-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--an-text-muted);
    font-size: 14px;
    padding: 4px;
    border-radius: 4px;
}
.wfm-panel-close:hover { background: var(--an-surface2); color: var(--an-text); }
.wfm-panel-tabs {
    display: flex;
    border-bottom: 0.5px solid var(--an-border);
    background: var(--an-surface);
    flex-shrink: 0;
    overflow-x: auto;
}
.wfm-panel-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 11px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--an-text-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.wfm-panel-tab:hover { color: var(--an-text); }
.wfm-panel-tab.active { color: #534AB7; border-bottom-color: #534AB7; }
.wfm-panel-content { flex: 1; overflow: auto; position: relative; }
.wfm-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--an-text-muted);
    font-size: 13px;
    gap: 8px;
}
.wfm-panel-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-top: 0.5px solid var(--an-border);
    background: var(--an-surface);
    flex-shrink: 0;
}
.ob-layout--panel {
    height: 100%;
    display: grid;
    grid-template-columns: 180px 1fr 220px;
    overflow: hidden;
}

/* ===== Tooltip — CustomField checkboxes ===== */
.wfm-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wfm-tooltip-icon {
    color: var(--an-text-muted);
    font-size: 12px;
    cursor: help;
    flex-shrink: 0;
}

.wfm-tooltip-icon:hover + .wfm-tooltip-text,
.wfm-tooltip-wrapper:hover .wfm-tooltip-text {
    display: block;
}

.wfm-tooltip-text {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    width: 280px;
    background: var(--an-surface);
    border: 0.5px solid var(--an-border);
    border-radius: var(--an-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 8px 10px;
    font-size: 11px;
    color: var(--an-text-muted);
    line-height: 1.5;
    z-index: 100;
    pointer-events: none;
}
.ob-sidebar--compact { font-size: 11px; overflow-y: auto; }
.ob-properties--compact { font-size: 11px; overflow-y: auto; border-left: 1px solid var(--an-border); }

/* WorkflowMap — drop-target highlight during port drag */
.wfm-node.wfm-drop-target {
    outline: 2px solid #534AB7;
    outline-offset: 3px;
}
.wfm-node.wfm-drop-target .wfm-port-in {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.5) !important;
    background: #534AB7 !important;
}

/* ============================================================
   Landing Page Section Builder (Task167) — lp-* classes
   ============================================================ */
.lp-page { color: var(--an-text, #2C2C2A); line-height: 1.55; }
.lp-header { padding: 20px 24px; text-align: center; }
.lp-logo { max-height: 48px; max-width: 240px; object-fit: contain; }

.lp-section { width: 100%; }
.lp-section--pad-sm { padding: 24px 16px; }
.lp-section--pad-md { padding: 48px 24px; }
.lp-section--pad-lg { padding: 80px 24px; }

.lp-section-grid { max-width: 1100px; margin: 0 auto; display: grid; gap: 24px; }
.lp-cols-1 { grid-template-columns: 1fr; }
.lp-cols-2 { grid-template-columns: 1fr 1fr; }
.lp-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.lp-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .lp-cols-2, .lp-cols-3, .lp-cols-4 { grid-template-columns: 1fr; }
}

.lp-block { box-sizing: border-box; }

/* Hero */
.lp-block-hero { text-align: center; padding: 60px 24px; border-radius: 12px; color: #fff; }
.lp-block-hero .lp-hero-title    { font-size: 2.5rem; font-weight: 700; margin: 0 0 12px; }
.lp-block-hero .lp-hero-subtitle { font-size: 1.15rem; opacity: 0.92; margin: 0 0 24px; }

/* Feature */
.lp-block-feature { text-align: center; padding: 24px; }
.lp-block-feature .lp-feature-icon  { font-size: 2.5rem; color: var(--lp-brand); display: block; margin-bottom: 12px; }
.lp-block-feature .lp-feature-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
.lp-block-feature .lp-feature-desc  { font-size: 0.92rem; opacity: 0.78; margin: 0; }

/* Stat */
.lp-block-stat { text-align: center; padding: 24px; }
.lp-block-stat .lp-stat-value { font-size: 2.75rem; font-weight: 700; color: var(--lp-brand); line-height: 1; }
.lp-block-stat .lp-stat-label { font-size: 0.88rem; opacity: 0.78; margin-top: 8px; }

/* Text */
.lp-block-text { font-size: 1rem; }
.lp-block-text p { margin: 0 0 0.85rem; }

/* Image */
.lp-block-image { display: block; }
.lp-block-image img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* Video */
.lp-block-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.lp-block-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Testimonial */
.lp-block-testimonial {
    padding: 24px;
    border-left: 3px solid var(--lp-brand);
    background: rgba(0,0,0,0.02);
    border-radius: 0 8px 8px 0;
}
.lp-block-testimonial blockquote { font-style: italic; margin: 0 0 16px; }
.lp-testimonial-author { display: flex; align-items: center; gap: 12px; }
.lp-testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lp-testimonial-name   { font-weight: 600; }
.lp-testimonial-role   { font-size: 0.82rem; opacity: 0.7; }

/* CTA */
.lp-block-cta { text-align: center; padding: 40px 24px; border-radius: 12px; color: #fff; }
.lp-block-cta .lp-cta-title    { font-size: 1.85rem; font-weight: 700; margin: 0 0 12px; }
.lp-block-cta .lp-cta-subtitle { font-size: 1.05rem; opacity: 0.92; margin: 0 0 20px; }

/* FAQ */
.lp-block-faq { border-bottom: 0.5px solid rgba(0,0,0,0.12); padding: 12px 0; }
.lp-block-faq summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.lp-faq-answer { padding: 10px 4px 0; opacity: 0.82; }

/* Sponsor field */
.lp-block-sponsor-field { display: flex; gap: 8px; align-items: center; padding: 8px 0; }
.lp-sponsor-field-label { font-size: 0.8rem; opacity: 0.65; text-transform: uppercase; }
.lp-sponsor-field-value { font-weight: 600; }

/* Spacer */
.lp-block-spacer { width: 100%; }

/* CTA button (shared by hero / cta blocks) */
.lp-btn-primary {
    display: inline-block;
    padding: 14px 28px;
    background: var(--lp-brand);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity .15s ease;
}
.lp-btn-primary:hover { opacity: 0.88; }