/* ============================================================
   小逸科技 · 客服平台  「琉璃光·玻璃台」高端主题 (浅色 · 非暗黑)
   - 动态渐变光晕背景 + 玻璃拟态卡片 + 微交互动效
   ============================================================ */
:root{
  --xy-blue:#3b7dd8; --xy-cyan:#5fc4e8; --xy-violet:#8b7cf6; --xy-pink:#ec4899;
  --xy-ink:#162032; --xy-gray:#64748b; --xy-line:#e5eaf3;
  --xy-card:rgba(255,255,255,.72); --xy-glass:rgba(255,255,255,.55);
  --xy-shadow:0 18px 50px rgba(59,125,216,.14),0 2px 8px rgba(22,32,50,.05);
}
/* ---------- 动态光晕背景 ---------- */
html,body{ background:transparent !important; }
body{
  min-height:100vh; position:relative; overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--xy-ink);
  background:
    radial-gradient(1000px 560px at 88% -8%, rgba(95,196,232,.22), transparent 60%),
    radial-gradient(820px 480px at -6% 108%, rgba(139,124,246,.18), transparent 55%),
    radial-gradient(700px 420px at 50% 120%, rgba(236,72,153,.10), transparent 55%),
    linear-gradient(180deg,#f4f7fd 0%,#eef2f8 100%) !important;
}
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(59,125,216,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,125,216,.04) 1px,transparent 1px);
  background-size:36px 36px; }
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,0%),rgba(59,125,216,.10),transparent 60%);
  transition:background .15s ease; }
#app,body > *{ position:relative; z-index:1; }

/* ---------- 顶部品牌条(登录页/全局) ---------- */
.xy-topbar{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.5); border-bottom:1px solid rgba(229,234,243,.7); }
.xy-brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--xy-blue); font-size:16px; letter-spacing:.3px; }
.xy-logo{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--xy-blue),var(--xy-cyan) 60%,var(--xy-violet)); color:#fff; font-size:15px; font-weight:900;
  box-shadow:0 4px 14px rgba(59,125,216,.32); }
.xy-topbar .xy-tag{ font-size:12px; color:var(--xy-gray); }

/* ---------- 玻璃拟态卡片通用 ---------- */
.xy-glass{ background:var(--xy-card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8); border-radius:20px; box-shadow:var(--xy-shadow); }

/* ---------- 按钮动效 ---------- */
.xy-btn{ position:relative; overflow:hidden; border:none; border-radius:12px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--xy-blue),var(--xy-cyan) 60%,var(--xy-violet));
  box-shadow:0 8px 22px rgba(59,125,216,.32); transition:transform .2s,box-shadow .2s; }
.xy-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(59,125,216,.4); }
.xy-btn:active{ transform:translateY(0); }
.xy-btn .ripple{ position:absolute; border-radius:50%; transform:scale(0); animation:xy-ripple .55s linear; background:rgba(255,255,255,.4); }
@keyframes xy-ripple{ to{ transform:scale(4); opacity:0; } }

/* ---------- 输入框浮动标签 ---------- */
.xy-field{ position:relative; margin-bottom:16px; }
.xy-field input{ width:100%; height:50px; padding:14px 16px 0; font-size:15px; color:var(--xy-ink);
  background:rgba(247,250,253,.8); border:1px solid var(--xy-line); border-radius:12px; outline:none; transition:.22s; }
.xy-field input:focus{ border-color:var(--xy-blue); background:#fff; box-shadow:0 0 0 4px rgba(59,125,216,.12); }
.xy-field label{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:14px; color:#94a3b8; pointer-events:none; transition:.18s; }
.xy-field input:focus+label,.xy-field input:not(:placeholder-shown)+label{ top:9px; font-size:11px; color:var(--xy-blue); }

/* ---------- 登录卡片(登录页专属外壳) ---------- */
.xy-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 20px 40px; }
.xy-login{ width:440px; max-width:94%; padding:42px 38px 34px; position:relative; overflow:hidden; }
.xy-login::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--xy-blue),var(--xy-cyan),var(--xy-violet)); }
.xy-login .xy-login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.xy-login .xy-login-brand .xy-logo{ width:42px; height:42px; border-radius:12px; font-size:19px; }
.xy-login h1{ font-size:23px; font-weight:800; color:var(--xy-ink); margin:0; }
.xy-login .xy-sub{ font-size:13px; color:var(--xy-gray); margin:4px 0 22px; }
.xy-login .xy-btn{ width:100%; height:48px; font-size:16px; }
.xy-extra{ display:flex; align-items:center; justify-content:space-between; margin:16px 0 6px; font-size:13px; }
.xy-extra a{ color:var(--xy-blue); text-decoration:none; }
.xy-divider{ display:flex; align-items:center; gap:10px; margin:18px 0 4px; color:#b9c1cc; font-size:12px; }
.xy-divider::before,.xy-divider::after{ content:""; flex:1; height:1px; background:var(--xy-line); }
.xy-third{ display:flex; gap:12px; }
.xy-third button{ flex:1; height:42px; border-radius:10px; border:1px solid var(--xy-line); background:#fff; font-size:13px; color:var(--xy-gray); cursor:pointer; transition:.2s; }
.xy-third button:hover{ border-color:var(--xy-blue); color:var(--xy-blue); }
.xy-foot{ margin-top:20px; text-align:center; font-size:12px; color:#b9c1cc; }
.xy-foot b{ color:var(--xy-blue); font-weight:700; }
.xy-audio-tip{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:11px; color:#94a3b8; }
.xy-audio-tip .dot{ width:7px; height:7px; border-radius:50%; background:var(--xy-cyan); animation:xypl 1.4s infinite; }
@keyframes xypl{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

/* ---------- 主页(客服工作台)焕新：侧边栏/顶栏/卡片 ---------- */
/* 侧边栏玻璃化 */
.home-sidebar,.sidebar,.nav-sidebar,.menu-side,.xy-sidebar,
.home-left,.chat-sidebar{ background:var(--xy-glass) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-right:1px solid rgba(229,234,243,.7); }
/* 顶部导航玻璃化 */
.home-header,.header,.topbar,.nav-top,.xy-header,.home-top{ background:var(--xy-glass) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(229,234,243,.7); }
/* 内容卡片 */
.home-card,.card,.panel,.widget,.xy-card,.stat-card,.dashboard-card{ background:var(--xy-card) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.8);
  border-radius:16px !important; box-shadow:0 8px 26px rgba(59,125,216,.08); }
/* 主内容区去死白 */
.home-main,.main,.content,.workspace,.xy-main{ background:transparent !important; }
/* 主按钮统一 */
.btn-primary,.btn-blue,.btn-submit,.primary-btn,.xy-primary{ background:linear-gradient(135deg,var(--xy-blue),var(--xy-cyan)) !important;
  border:none !important; color:#fff !important; border-radius:10px !important; box-shadow:0 6px 16px rgba(59,125,216,.28) !important; }
/* 激活/选中态 */
.active,.nav-active,.menu-active,.is-active,.router-link-active{ color:var(--xy-blue) !important; }
/* 统计数字高亮 */
.stat-num,.count,.number{ color:var(--xy-blue) !important; font-weight:800; }

/* ---------- 入场动画 ---------- */
@keyframes xy-in{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }
.xy-glass,.xy-login,.home-card,.card,.panel,.widget{ animation:xy-in .5s cubic-bezier(.2,.8,.2,1) both; }