.u-hidden { display: none; }
.u-inherit { color: inherit; }
.u-nowrap { white-space: nowrap; }
.u-bold { font-weight: 700; }
.u-center { text-align: center; }
.u-between { justify-content: space-between; }
.u-end { justify-content: flex-end; }
.u-centered { justify-content: center; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-push-right { margin-left: auto; }
.u-wrap { flex-wrap: wrap; }
.u-col { display: flex; flex-direction: column; }
.u-flex { display: flex; }
.u-inline-block { display: inline-block; }
.u-pointer { cursor: pointer; }
.u-no-select { user-select: none; }
.u-mono-wide { font-family: var(--mono); letter-spacing: 1px; }

.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

.u-mt-1 { margin-top: var(--space-2); }
.u-mt-2 { margin-top: var(--space-4); }
.u-mt-3 { margin-top: var(--space-5); }
.u-mt-4 { margin-top: var(--space-7); }
.u-mb-1 { margin-top: 0; margin-bottom: var(--space-2); }
.u-mb-2 { margin-bottom: var(--space-3); }
.u-mb-3 { margin-bottom: var(--space-4); }
.u-mb-4 { margin-bottom: var(--space-8); }
.u-mx-auto { margin-left: auto; margin-right: auto; }

.u-fs-xs { font-size: var(--fs-2xs); }
.u-fs-sm { font-size: var(--fs-sm); }
.u-fs-md { font-size: var(--fs-md); }
.u-fs-lg { font-size: var(--fs-xl); }
.u-fs-xl { font-size: var(--fs-5xl); }

.u-w-160 { max-width: 160px; }
.u-w-220 { max-width: 220px; }
.u-w-440 { max-width: 440px; }
.u-w-540 { max-width: 540px; }
.u-w-560 { max-width: 560px; }
.u-w-660 { max-width: 660px; }
.u-min-220 { min-width: 220px; }

.u-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.u-checkbox {
    width: auto;
    margin: 0;
    cursor: pointer;
    flex: none;
}

.u-checkbox-top { margin-top: 3px; }

.u-note {
    text-align: center;
    font-size: var(--fs-2xs);
    color: var(--neutral-slate-500);
}

.u-note-lg {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--neutral-slate-400);
}

.u-prose {
    font-size: var(--fs-base);
    color: var(--neutral-slate-300);
    line-height: 1.6;
}

.u-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
}

.u-shell-wide {
    max-width: 1040px;
    margin: 0 auto;
    padding: 48px var(--space-5) 64px;
}

.u-band {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.u-signal { color: var(--signal); }
.u-accent { color: var(--dark-secondary); }

.u-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.u-offscreen {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.public-legal {
    text-align: center;
    margin: 18px auto 0;
    font-size: var(--fs-2xs);
    color: var(--neutral-slate-500);
}

.public-legal a { color: inherit; }

.modal-sm { max-width: 440px; }
.modal-copy { margin: 0 0 var(--space-4); font-size: var(--fs-md); line-height: 1.5; }
.modal-actions { justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.card-note { padding: var(--space-5) 22px; }
.loading-block-sk { padding: 0; display: block; }

.sys-bar {
    padding: 8px var(--space-4);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 900;
}

.sys-bar-impersonation {
    background: var(--warning-secondary);
    color: var(--ink);
}

.sys-bar-lockdown {
    background: var(--error-secondary);
    color: var(--white);
    border-bottom: 1px solid var(--error-primary);
}

.sys-bar-support {
    background: var(--info-secondary);
    color: var(--white);
    border-bottom: 1px solid var(--info-primary);
    font-weight: 500;
}

.sys-bar-action {
    background: var(--black-40);
    color: var(--white);
    border: none;
    padding: 5px var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-2xs);
}

.brand-mark .bm-w {
    stroke-dasharray: 110.5;
    animation: bm-draw 1.05s cubic-bezier(.45, 0, .2, 1) 1;
}
.brand-mark .bm-thread {
    stroke-dasharray: 34 8;
    animation: bm-fade .45s ease-out .7s backwards, bm-flow 2.6s linear .7s infinite;
}
@keyframes bm-draw { from { stroke-dashoffset: 110.5; } to { stroke-dashoffset: 0; } }
@keyframes bm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -42; } }
@media (prefers-reduced-motion: reduce) {
    .brand-mark .bm-w { animation: none; }
    .brand-mark .bm-thread { stroke-dasharray: none; animation: none; }
}

.bg-blob-a { fill: var(--bg-blob-primary); }
.bg-blob-b { fill: var(--bg-blob-steel); }
.bg-blob-c { fill: var(--bg-blob-primary-soft); }
.bg-dot-a { fill: var(--dark-primary); }
.bg-dot-b { fill: var(--dark-400); }
.bg-dot-c { fill: var(--dark-accent-2); }
.bg-dot-d { fill: var(--text); }