/* ═══════════════════════════════════════════════════════════════════
   Admin Panel — Komponenten & Doku-Helper
   Erweitert das Fairy-Aurora-Design-System um administrative Patterns.
   Tone-Aliases (--tone-cyan/pink/purple) und Severity-Tokens
   (--sev-info-color, --sev-warning-color, --sev-critical-color,
   --sev-danger-color, --sev-success-color, --sev-neutral-color) sind
   in fairy-aurora.css definiert (Light + Dark + System).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tone-Aliases (Helper, nicht-token) ─────────────────────── */
.ds-admin-ia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ds-admin-ia-card {
    --grp: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}
.ds-admin-ia-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grp);
}
.ds-admin-ia-card header {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.005em;
}
.ds-admin-ia-card header i {
    color: var(--grp);
    font-size: 14px;
}
.ds-admin-ia-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--fg-2);
    line-height: 1.85;
}
.ds-admin-ia-card li {
    padding-left: 12px;
    position: relative;
}
.ds-admin-ia-card li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 4px; height: 1px;
    background: var(--fg-3);
}

/* ══════════════════════════════════════════════════════════════
   Hub-Layout — .fa-admin-hub / __search / -group / -grid / __empty
   ══════════════════════════════════════════════════════════════ */
.fa-admin-hub {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.fa-admin-hub__search {
    position: relative;
    max-width: 520px;
}
.fa-admin-hub__search > .bi {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-3);
    font-size: 16px;
    pointer-events: none;
}
.fa-admin-hub__search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--fg);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fa-admin-hub__search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--tone-cyan-rgb), .15);
}

.fa-admin-hub-group {
    --grp: var(--primary);
}
.fa-admin-hub-group[data-tone="cyan"]   { --grp: var(--tone-cyan); }
.fa-admin-hub-group[data-tone="pink"]   { --grp: var(--tone-pink); }
.fa-admin-hub-group[data-tone="purple"] { --grp: var(--tone-purple); }

.fa-admin-hub-group__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.fa-admin-hub-group__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--grp) 12%, transparent);
    color: var(--grp);
    border: 1px solid color-mix(in oklab, var(--grp) 22%, transparent);
    border-radius: var(--r-md);
    font-size: 18px;
}
.fa-admin-hub-group__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}
.fa-admin-hub-group__desc {
    font-size: 13px;
    color: var(--fg-3);
    margin: 0;
    line-height: 1.4;
}

.fa-admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.fa-admin-hub__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--fg-3);
    text-align: center;
}
.fa-admin-hub__empty:not([hidden]) {
    display: flex;
}
.fa-admin-hub__empty .bi {
    font-size: 28px;
    color: var(--fg-3);
    opacity: .55;
}
.fa-admin-hub__empty p {
    margin: 0;
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   Hub-Card — .fa-admin-hub-card
   ══════════════════════════════════════════════════════════════ */
.ds-admin-hub-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.fa-admin-hub-card {
    --tone: var(--tone-cyan);
    --tone-tint: rgba(var(--tone-cyan-rgb), 0.10);
    --tone-bd: rgba(var(--tone-cyan-rgb), 0.22);
    --tone-glow: rgba(var(--tone-cyan-rgb), 0.35);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    overflow: hidden;
    min-height: 132px;
}
.fa-admin-hub-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--tone);
    transition: width var(--t-fast) var(--ease-out);
}
.fa-admin-hub-card:hover {
    transform: translateY(-1px);
    border-color: var(--tone);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06),
                0 0 0 1px var(--tone-glow);
}
.fa-admin-hub-card:hover::before { width: 4px; }

