/* ui-kit.css — toasts + modals */
:root{ --ui-bg:#111; --ui-surface:#1b1b1b; --ui-border:rgba(255,255,255,.12);
  --ui-text:#fff; --ui-info:#2d7ff9; --ui-success:#21c17a; --ui-warn:#f5a524; --ui-error:#ff4d4f; --ui-shadow:0 10px 30px rgba(0,0,0,.35); }
#ui-toast-container{ position:fixed; top:16px; right:16px; display:grid; gap:12px; z-index:9999; }
.ui-toast{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; color:var(--ui-text); background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px; padding:10px 12px; box-shadow:var(--ui-shadow); min-width:240px; max-width:min(360px, calc(100vw - 32px)); animation:ui-slide-in .25s ease-out; }
.ui-toast .ui-icon{ font-family:"Material Symbols Rounded", system-ui, sans-serif; font-size:20px; line-height:1; }
.ui-toast .ui-title{ font-weight:600; } .ui-toast .ui-msg{ opacity:.9; font-size:.95rem; }
.ui-toast .ui-close{ background:none; border:0; color:inherit; cursor:pointer; font-size:18px; opacity:.9; }
.ui-toast.info{ border-color: rgba(45,127,249,.35); } .ui-toast.success{ border-color: rgba(33,193,122,.35); } .ui-toast.warn{ border-color: rgba(245,165,36,.35); } .ui-toast.error{ border-color: rgba(255,77,79,.35); }
@keyframes ui-slide-in{ from{ transform:translateX(16px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.ui-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; display:grid; place-items:center; animation: ui-fade-in .15s ease-out; }
.ui-modal{ background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:14px; width:min(520px, calc(100vw - 32px)); box-shadow:var(--ui-shadow); display:grid; grid-template-rows:auto 1fr auto; }
.ui-modal header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--ui-border); }
.ui-modal header h3{ margin:0; font-size:1.05rem; font-weight:600; }
.ui-modal .ui-modal-body{ padding:14px; }
.ui-modal footer{ display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:12px 14px; border-top:1px solid var(--ui-border); }
.ui-btn{ background:#2a2a2a; color:#fff; border:1px solid var(--ui-border); padding:8px 12px; border-radius:10px; cursor:pointer; }
.ui-btn.primary{ background:var(--ui-info); border-color: rgba(45,127,249,.5); } .ui-btn.danger{ background:var(--ui-error); border-color: rgba(255,77,79,.5); } .ui-btn.ghost{ background:transparent; }
.ui-btn:focus{ outline:2px solid rgba(45,127,249,.4); outline-offset:1px; }
@keyframes ui-fade-in{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ .ui-toast, .ui-modal-backdrop{ animation:none; } }