/* ===== IV2UI 互動元件組（精緻版：toast / loading / modal / #loader 覆蓋） ===== */
:root{
  --iv2u-navy:#1e2b4d; --iv2u-navy-2:#2a3a63; --iv2u-ink:#19202e;
  --iv2u-text:#1f2736; --iv2u-sub:#5e6678; --iv2u-line:#e7eaf1; --iv2u-bg:#ffffff;
  --iv2u-ok:#15936a;  --iv2u-ok-s:#e7f6ef;
  --iv2u-err:#d23b39; --iv2u-err-s:#fdecea;
  --iv2u-warn:#c9870f;--iv2u-warn-s:#fcf3e1;
  --iv2u-info:#2563c9;--iv2u-info-s:#e9f0fd;
  --iv2u-r:18px; --iv2u-r-s:13px;
  --iv2u-e1:0 1px 2px rgba(20,28,50,.06), 0 6px 16px rgba(20,28,50,.09);
  --iv2u-e2:0 2px 6px rgba(20,28,50,.08), 0 16px 34px rgba(20,28,50,.13), 0 34px 70px rgba(20,28,50,.13);
  --iv2u-spring:cubic-bezier(.22,1,.36,1);
  --iv2u-out:cubic-bezier(.4,0,.2,1);
}

/* ---------- toast（左側漸層彩條 + 漸層圖示獎章 + 淡色暈染） ---------- */
#iv2u-toast-root{position:fixed;top:12vh;left:50%;transform:translateX(-50%);z-index:2147483600;display:flex;flex-direction:column;gap:14px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
.iv2u-toast{position:relative;overflow:hidden;pointer-events:auto;display:flex;align-items:center;gap:15px;min-width:330px;max-width:92vw;padding:18px 22px 19px 26px;border-radius:15px;background:linear-gradient(100deg, var(--ttint,#f4f7fb), #fff 46%);color:var(--iv2u-text);font:500 1.14rem/1.55 "Noto Sans TC",sans-serif;box-shadow:var(--iv2u-e1);border:1px solid var(--iv2u-line);opacity:0;transform:translateY(-16px) scale(.95);transition:opacity .36s var(--iv2u-spring),transform .36s var(--iv2u-spring),box-shadow .22s;cursor:default;}
.iv2u-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg, var(--tc2,#3f86e6), var(--tc,#2563c9));}
.iv2u-toast.is-in{opacity:1;transform:none;}
.iv2u-toast.is-in:hover{box-shadow:var(--iv2u-e2);}
.iv2u-toast.is-out{opacity:0;transform:translateY(-10px) scale(.97);}
.iv2u-ti{flex-shrink:0;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg, var(--tc2,#3f86e6), var(--tc,#2563c9));box-shadow:0 6px 14px -3px var(--tc,#2563c9);}
.iv2u-ti svg{width:20px;height:20px;}
.iv2u-tm{padding-right:14px;font-size:2rem;line-height:1.3;font-weight:600;word-break:break-word;}
.iv2u-toast.t-error .iv2u-tm{font-weight:700;color:#c1322f;}
.iv2u-toast.t-success{--tc:#15936a;--tc2:#27b083;--ttint:#eff9f4;}
.iv2u-toast.t-error{--tc:#d23b39;--tc2:#ec5f57;--ttint:#fdf1f0;}
.iv2u-toast.t-warn{--tc:#c9870f;--tc2:#e3a626;--ttint:#fdf7ea;}
.iv2u-toast.t-info{--tc:#2563c9;--tc2:#3f86e6;--ttint:#eff5fe;}
.iv2u-tx{position:absolute;top:9px;right:9px;width:22px;height:22px;border:0;background:transparent;color:var(--iv2u-sub);border-radius:7px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .16s,background .16s,color .16s;}
.iv2u-toast:hover .iv2u-tx,.iv2u-tx:focus-visible{opacity:1;}
.iv2u-tx:hover{background:rgba(20,28,50,.07);color:var(--iv2u-text);}
.iv2u-tx:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,201,.3);}
.iv2u-tx svg{width:13px;height:13px;}
.iv2u-tbar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:var(--tc,#2563c9);opacity:.7;}

/* ---------- loading（漸層圓弧 + 尾端散點 spinner，仿 dribbble 彗星尾） ---------- */
#iv2u-loading-root{position:fixed;inset:0;z-index:2147483500;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;background:rgba(15,20,34,.50);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s var(--iv2u-out),visibility .3s;}
#iv2u-loading-root.is-on{opacity:1;visibility:visible;}
.iv2u-arc-spin{width:82px;height:82px;animation:iv2uSpin 1.4s linear infinite;}
.iv2u-arc-spin svg{display:block;width:100%;height:100%;overflow:visible;}
.iv2u-arc{fill:none;stroke:url(#iv2uArcGrad);stroke-width:7;stroke-linecap:round;stroke-dasharray:96 6 3 7 0.1 32.4;filter:drop-shadow(0 3px 7px rgba(70,120,235,.40));animation:iv2uComet 1.7s ease-in-out infinite;}
.iv2u-loading-txt{color:#9fc6ef;font:600 1rem/1 "Noto Sans TC",sans-serif;letter-spacing:.16em;}
@keyframes iv2uSpin{to{transform:rotate(360deg);}}
@keyframes iv2uComet{0%,100%{stroke-dasharray:96 6 3 7 0.1 32.4;}55%{stroke-dasharray:86 16 3 17 0.1 22.4;}}

/* ---------- modal / alert / confirm ---------- */
#iv2u-modal-root{position:fixed;inset:0;z-index:2147483550;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s var(--iv2u-out),visibility .3s;}
#iv2u-modal-root.is-on{opacity:1;visibility:visible;}
.iv2u-backdrop{position:absolute;inset:0;background:radial-gradient(130% 130% at 50% 0%, rgba(20,28,52,.40), rgba(11,15,28,.62));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.iv2u-dialog{position:relative;width:100%;max-width:504px;max-height:86vh;overflow:auto;background:var(--iv2u-bg);border-radius:var(--iv2u-r);box-shadow:var(--iv2u-e2),inset 0 0 0 1px rgba(20,28,50,.04);transform:translateY(20px) scale(.94);font-size:16px;opacity:.5;transition:transform .42s var(--iv2u-spring),opacity .42s var(--iv2u-spring);}
#iv2u-modal-root.is-on .iv2u-dialog{transform:none;opacity:1;}
.iv2u-x{position:absolute;top:16px;right:16px;z-index:1;width:36px;height:36px;border:0;background:transparent;color:var(--iv2u-sub);border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;}
.iv2u-x:hover{background:#f0f2f7;color:var(--iv2u-text);}
.iv2u-x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,201,.3);}
.iv2u-x svg{width:20px;height:20px;}
/* 類型主題色（dt-* 由 JS 依 icon 加上；無類型則用 navy 中性） */
.iv2u-dialog{--dc:var(--iv2u-navy);--dc2:#36488f;--dtint:#f4f6fc;--dsoft:#eef1fa;}
.iv2u-dialog.dt-success{--dc:#15936a;--dc2:#23ad80;--dtint:#eef8f3;--dsoft:#e0f3ea;}
.iv2u-dialog.dt-error{--dc:#d23b39;--dc2:#ea5b53;--dtint:#fdf0ef;--dsoft:#fbe2e0;}
.iv2u-dialog.dt-warn{--dc:#c9870f;--dc2:#e0a629;--dtint:#fdf6e8;--dsoft:#f8ecd3;}
.iv2u-dialog.dt-info{--dc:#2563c9;--dc2:#3f86e6;--dtint:#eef4fe;--dsoft:#e0ebfc;}
.iv2u-dialog-hd{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:40px 36px 28px;background:linear-gradient(180deg, var(--dsoft), var(--dtint));}
.iv2u-dlg-ic{position:relative;flex-shrink:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg, var(--dc2), var(--dc));box-shadow:0 13px 28px -6px var(--dc), 0 0 0 8px rgba(255,255,255,.55);}
.iv2u-dlg-ic svg{width:37px;height:37px;}
.iv2u-dlg-ttl{font:700 1.82rem/1.3 "Noto Sans TC",sans-serif;color:var(--iv2u-ink);letter-spacing:.005em;}
.iv2u-dialog-bd{padding:22px 40px 10px;font:400 1.38rem/1.62 "Noto Sans TC",sans-serif;color:var(--iv2u-sub);white-space:pre-line;text-align:center;}
.iv2u-dialog-ft{display:flex;gap:13px;padding:26px 36px 32px;}
.iv2u-dialog-ft .iv2u-btn{flex:1 1 0;min-width:120px;}

/* ---------- buttons ---------- */
.iv2u-btn{position:relative;appearance:none;border:1px solid transparent;cursor:pointer;padding:15px 26px;border-radius:13px;font:600 1.18rem/1 "Noto Sans TC",sans-serif;letter-spacing:.02em;transition:transform .16s var(--iv2u-out),box-shadow .2s,background .2s,border-color .2s;}
.iv2u-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,201,.32);}
.iv2u-btn-primary{background:linear-gradient(180deg,var(--dc2,var(--iv2u-navy-2)),var(--dc,var(--iv2u-navy)));color:#fff;box-shadow:0 2px 6px -1px var(--dc,var(--iv2u-navy)),0 9px 20px -5px var(--dc,var(--iv2u-navy));}
.iv2u-btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 3px 8px -1px var(--dc,var(--iv2u-navy)),0 13px 28px -6px var(--dc,var(--iv2u-navy));}
.iv2u-btn-primary:active{transform:translateY(0) scale(.985);box-shadow:0 2px 6px -1px var(--dc,var(--iv2u-navy));}
.iv2u-btn-ghost{background:#f3f5f9;color:var(--iv2u-text);border-color:var(--iv2u-line);}
.iv2u-btn-ghost:hover{background:#eaeef5;transform:translateY(-1px);}
.iv2u-btn-ghost:active{transform:translateY(0) scale(.985);}
body.iv2u-lock{overflow:hidden;}

/* ---------- #loader（精緻品牌進場；覆蓋舊 style.css 規則，舊 .dot/.char 標記已移除故失效） ---------- */
/* 註：舊 style.css 的 #loader z-index(99999999999，瀏覽器夾為 2147483647) 刻意高於 IV2UI 各層，使頁面載入遮罩覆蓋一切。 */
#loader{background:radial-gradient(120% 90% at 50% 18%, #ffffff, #f3f5f9);flex-direction:column;gap:18px;}
.iv2u-loader-spin{width:46px;height:46px;border-radius:50%;background:conic-gradient(from 0deg, rgba(30,43,77,0), var(--iv2u-navy));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);animation:iv2uSpin .9s linear infinite;}
.iv2u-loader-brand{font:700 .92rem/1 "Noto Sans TC",sans-serif;letter-spacing:.42em;text-indent:.42em;color:var(--iv2u-navy);animation:iv2uBrand 1.8s var(--iv2u-spring) infinite;}
@keyframes iv2uBrand{0%,100%{opacity:.5;}50%{opacity:.95;}}

@media (prefers-reduced-motion: reduce){
  .iv2u-toast,#iv2u-loading-root,#iv2u-modal-root,.iv2u-dialog,.iv2u-btn{transition:none;}
  .iv2u-arc-spin,.iv2u-loader-spin{animation-duration:2.6s;}
  .iv2u-arc{animation:none;stroke-dasharray:96 9 3 10 0.1 26.4;}
  .iv2u-tbar{display:none;}
  .iv2u-loader-brand{animation:none;opacity:.9;}
}