/* Tone variants */
.fa-admin-hub-card[data-tone="cyan"]   { --tone: var(--tone-cyan);   --tone-tint: rgba(var(--tone-cyan-rgb), .10);   --tone-bd: rgba(var(--tone-cyan-rgb), .22);   --tone-glow: rgba(var(--tone-cyan-rgb), .30); }
.fa-admin-hub-card[data-tone="pink"]   { --tone: var(--tone-pink);   --tone-tint: rgba(var(--tone-pink-rgb), .10);   --tone-bd: rgba(var(--tone-pink-rgb), .24);   --tone-glow: rgba(var(--tone-pink-rgb), .30); }
.fa-admin-hub-card[data-tone="purple"] { --tone: var(--tone-purple); --tone-tint: rgba(var(--tone-purple-rgb), .10); --tone-bd: rgba(var(--tone-purple-rgb), .24); --tone-glow: rgba(var(--tone-purple-rgb), .30); }

.fa-admin-hub-card__chip {
    width: 32px; height: 32px;
    border-radius: var(--r-lg);
    background: var(--tone-tint);
    border: 1px solid var(--tone-bd);
    color: var(--tone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}
.fa-admin-hub-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.fa-admin-hub-card__desc {
    font-size: 12px;
    color: var(--fg-2);
    line-height: 1.45;
    margin: 0 0 12px;
    flex: 1;
}
.fa-admin-hub-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fg-3);
}
.fa-admin-hub-card__foot i {
    margin-left: auto;
    color: var(--tone);
    transition: transform var(--t-fast) var(--ease-out);
}
.fa-admin-hub-card:hover .fa-admin-hub-card__foot i { transform: translateX(2px); }

.fa-admin-hub-card__count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--fg-2);
}
.fa-admin-hub-card__badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: var(--tone-tint);
    color: var(--tone);
    border: 1px solid var(--tone-bd);
}
.fa-admin-hub-card__badge--cyan   { background: rgba(var(--tone-cyan-rgb), .10);   color: var(--tone-cyan-strong);   border-color: rgba(var(--tone-cyan-rgb), .22); }
.fa-admin-hub-card__badge--pink   { background: rgba(var(--tone-pink-rgb), .10);   color: var(--tone-pink-strong);   border-color: rgba(var(--tone-pink-rgb), .24); }
.fa-admin-hub-card__badge--purple { background: rgba(var(--tone-purple-rgb), .10); color: var(--tone-purple-strong); border-color: rgba(var(--tone-purple-rgb), .24); }

html[data-theme="dark"] .fa-admin-hub-card__count { background: rgba(255,255,255,.06); color: var(--fg-2); }

/* ══════════════════════════════════════════════════════════════
   Admin-Page-Layout-Mock (Doku-only)
   ══════════════════════════════════════════════════════════════ */
.ds-admin-page-mock {
    background: var(--surface);
    font-size: 12.5px;
}
.ds-admin-page-mock__breadcrumb {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--fg-3);
    display: flex;
    gap: 8px;
    align-items: center;
}
.ds-admin-page-mock__breadcrumb strong { color: var(--fg); }
.ds-admin-page-mock__breadcrumb .sep { opacity: 0.5; }

.ds-admin-page-mock__header {
    padding: 18px 20px 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    border-bottom: 1px solid var(--border);
}
.ds-admin-page-mock__header::after {
    content: '';
    position: absolute;
    left: 20px; bottom: -1px;
    width: 60px; height: 2px;
    background: var(--brand-gradient-line);
    border-radius: var(--r-xs);
}
.ds-admin-page-mock__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 6px;
}
.ds-admin-page-mock__header h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.ds-admin-page-mock__header p {
    margin: 0;
    font-size: 12.5px;
    color: var(--fg-2);
}
.ds-admin-page-mock__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ds-admin-page-mock__toolbar {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.ds-admin-page-mock__chips {
    display: flex;
    gap: 6px;
}
.ds-admin-page-mock__chips .chip {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--fg-2);
    cursor: default;
}
.ds-admin-page-mock__chips .chip.is-active {
    background: var(--primary-tint);
    border-color: var(--primary);
    color: var(--primary-strong);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.ds-admin-page-mock__search {
    margin-left: auto;
    padding: 5px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 11.5px;
    color: var(--fg-3);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 180px;
}

.ds-admin-page-mock__body { padding: 4px 0; }
.ds-admin-page-mock__row {
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}
.ds-admin-page-mock__row:last-child { border-bottom: none; }
.ds-admin-page-mock__row .avatar {
    width: 32px; height: 32px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--tone-cyan), var(--tone-purple));
    color: var(--on-primary);
    font-weight: 700;
    font-size: 11.5px;
    display: grid;
    place-items: center;
}
.ds-admin-page-mock__row strong {
    display: block;
    color: var(--fg);
    font-weight: 600;
}
.ds-admin-page-mock__row small {
    display: block;
    color: var(--fg-3);
    font-size: 11px;
    font-family: var(--font-mono);
    margin-top: 2px;
}
.ds-admin-page-mock__row .role {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--fg-2);
    border: 1px solid var(--border);
}
.ds-admin-page-mock__row .status {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--r-pill);
}
.status--ok  { background: var(--success-bg); color: var(--success-strong); }
.status--err { background: var(--danger-bg);  color: var(--danger-strong); }

