/* ============================================================================
 * ui.css —— 统一消息 / 对话组件样式（配合 ui.js）
 * 全部沿用 style.css 的主题变量，浅色主题下与商品配置页同一套观感。
 * ========================================================================== */

/* 通用图标 */
.ui-svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- toast 浮层 */
.ui-toasts{
  position:fixed;top:68px;right:20px;z-index:100000;
  display:flex;flex-direction:column;gap:10px;
  width:min(92vw,368px);pointer-events:none;
}
.ui-toast{
  pointer-events:auto;position:relative;overflow:hidden;
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 13px 13px;
  background:var(--panel);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 12px 32px rgba(16,24,40,.16),0 2px 6px rgba(16,24,40,.07);
  opacity:0;transform:translateX(18px);
  transition:opacity .2s ease,transform .2s ease;
}
.ui-toast.ui-in{opacity:1;transform:none}
.ui-toast.ui-t-out{opacity:0;transform:translateX(18px)}
.ui-t-ico{flex:0 0 auto;margin-top:1px;color:var(--accent)}
.ui-toast--ok .ui-t-ico{color:var(--ok)}
.ui-toast--warn .ui-t-ico{color:var(--warn)}
.ui-toast--error .ui-t-ico{color:var(--danger)}
.ui-t-main{flex:1 1 auto;min-width:0}
.ui-t-title{font-size:12.5px;font-weight:650;color:var(--text);margin-bottom:1px}
.ui-t-text{font-size:13px;line-height:1.55;color:var(--text-2);white-space:pre-wrap;word-break:break-word}
.ui-t-x{
  flex:0 0 auto;margin:-3px -3px 0 0;padding:4px;border:none;background:transparent;
  border-radius:6px;color:var(--text-3);cursor:pointer;line-height:0;opacity:.6;
}
.ui-t-x:hover{opacity:1;background:var(--panel-2);color:var(--text)}
.ui-t-x .ui-svg{width:14px;height:14px}
.ui-t-bar{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);opacity:.5;transform-origin:left;
  animation:uiBar linear forwards;
}
.ui-toast--ok .ui-t-bar{background:var(--ok)}
.ui-toast--warn .ui-t-bar{background:var(--warn)}
.ui-toast--error .ui-t-bar{background:var(--danger)}
@keyframes uiBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ------------------------------------------------------------ 对话框遮罩 */
.ui-mask{
  position:fixed;inset:0;padding:20px;
  background:rgba(16,24,40,.42);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .16s ease;
}
.ui-mask.ui-in{opacity:1}
.ui-mask.ui-out{opacity:0}
.ui-dlg{
  width:min(94vw,460px);max-height:86vh;
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 64px rgba(16,24,40,.3),0 4px 14px rgba(16,24,40,.1);
  transform:translateY(-8px) scale(.985);
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.ui-mask.ui-in .ui-dlg{transform:none}

/* 头部 */
.ui-dlg-head{display:flex;gap:11px;align-items:flex-start;padding:18px 20px 0}
.ui-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.ui-ico--info,.ui-ico--question{background:var(--accent-soft);color:var(--accent)}
.ui-ico--ok{background:var(--ok-soft);color:var(--ok)}
.ui-ico--warn{background:#fdf4e5;color:var(--warn)}
.ui-ico--error,.ui-ico--danger{background:var(--danger-soft);color:var(--danger)}
.ui-dlg-titles{min-width:0;padding-top:2px}
.ui-dlg-title{margin:0;font-size:15.5px;font-weight:650;letter-spacing:.2px;color:var(--text)}
.ui-dlg-sub{margin:3px 0 0;font-size:12px;color:var(--text-3)}

/* 正文 */
.ui-dlg-body{padding:14px 20px 2px;overflow:auto;max-height:min(56vh,420px)}
.ui-dlg-text{margin:0;font-size:13.5px;line-height:1.72;color:var(--text-2);
  white-space:pre-wrap;word-break:break-word}

/* 底部按钮 */
.ui-dlg-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;padding:16px 20px 18px}
.ui-btn{
  font:inherit;font-size:13.5px;font-weight:500;line-height:1.2;
  padding:8px 18px;border-radius:9px;cursor:pointer;border:1px solid transparent;
  transition:background .14s,border-color .14s,box-shadow .14s,color .14s;
  white-space:nowrap;
}
.ui-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.ui-btn--ghost{background:var(--panel);border-color:var(--border-strong);color:var(--text-2)}
.ui-btn--ghost:hover{background:var(--panel-2);color:var(--text);border-color:#c3c9d1}
.ui-btn--primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(47,111,237,.32)}
.ui-btn--primary:hover{background:#275fd6}
.ui-btn--danger{background:var(--danger);color:#fff;box-shadow:0 1px 2px rgba(217,56,67,.3)}
.ui-btn--danger:hover{background:#c22c37}
.ui-btn--danger:focus-visible{box-shadow:0 0 0 3px var(--danger-soft)}

/* 输入（prompt） */
.ui-input-wrap{display:flex;flex-direction:column;gap:10px}
.ui-input{
  width:100%;padding:9px 11px;font:inherit;font-size:13.5px;font-family:var(--mono);
  border:1px solid var(--border-strong);border-radius:9px;
  background:var(--panel-2);color:var(--text);outline:none;
  transition:border-color .14s,box-shadow .14s,background .14s;
}
.ui-input:focus{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.ui-input--err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
textarea.ui-input{font-family:inherit;line-height:1.6;resize:vertical;min-height:78px}

/* 列表选择（pick） */
.ui-pick{display:flex;flex-direction:column;gap:9px}
.ui-pick-list{display:flex;flex-direction:column;gap:5px;max-height:44vh;overflow:auto;padding-right:2px}
.ui-pick-row{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--border);border-radius:9px;background:var(--panel-2);
  cursor:pointer;transition:background .12s,border-color .12s;
}
.ui-pick-row:hover{background:var(--panel);border-color:var(--border-strong)}
.ui-pick-row.on{background:var(--accent-soft);border-color:#c3d7ff}
.ui-pick-row.is-disabled{opacity:.5;cursor:not-allowed}
.ui-pick-row input{width:15px;height:15px;flex:0 0 auto;margin:0;accent-color:var(--accent)}
.ui-pick-name{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-pick-note{flex:0 0 auto;font-size:11.5px;color:var(--text-3)}
.ui-pick-count{font-size:12px;color:var(--text-3)}

@media (max-width:520px){
  .ui-toasts{left:14px;right:14px;width:auto}
  .ui-dlg{width:100%}
}