/* =========================================================
 * ui-dialog.css —— 统一弹层系统（对话框 / 确认框 / 弹出框 / Toast）
 * 所有弹层共享同一套毛玻璃视觉；原生 alert/confirm/prompt 由
 * ui-dialog.js 的 window.UI 接管，视觉完全一致。
 * 引入顺序：放在 v3.css 之后（本文件用 !important 统一既有弹层外壳）。
 * ========================================================= */

/* ---------- 统一 Toast（同时兼容旧 class: toast-ok / toast-err / show） ---------- */
.toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:10000;
  padding:11px 20px;border-radius:12px;font-size:14px;color:#fff;font-family:var(--sans,system-ui,sans-serif);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.4);opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;max-width:90vw;line-height:1.5}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* 兼容两种旧写法：toast-ok（连字符）/ toast.success（空格） */
.toast-ok,.toast-success,.toast.success{background:var(--c-green,#16a34a)}
.toast-err,.toast-error,.toast.error{background:var(--c-red,#ef4444)}
.toast-info,.toast.info{background:#334155}
.toast-warning,.toast.warning{background:var(--c-yellow,#d97706)}

/* ---------- UI 组件弹层（window.UI.alert/confirm/prompt/modal） ---------- */
.ui-mask{position:fixed;inset:0;z-index:9998;background:rgba(32,36,44,.42);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px}
.ui-mask.is-open{display:flex;animation:uiMaskIn .15s ease}
@keyframes uiMaskIn{from{opacity:0}to{opacity:1}}

.ui-dialog{background:var(--glass-strong,#fff);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border:1px solid var(--stroke,rgba(0,0,0,.08));border-radius:20px;
  box-shadow:var(--shadow,0 30px 80px -20px rgba(20,20,60,.35));
  max-width:480px;width:100%;overflow:hidden;display:flex;flex-direction:column;
  animation:uiDialogPop .18s ease}
.ui-dialog--sm{max-width:360px}
.ui-dialog--lg{max-width:680px}
@keyframes uiDialogPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.ui-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--stroke,rgba(0,0,0,.06))}
.ui-dialog__title{font-size:16px;font-weight:600;color:var(--ink,#1a1a2e);margin:0;font-family:var(--sans,system-ui,sans-serif)}
.ui-dialog__close{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim,#888);background:none;border:none;font-size:20px;line-height:1;cursor:pointer;flex-shrink:0}
.ui-dialog__close:hover{background:rgba(0,0,0,.06);color:var(--ink,#1a1a2e)}
.ui-dialog__body{padding:20px 22px;color:var(--ink,#222);font-size:14px;line-height:1.6;
  overflow:auto;max-height:70vh;font-family:var(--sans,system-ui,sans-serif)}
.ui-dialog__foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:14px 22px;border-top:1px solid var(--stroke,rgba(0,0,0,.06))}
.ui-dialog__msg{margin:0 0 4px;color:var(--ink-dim,#555)}

.ui-input{width:100%;padding:9px 12px;border:1px solid var(--stroke,rgba(0,0,0,.18));border-radius:10px;
  font:inherit;font-size:14px;margin-top:8px;box-sizing:border-box;font-family:var(--sans,system-ui,sans-serif)}

.ui-btn{appearance:none;border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:500;
  padding:9px 18px;border-radius:11px;transition:filter .15s ease,transform .05s ease;
  font-family:var(--sans,system-ui,sans-serif)}
.ui-btn:active{transform:translateY(1px)}
.ui-btn--primary{background:linear-gradient(135deg,#b07f2f,#c9a14a);color:#fff}
.ui-btn--primary:hover{filter:brightness(1.05)}
.ui-btn--ghost{background:rgba(0,0,0,.05);color:var(--ink,#333)}
.ui-btn--ghost:hover{background:rgba(0,0,0,.09)}
.ui-btn--danger{background:var(--c-red,#ef4444);color:#fff}
.ui-btn--danger:hover{filter:brightness(1.05)}

/* ---------- 既有自定义弹层外壳统一（仅外壳，不动内部结构与逻辑） ----------
 * 不覆盖 display，保留各页自己的显示/隐藏机制（hidden / style.display）。 */
.fm-modal,.g-modal,.ae-modal,.att-modal,.hc-modal-mask,.fm-preview-overlay{
  background:rgba(32,36,44,.42)!important;
  -webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;
  align-items:center!important;justify-content:center!important;padding:20px!important}
.fm-modal-container,.g-modal-box,.ae-modal-box,.att-modal-box,.pe-modal,.hc-modal{
  background:var(--glass-strong,#fff)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%)!important;backdrop-filter:blur(28px) saturate(170%)!important;
  border:1px solid var(--stroke,rgba(0,0,0,.08))!important;border-radius:20px!important;
  box-shadow:var(--shadow,0 30px 80px -20px rgba(20,20,60,.35))!important;overflow:hidden!important}
.fm-modal-close,.g-modal-close,.ae-modal-close,.att-modal-close,.pe-modal-close,.hc-modal-close{
  width:30px!important;height:30px!important;border-radius:9px!important;display:flex!important;
  align-items:center!important;justify-content:center!important;color:#888!important;
  background:none!important;border:none!important;font-size:20px!important;line-height:1!important;cursor:pointer!important}
.fm-modal-close:hover,.g-modal-close:hover,.ae-modal-close:hover,.att-modal-close:hover,
.pe-modal-close:hover,.hc-modal-close:hover{background:rgba(0,0,0,.06)!important;color:#1a1a2e!important}

/* 小屏适配 */
@media (max-width:520px){
  .ui-dialog,.fm-modal-container,.g-modal-box,.ae-modal-box,.att-modal-box,.pe-modal,.hc-modal{max-width:94vw!important}
}