/* Mock buttons (Doku-only) */
.ds-mock-btn {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all var(--t-fast) var(--ease-out);
}
.ds-mock-btn:hover { border-color: var(--primary); }
.ds-mock-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 0 8px var(--primary-glow);
}
.ds-mock-btn--ghost { background: transparent; }
.ds-mock-btn--danger {
    background: var(--surface);
    border-color: rgba(var(--sev-danger-rgb), 0.4);
    color: var(--danger-strong);
}
.ds-mock-btn--danger:hover { background: var(--danger-bg); }

/* ══════════════════════════════════════════════════════════════
   Permission-Matrix — .fa-perm-matrix
   ══════════════════════════════════════════════════════════════ */
.fa-perm-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: var(--surface);
}
.fa-perm-matrix thead th {
    background: var(--surface-2);
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-3);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
}
.fa-perm-matrix tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
}
.fa-perm-matrix tbody td:first-child { font-weight: 600; }
.fa-perm-matrix tbody tr:last-child td { border-bottom: none; }
.fa-perm-matrix tbody tr:hover td { background: var(--surface-2); }

.role-tag {
    --c: var(--primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-xs);
    color: var(--c);
    background: color-mix(in oklab, var(--c) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 25%, transparent);
    text-transform: none;
    letter-spacing: 0.02em;
}

