/* ============================================================
   XINY AI · 共享 UI 组件库
   ------------------------------------------------------------
   统一设计令牌、动效曲线、弹窗/抽屉关闭行为。
   新页面统一引用这个文件，保证整站视觉与交互一致。

   动效约定：
     · 进场：淡入 + 轻微上移（ease-out，220~320ms）
     · 回弹：仅在「可关闭容器」上用轻微回弹曲线
     · 首屏列表：错峰淡入（每项延迟 40ms，最多 8 项）
     · 按钮/卡片 hover：只动 transform 与颜色，不动布局
     · 尊重 prefers-reduced-motion
   ============================================================ */

:root{
  --brand:#6D5DFB; --brand2:#22D3EE;
  --bg:#07090F; --panel:#0E1220; --card:#121828; --card2:#171E32;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --text:#E9EDF7; --muted:rgba(255,255,255,.5); --muted2:rgba(255,255,255,.32);
  --ok:#4ADE80; --warn:#FCD34D; --bad:#F87171;
  --r-sm:8px; --r-md:12px; --r-lg:16px;

  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-back:cubic-bezier(.34,1.35,.64,1);
  --t-fast:.16s; --t-mid:.26s; --t-slow:.42s;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}

/* ============================================================
   动效关键帧
   ============================================================ */
@keyframes xa-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes xa-fade{from{opacity:0}to{opacity:1}}
@keyframes xa-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes xa-in-right{from{transform:translateX(100%)}to{transform:none}}
@keyframes xa-spin{to{transform:rotate(360deg)}}
@keyframes xa-shimmer{from{background-position:-380px 0}to{background-position:380px 0}}
@keyframes xa-pulse{0%,100%{opacity:1}50%{opacity:.55}}

.anim-up{animation:xa-fade-up var(--t-slow) var(--e-out) both}
.anim-fade{animation:xa-fade var(--t-mid) var(--e-out) both}
.stagger>*{animation:xa-fade-up var(--t-slow) var(--e-out) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.10s}
.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}
.stagger>*:nth-child(6){animation-delay:.22s}
.stagger>*:nth-child(7){animation-delay:.26s}
.stagger>*:nth-child(8){animation-delay:.30s}

/* ============================================================
   基础组件
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-md);font-size:13.5px;
  border:1px solid var(--line2);background:rgba(255,255,255,.045);
  transition:background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-out),opacity var(--t-fast);
}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.pri{
  border-color:transparent;color:#fff;font-weight:500;
  background:linear-gradient(96deg,var(--brand),#4F8CF7 52%,var(--brand2));
  background-size:170% 100%;
  box-shadow:0 12px 26px -12px rgba(109,93,251,.9);
  transition:background-position var(--t-slow) var(--e-out),transform var(--t-fast),box-shadow var(--t-mid);
}
.btn.pri:hover{background-position:100% 0;box-shadow:0 16px 30px -12px rgba(109,93,251,1)}
.btn.danger{color:var(--bad);border-color:rgba(239,68,68,.3)}
.btn.danger:hover{background:rgba(239,68,68,.13)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;
  transition:border-color var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out);
}
.card.hoverable:hover{border-color:var(--line2);transform:translateY(-3px)}

.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:500;
  background:rgba(255,255,255,.06);color:var(--muted);
}
.tag.ok{background:rgba(74,222,128,.14);color:#4ADE80}
.tag.warn{background:rgba(252,211,77,.14);color:#FCD34D}
.tag.bad{background:rgba(248,113,113,.14);color:#F87171}
.tag.brand{background:rgba(109,93,251,.18);color:#A78BFA}

.inp{
  width:100%;padding:11px 14px;border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--line2);outline:0;
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out);
}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(109,93,251,.15)}
.inp::placeholder{color:var(--muted2)}

.empty{
  padding:52px 20px;text-align:center;color:var(--muted2);font-size:13.5px;
  animation:xa-fade var(--t-slow) var(--e-out) both;
}
.empty .ico{
  width:52px;height:52px;margin:0 auto 15px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(109,93,251,.12);border:1px solid rgba(109,93,251,.25);
}
.empty .ico svg{width:23px;height:23px;stroke:#A78BFA;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 骨架屏 */
.sk{
  border-radius:var(--r-md);position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  background-size:380px 100%;
  animation:xa-shimmer 1.25s linear infinite;
}
.spin{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;border-radius:50%;animation:xa-spin .7s linear infinite;
}

/* ============================================================
   遮罩层：点击遮罩关闭 + ESC 关闭（统一行为）
   ============================================================ */
.mask{
  position:fixed;inset:0;z-index:80;
  background:rgba(4,6,12,.72);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;padding:22px;
}
.mask.on{display:flex;animation:xa-fade var(--t-mid) var(--e-out) both}
.mask .box{
  width:100%;max-width:540px;max-height:86vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9);
  animation:xa-pop var(--t-mid) var(--e-back) both;
}

