/* NEXAR UX 5.0 — Stages 05–06: feedback, states, accessible overlay framework */
:root{--nx5-overlayer:#07162AC2;--nx5-toast-radius:13px;--nx5-overlay-elevation:0 26px 80px #06162C55}
.nx5-state{min-height:164px;display:flex;align-items:center;justify-content:center;gap:9px;flex-direction:column;padding:24px 16px;max-width:100%;text-align:center}
.nx5-state .nx5-state-orbit{width:60px;height:60px;display:grid;place-items:center;border:1px solid var(--nx4-line-light,var(--nx-border));border-radius:20px;background:var(--nx4-panel,var(--nx-surface));margin-bottom:6px}
.nx5-state .nx5-state-orbit .app-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px}
.nx5-state strong{color:var(--nx5-tone-primary);font-size:15px;font-weight:900;line-height:1.65}
.nx5-state p{color:var(--nx5-tone-secondary);font-size:13px;line-height:1.85;max-width:62ch;margin:0}
.nx5-state--error .nx5-state-orbit{border-color:color-mix(in srgb,var(--nx5-tone-critical) 38%,var(--nx4-line-light));color:var(--nx5-tone-critical)}
.nx5-state--loading .nx5-state-orbit{animation:nx5-state-breathe 1.8s ease-in-out infinite}
.nx5-state--permission .nx5-state-orbit{color:var(--nx5-tone-warning)}
@keyframes nx5-state-breathe{50%{opacity:.55;transform:scale(.96)}}
.nx5-skeleton{display:grid;gap:12px;padding:16px 0;max-width:100%;min-width:0}
.nx5-skeleton-line{display:block;height:15px;width:var(--line-width,100%);border-radius:6px;background:linear-gradient(110deg,color-mix(in srgb,var(--nx5-tone-secondary) 7%,var(--nx4-panel)) 0%,color-mix(in srgb,var(--nx5-tone-secondary) 15%,var(--nx4-panel)) 50%,color-mix(in srgb,var(--nx5-tone-secondary) 7%,var(--nx4-panel)) 100%);background-size:200% 100%;animation:nx5-skeleton-shimmer 1.7s ease-in-out infinite}
@keyframes nx5-skeleton-shimmer{to{background-position:-200% 0}}
.nx5-field-feedback{display:block;font-size:12px;line-height:1.75;margin-top:6px;font-weight:700;color:var(--nx5-tone-secondary)}
.nx5-field-feedback--error{color:var(--nx5-tone-critical)}.nx5-field-feedback--warning{color:var(--nx5-tone-warning)}
.nx5-field-feedback--success{color:var(--nx5-tone-positive)}.nx5-field-feedback--info{color:var(--nx5-tone-action)}
.toast-region{position:fixed;z-index:1500;display:grid;gap:9px;pointer-events:none;max-width:min(410px,calc(100vw - 24px))}
.toast-region .nx5-toast{pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:11px;min-width:min(300px,calc(100vw - 24px));max-width:100%;padding:13px 12px 13px 15px;color:var(--nx5-tone-primary);background:var(--nx4-panel,var(--nx-surface,#fff));border:1px solid var(--nx4-line-light,var(--nx-border,#ddd));border-inline-start:4px solid var(--nx5-toast-accent,var(--nx5-tone-action));border-radius:var(--nx5-toast-radius);box-shadow:0 18px 55px #0B1B3344;overflow-wrap:anywhere;direction:rtl}
.nx5-toast--success{--nx5-toast-accent:var(--nx5-tone-positive)}.nx5-toast--info{--nx5-toast-accent:var(--nx5-tone-action)}.nx5-toast--warning{--nx5-toast-accent:var(--nx5-tone-warning)}.nx5-toast--error{--nx5-toast-accent:var(--nx5-tone-critical)}.nx5-toast--neutral{--nx5-toast-accent:var(--nx5-tone-secondary)}
.nx5-toast-signal{flex:none;margin-top:5px;width:8px;height:8px;border-radius:3px;background:var(--nx5-toast-accent)}
.nx5-toast-text{flex:1;font-size:13px;line-height:1.85;font-weight:750}
.toast-region .nx5-toast-close{flex:none;min-width:32px;min-height:32px;display:grid;place-items:center;border:1px solid var(--nx4-line-light,var(--nx-border));background:transparent;color:var(--nx5-tone-secondary);border-radius:8px;font-size:21px;font-family:Arial,sans-serif;cursor:pointer}
.toast-region .nx5-toast-close:focus-visible{outline:2px solid var(--nx5-toast-accent);outline-offset:2px}
.toast-region .nx5-toast-close:hover{color:var(--nx5-tone-primary);background:color-mix(in srgb,var(--nx5-tone-secondary) 7%,transparent)}
/* Dialogs from all apps share visual conventions; do not change modal roles or event delegation. */
.dialog-backdrop{z-index:1100;background:var(--nx5-overlayer);padding:clamp(8px,2vw,24px);overscroll-behavior:contain}
.dialog-backdrop>.dialog{box-shadow:var(--nx5-overlay-elevation);color:var(--nx5-tone-primary)}
.dialog-backdrop>.dialog .dialog-head{padding:clamp(15px,1.7vw,23px);gap:12px}
.dialog-backdrop>.dialog .dialog-content{padding:clamp(15px,1.9vw,24px);color:var(--nx5-tone-primary)}
.dialog-backdrop>.dialog .dialog-actions{padding:13px clamp(15px,1.9vw,23px);gap:9px;position:relative}
.dialog-backdrop>.dialog .dialog-actions .button{min-height:44px}
.dialog-backdrop>.dialog [role="alert"]{color:var(--nx5-tone-critical)}
.dialog-backdrop>.dialog :is(.input,button):focus-visible{outline:2px solid var(--app-accent,var(--nx5-tone-action));outline-offset:2px}
.nx4-workspace .nx4-delete-dialog .nx4-delete-warning{font-size:13px;line-height:1.8;font-weight:800;color:var(--nx5-tone-critical)}
/* UI state should still read without animation, status symbols or color. */
@media(min-width:621px) and (max-width:900px){.toast-region{bottom:max(82px,calc(env(safe-area-inset-bottom,0px) + 78px))!important}}
@media(max-width:620px){
 .toast-region{inset-inline:12px!important;max-width:calc(100vw - 24px);width:calc(100vw - 24px);bottom:max(82px,env(safe-area-inset-bottom) + 78px)!important}
 .toast-region .nx5-toast{width:100%;min-width:0}
 .dialog-backdrop{padding:0;align-items:flex-end}
 .dialog-backdrop>.dialog{width:100%;max-width:100%;max-height:95dvh;border-radius:19px 19px 0 0;overflow-y:auto}
 .dialog-backdrop>.dialog .dialog-actions{padding-bottom:max(13px,env(safe-area-inset-bottom))}
 .dialog-backdrop>.dialog .dialog-actions .button{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
 .nx5-skeleton-line,.nx5-state--loading .nx5-state-orbit{animation:none!important}
 .toast-region .nx5-toast{animation:none!important}
}