.perm {
    --c: var(--primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c);
    background: color-mix(in oklab, var(--c) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 22%, transparent);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    display: inline-block;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Audit-Log-Row — .fa-audit-row
   ══════════════════════════════════════════════════════════════ */
.fa-audit-feed {
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.fa-audit-row {
    display: grid;
    grid-template-columns: 110px 14px minmax(120px, 1fr) auto minmax(140px, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    border-left: 3px solid transparent;
}
.fa-audit-row:last-child { border-bottom: none; }
.fa-audit-row:hover { background: var(--surface-2); }

.fa-audit-row__ts {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.fa-audit-row__sev {
    width: 8px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary);
}
.fa-audit-row__sev--info     { background: var(--sev-info-color);     box-shadow: 0 0 6px rgba(var(--sev-info-rgb), .6); }
.fa-audit-row__sev--warning  { background: var(--sev-warning-color);  box-shadow: 0 0 6px rgba(var(--sev-warning-rgb), .6); }
.fa-audit-row__sev--critical { background: var(--sev-critical-color); box-shadow: 0 0 8px rgba(var(--sev-critical-rgb), .7); }
.fa-audit-row__sev--danger   { background: var(--sev-danger-color);   box-shadow: 0 0 8px rgba(var(--sev-danger-rgb), .7); }

.fa-audit-row__actor {
    font-weight: 600;
    color: var(--fg);
}
.fa-audit-row__action {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--primary-tint);
    color: var(--primary-strong);
    padding: 2px 7px;
    border-radius: var(--r-xs);
    border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
}
.fa-audit-row__target {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
}
.fa-audit-row__hash {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    margin-left: auto;
    letter-spacing: 0.04em;
}
.fa-audit-row__pill {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: rgba(var(--tone-purple-rgb), 0.12);
    color: var(--tone-purple-strong);
    border: 1px solid rgba(var(--tone-purple-rgb), 0.28);
}

.fa-audit-row--sealed {
    border-left-color: var(--tone-purple);
    background: linear-gradient(90deg, rgba(var(--tone-purple-rgb), .04) 0%, transparent 40%);
}
.fa-audit-row--failed {
    border-left-color: var(--sev-danger-color);
}

/* ══════════════════════════════════════════════════════════════
   API-Key-Row — .fa-api-key
   ══════════════════════════════════════════════════════════════ */
.fa-api-key {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 8px;
}
.fa-api-key:last-child { margin-bottom: 0; }

.fa-api-key__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fa-api-key__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.005em;
}
.fa-api-key__token {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 4px 9px;
    border-radius: var(--r-sm);
    color: var(--primary-strong);
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fa-api-key__token span {
    color: var(--fg-3);
    letter-spacing: 0.05em;
    margin-left: 2px;
}
.fa-api-key__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11px;
    color: var(--fg-3);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.fa-api-key__meta i { margin-right: 3px; }

.fa-api-key__state {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.fa-api-key__state--ok   { background: var(--success-bg); color: var(--success-strong); }
.fa-api-key__state--warn { background: var(--warning-bg); color: var(--warning-strong); }
.fa-api-key__state--err  { background: var(--danger-bg);  color: var(--danger-strong); }

/* ══════════════════════════════════════════════════════════════
   System-Health-Tile — .fa-svc-tile
   ══════════════════════════════════════════════════════════════ */
.ds-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.fa-svc-tile {
    --state-color: var(--sev-success-color);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    position: relative;
}
.fa-svc-tile[data-state="ok"]   { --state-color: var(--sev-success-color); }
.fa-svc-tile[data-state="warn"] { --state-color: var(--sev-warning-color); }
.fa-svc-tile[data-state="err"]  { --state-color: var(--sev-danger-color); }
.fa-svc-tile[data-state="off"]  { --state-color: var(--sev-neutral-color); }

.fa-svc-tile header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.005em;
    margin-bottom: 10px;
}
.fa-svc-tile header .dot {
    width: 8px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--state-color);
    box-shadow: 0 0 6px var(--state-color);
    flex-shrink: 0;
}
.fa-svc-tile .metrics {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 6px;
}
.fa-svc-tile .metrics span:first-child { color: var(--state-color); }
.fa-svc-tile .detail {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════
   Callout-Variant (re-used here)
   ══════════════════════════════════════════════════════════════ */
.ds-callout {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--fg-3);
    border-radius: var(--r-md);
    font-size: 12.5px;
    color: var(--fg-2);
    line-height: 1.55;
}
.ds-callout strong { color: var(--fg); }
.ds-callout--info {
    border-left-color: var(--primary);
    background: var(--primary-tint);
}
.ds-callout--info strong { color: var(--primary-strong); }
.ds-link {
    color: var(--primary-strong);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary);
}
.ds-link:hover { border-bottom-style: solid; }

/* ══════════════════════════════════════════════════════════════
   Skeleton — .fa-skel
   ══════════════════════════════════════════════════════════════ */
@keyframes fa-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.fa-skel {
    display: block;
    border-radius: var(--r-sm);
    background:
        linear-gradient(90deg,
            var(--surface-2) 0%,
            color-mix(in oklab, var(--surface-2) 60%, var(--fg-3) 8%) 50%,
            var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: fa-skel-shimmer 1.6s ease-in-out infinite;
    height: 12px;
    width: 100%;
}
.fa-skel--text   { height: 12px; }
.fa-skel--avatar { width: 32px; height: 32px; border-radius: var(--r-lg); flex-shrink: 0; }
.fa-skel--card   { height: 132px; border-radius: var(--r-md); }
.fa-skel--row    { height: 56px;  border-radius: var(--r-md); }
.fa-skel--matrix { height: 240px; border-radius: var(--r-md); }

.fa-skel-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}
.fa-skel-row:last-child { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
    .fa-skel { animation: none; opacity: 0.7; }
}