/* 右上角关闭按钮（所有弹窗统一用它） */
.xbtn{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out);
}
.xbtn:hover{background:rgba(255,255,255,.13);color:var(--text);transform:rotate(90deg)}
.xbtn:active{transform:rotate(90deg) scale(.92)}
.xbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ============================================================
   右侧抽屉
   ============================================================ */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:82;
  width:min(430px,92vw);
  background:var(--panel);border-left:1px solid var(--line2);
  display:flex;flex-direction:column;
  transform:translateX(101%);
  transition:transform var(--t-mid) var(--e-out);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.85);
}
.drawer.on{transform:none}
.drawer-head{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.drawer-head h3{font-size:15px;font-weight:600}
.drawer-head .xbtn{position:static;margin-left:auto}
.drawer-body{flex:1;overflow-y:auto;padding:18px}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;left:50%;top:22px;z-index:99;
  display:flex;align-items:center;gap:9px;padding:11px 18px;max-width:90vw;
  background:#141A2A;border:1px solid var(--line2);border-radius:var(--r-md);
  font-size:13.5px;box-shadow:0 18px 40px -14px rgba(0,0,0,.9);
  transform:translate(-50%,-160%);
  transition:transform var(--t-slow) var(--e-back);
}
.toast.show{transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;flex:none}

/* ============================================================
   通用工具类
   ============================================================ */
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.mono{font-variant-numeric:tabular-nums}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scroll-y{overflow-y:auto}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--line);
  background:rgba(7,9,15,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.topbar h1{font-size:16px;font-weight:600}
.topbar .sp{margin-left:auto}

/* 分段切换 */
.seg{
  display:inline-flex;gap:3px;padding:3px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.seg button{
  padding:7px 14px;border-radius:8px;font-size:13px;color:var(--muted);
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
.seg button:hover{color:var(--text)}
.seg button.on{background:rgba(109,93,251,.22);color:#fff}

/* 监听滚动淡入（由 ui.js 自动接管） */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none;transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}

/* 减弱动效 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   维护模式整屏提示（由 ui.js 的 XUI.showMaintenance 挂上来）
   ============================================================ */
.mt-mask{
  position:fixed;inset:0;z-index:4000;
  display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 700px at 50% -10%,rgba(109,93,251,.16),transparent 60%),var(--bg);
  animation:xa-fade var(--t-mid) var(--e-out) both;
}
.mt-card{
  width:100%;max-width:392px;text-align:center;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:36px 28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  animation:xa-pop .32s var(--e-back) both;
}
.mt-ico{
  width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(252,211,77,.12);border:1px solid rgba(252,211,77,.3);
  color:var(--warn);
}
.mt-ico svg{width:26px;height:26px}
.mt-card h2{font-size:18px;font-weight:600;margin-bottom:10px}
.mt-card p{font-size:13.5px;line-height:1.8;color:var(--muted)}
.mt-card button{
  margin-top:22px;height:42px;padding:0 26px;border-radius:11px;
  font-size:14px;font-weight:500;color:#fff;
  background:linear-gradient(96deg,var(--brand),var(--brand2));
  box-shadow:0 14px 30px -14px rgba(109,93,251,.9);
  transition:filter var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out);
}
.mt-card button:hover{filter:brightness(1.1)}
.mt-card button:active{transform:scale(.97)}

/* 卡片底部按钮：
     .mt-front → 管理员专用「以前台身份进入」（会话放行，不是后台入口）
     .mt-login → 其他访客看到的普通「登录」
   （后台入口已经改成独立隐蔽网址，这里【故意不放】指向后台的链接） */
.mt-card .mt-front,
.mt-card .mt-login{
  display:block;width:100%;margin-top:10px;height:40px;line-height:38px;
  padding:0 20px;border-radius:10px;box-sizing:border-box;
  font-size:13px;color:var(--muted);text-align:center;
  background:transparent;border:1px solid var(--line2);box-shadow:none;
  text-decoration:none;
}
.mt-card .mt-front:hover,
.mt-card .mt-login:hover{color:var(--text);background:rgba(255,255,255,.06);filter:none}

/* 管理员进入后的顶部提示条：让他一直记得维护还开着 */
.mt-bar{
  position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:3900;
  display:flex;align-items:center;gap:12px;
  padding:7px 8px 7px 16px;border-radius:99px;
  background:rgba(252,211,77,.14);
  border:1px solid rgba(252,211,77,.38);
  color:#FCD34D;font-size:12.5px;white-space:nowrap;
  backdrop-filter:blur(8px);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.8);
  animation:xa-fade var(--t-mid) var(--e-out) both;
}
.mt-bar button{
  padding:4px 12px;border-radius:99px;font-size:12px;
  background:rgba(252,211,77,.2);color:#FCD34D;
  transition:background var(--t-fast) var(--e-out);
}
.mt-bar button:hover{background:rgba(252,211,77,.34)}
@media (max-width:560px){
  .mt-bar{max-width:calc(100vw - 20px);white-space:normal}
  .mt-bar span{font-size:12px;line-height:1.5}
}