.ux-assistant { margin: 1rem 0 1.5rem; padding: clamp(1rem, 2vw, 1.35rem); border: 1px solid var(--of-border); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--of-blue) 7%, var(--of-canvas)), var(--of-canvas) 48%); }
.ux-assistant > h2 { margin: 0 0 1rem; color: var(--of-ink); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.ux-assistant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.ux-assistant-card { min-width: 0; padding: 1rem; border: 1px solid var(--of-border); border-radius: 12px; background: color-mix(in srgb, var(--of-canvas) 94%, transparent); }
.ux-assistant-card h3, .ux-assistant-related h3 { margin: 0 0 .65rem; color: var(--of-ink); font-size: .95rem; }
.ux-assistant-muted, .ux-assistant-empty, .ux-assistant-option-list { color: var(--of-muted); font-size: .86rem; line-height: 1.55; }
.ux-assistant-option-list { margin: 0; padding-left: 1.15rem; }
.ux-assistant-example { max-height: 9rem; margin: 0 0 .75rem; padding: .75rem; overflow: auto; border-radius: 8px; background: color-mix(in srgb, var(--of-ink) 7%, var(--of-canvas)); color: var(--of-ink); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ux-assistant-load, .ux-assistant-action { min-height: 36px; padding: .48rem .72rem; border: 1px solid var(--of-border); border-radius: 8px; background: var(--of-canvas); color: var(--of-ink); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.ux-assistant-load:hover, .ux-assistant-action:hover:not(:disabled), .ux-assistant-related a:hover { border-color: var(--of-blue); color: var(--of-blue); }
.ux-assistant-action:disabled { cursor: not-allowed; opacity: .5; }
.ux-assistant-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ux-assistant-fix { margin-top: .85rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, #e55353 55%, var(--of-border)); border-radius: 10px; background: color-mix(in srgb, #e55353 8%, var(--of-canvas)); color: var(--of-ink); }
.ux-assistant-fix strong { display: block; margin-bottom: .25rem; }
.ux-assistant-fix p { margin: 0; color: var(--of-muted); font-size: .88rem; }
.ux-assistant-related { margin-top: 1rem; }
.ux-assistant-related-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ux-assistant-related a { padding: .45rem .7rem; border: 1px solid var(--of-border); border-radius: 999px; color: var(--of-ink); font-size: .8rem; text-decoration: none; }
@media (max-width: 900px) { .ux-assistant-grid { grid-template-columns: 1fr 1fr; } .ux-assistant-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ux-assistant-grid { grid-template-columns: 1fr; } .ux-assistant-card:last-child { grid-column: auto; } .ux-assistant-actions { display: grid; grid-template-columns: 1fr; } .ux-assistant-action, .ux-assistant-load { width: 100%; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ux-assistant * { scroll-behavior: auto !important; } }
@media (forced-colors: active) { .ux-assistant, .ux-assistant-card, .ux-assistant-fix, .ux-assistant-related a { border: 1px solid CanvasText; } }