/* ══════════════════════════════════════════════════════════════
   Confirm-Dialog — .fa-confirm
   ══════════════════════════════════════════════════════════════ */
.ds-confirm-stage {
    position: relative;
    min-height: 360px;
    display: grid;
    place-items: center;
    padding: 32px 24px;
    overflow: hidden;
}
.ds-confirm-stage__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(var(--tone-cyan-rgb), .05), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(var(--tone-pink-rgb), .05), transparent 50%);
    pointer-events: none;
}
.ds-confirm-stage__shadow1,
.ds-confirm-stage__shadow2 {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
.ds-confirm-stage__shadow1 {
    width: 60%; height: 80px; top: 18%; left: 12%;
    opacity: 0.4;
}
.ds-confirm-stage__shadow2 {
    width: 40%; height: 60px; bottom: 18%; right: 14%;
    opacity: 0.3;
}

.fa-confirm {
    --tone: var(--sev-danger-color);
    --tone-tint: rgba(var(--sev-danger-rgb), 0.10);
    --tone-bd: rgba(var(--sev-danger-rgb), 0.28);
    position: relative;
    width: 460px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--tone);
    border-radius: var(--r-md);
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.18),
        0 0 0 1px var(--tone-bd);
    padding: 22px;
    z-index: 2;
}
.fa-confirm[data-tone="warn"]    { --tone: var(--sev-warning-color); --tone-tint: rgba(var(--sev-warning-rgb), .10); --tone-bd: rgba(var(--sev-warning-rgb), .26); }
.fa-confirm[data-tone="danger"]  { --tone: var(--sev-danger-color);  --tone-tint: rgba(var(--sev-danger-rgb), .10);  --tone-bd: rgba(var(--sev-danger-rgb), .28); }
.fa-confirm[data-tone="nuclear"] { --tone: var(--danger-strong);     --tone-tint: rgba(var(--danger-rgb), .14);      --tone-bd: rgba(var(--danger-rgb), .34); }

.fa-confirm__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.fa-confirm__icon {
    width: 38px; height: 38px;
    border-radius: var(--r-lg);
    background: var(--tone-tint);
    border: 1px solid var(--tone-bd);
    color: var(--tone);
    display: grid; place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.fa-confirm__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 4px;
}
.fa-confirm__sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-2);
}
.fa-confirm__sub code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    border: 1px solid var(--border);
    color: var(--fg);
}

.fa-confirm__diff {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 14px;
}
.fa-confirm__diff-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--fg-2);
}
.fa-confirm__diff-row strong {
    color: var(--fg);
    font-weight: 700;
}

.fa-confirm__field {
    display: block;
    margin-bottom: 16px;
}
.fa-confirm__field span {
    display: block;
    font-size: 11.5px;
    color: var(--fg-2);
    margin-bottom: 6px;
}
.fa-confirm__field span code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--tone-tint);
    color: var(--tone);
    padding: 1px 6px;
    border-radius: var(--r-xs);
    border: 1px solid var(--tone-bd);
    font-weight: 700;
}
.fa-confirm__field input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font-mono);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--fg);
    outline: none;
    transition: border-color var(--t-fast) var(--ease-out);
}
.fa-confirm__field input:focus {
    border-color: var(--tone);
    box-shadow: 0 0 0 3px var(--tone-tint);
}

.fa-confirm__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
    padding-top: 14px;
}
.ds-mock-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   Audit-Log-Item — .audit-log-item (Detail/History Card-Variant)
   Light + Dark via Aurora tokens only. Use in audit_log/detail
   and audit_log/entity_history. For compact log-rows in tables
   keep using .fa-audit-row above.
   ══════════════════════════════════════════════════════════════ */
.audit-log-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audit-log-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--fg-3);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow  var(--t-fast) var(--ease-out);
}
.audit-log-item:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.audit-log-item__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    color: var(--fg-3);
    font-size: 18px;
    flex-shrink: 0;
}

.audit-log-item__head {
    grid-column: 2;
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 4px;
    min-width: 0;
}
.audit-log-item__actor {
    font: 600 14px var(--font-sans);
    color: var(--fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-log-item__action {
    font: 600 10.5px var(--font-mono);
    color: var(--accent-strong);
    background: var(--accent-tint);
    border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}
.audit-log-item__ts {
    font: 500 11.5px var(--font-mono);
    color: var(--fg-3);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-log-item__body {
    grid-column: 2;
    min-width: 0;
}
.audit-log-item__entity {
    font: 500 13px var(--font-sans);
    color: var(--fg-2);
    margin-bottom: 6px;
}
.audit-log-item__entity code {
    font: 600 12px var(--font-mono);
    color: var(--primary-strong);
    background: var(--primary-tint);
    border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
    padding: 1px 7px;
    border-radius: var(--r-sm);
}
.audit-log-item__desc {
    font: 400 13px/1.5 var(--font-sans);
    color: var(--fg-2);
    margin: 4px 0 8px;
}
.audit-log-item__meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font: 500 11px var(--font-mono);
    color: var(--fg-3);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.audit-log-item__meta-cell {
    display: inline-flex; align-items: center; gap: 5px;
}
.audit-log-item__meta-cell i { font-size: 12px; opacity: 0.7; }
.audit-log-item__hash {
    margin-left: auto;
    color: var(--fg-3);
    font-feature-settings: "tnum";
}

/* Tone Variants — border-left + icon-bg/-color */
.audit-log-item--create { border-left-color: var(--success); }
.audit-log-item--create .audit-log-item__icon {
    background: color-mix(in oklab, var(--success) 14%, var(--surface));
    color: var(--success);
}
.audit-log-item--update { border-left-color: var(--warning); }
.audit-log-item--update .audit-log-item__icon {
    background: color-mix(in oklab, var(--warning) 14%, var(--surface));
    color: var(--warning-text, var(--warning));
}
.audit-log-item--delete { border-left-color: var(--danger); }
.audit-log-item--delete .audit-log-item__icon {
    background: color-mix(in oklab, var(--danger) 14%, var(--surface));
    color: var(--danger);
}
.audit-log-item--login,
.audit-log-item--access { border-left-color: var(--primary); }
.audit-log-item--login .audit-log-item__icon,
.audit-log-item--access .audit-log-item__icon {
    background: var(--primary-tint);
    color: var(--primary);
}
.audit-log-item--system { border-left-color: var(--accent); }
.audit-log-item--system .audit-log-item__icon {
    background: var(--accent-tint);
    color: var(--accent);
}

/* Lifecycle Modifier — combine on top of tone variants */
.audit-log-item--sealed {
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--accent) 6%, transparent) 0%,
        transparent 50%),
      var(--surface);
    border-left-color: var(--accent);
}
.audit-log-item--sealed .audit-log-item__icon {
    background: var(--accent-tint);
    color: var(--accent);
    box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 30%, transparent);
}
.audit-log-item--sealed .audit-log-item__hash::before {
    content: "✦ ";
    color: var(--accent);
}
.audit-log-item--failed {
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--danger) 5%, transparent) 0%,
        transparent 50%),
      var(--surface);
    border-left-color: var(--danger);
}
.audit-log-item--failed .audit-log-item__icon {
    background: color-mix(in oklab, var(--danger) 14%, var(--surface));
    color: var(--danger);
}

/* Diff-Slot (optional, expanded view) */
.audit-log-item__diff {
    grid-column: 2;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font: 500 12px var(--font-mono);
}
.audit-log-item__diff-col h5 {
    font: 600 10px var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 0 0 6px;
    color: var(--fg-3);
}
.audit-log-item__diff-col--old h5 { color: var(--danger); }
.audit-log-item__diff-col--new h5 { color: var(--success); }
.audit-log-item__diff-col dl {
    margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
}
.audit-log-item__diff-col dt { color: var(--fg-3); }
.audit-log-item__diff-col dd { color: var(--fg); margin: 0; }
.audit-log-item__diff-col--old dd { color: var(--danger); }
.audit-log-item__diff-col--new dd { color: var(--success); }