/* ============================================================================
   Trade Copier 管理后台 · 暖砂皮肤（Crextio 风格）
   基底：暖砂底 + 单一万寿菊黄 + 软石墨深色；浮层面板 + 顶部胶囊导航
   本文件同时覆盖 Element Plus 主题与全站共享类，必须在 element-plus.css 之后加载
   ========================================================================== */

:root{
  /* ---- 表面 ---- */
  --tc-page:#e3e3e1;
  --tc-page-2:#e7e7e5;
  --tc-bg:#f2f1eb;
  --tc-card:#faf8f2;
  --tc-card-warm:#fdf8e7;
  --tc-dark:#303030;
  --tc-dark-2:#3b3b39;
  --tc-dark-3:#4a4a47;

  /* ---- 墨色 ---- */
  --tc-ink:#1a1a18;
  --tc-ink-2:#6f6f69;
  --tc-ink-3:#9e9e97;
  --tc-on-dark:#f4f3ef;
  --tc-on-dark-2:#a9a9a2;
  --tc-on-dark-3:#77776f;

  /* ---- 强调（全站唯一） ---- */
  --tc-accent:#f6d75b;
  --tc-accent-2:#eec93a;
  --tc-accent-deep:#b8951f;

  /* ---- 线条 ---- */
  --tc-line:rgba(26,26,24,.075);
  --tc-line-2:rgba(26,26,24,.05);
  --tc-line-strong:rgba(26,26,24,.14);

  /* ---- 形体 ---- */
  --tc-r-lg:34px;
  --tc-r:26px;
  --tc-r-sm:14px;
  --tc-shadow-card:0 1px 2px rgba(32,28,14,.035), 0 10px 22px -18px rgba(32,28,14,.16);
  --tc-shadow-panel:0 40px 90px -50px rgba(30,28,16,.42), 0 2px 0 rgba(255,255,255,.6) inset;
  --tc-shadow-float:0 20px 44px -24px rgba(30,28,16,.32);
  --tc-ease:cubic-bezier(.22,.61,.36,1);
  --tc-ease-spring:cubic-bezier(.34,1.28,.5,1);
}

/* ============================================================================
   1 · 基底
   ========================================================================== */

/* 与原布局一致的全局盒模型（缺了它胶囊导航等带内边距的定高元素会被撑高，选中药丸偏移） */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  overflow-x:clip;
  background:linear-gradient(178deg,var(--tc-page) 0%,var(--tc-page-2) 100%);
  min-height:100dvh;
  color:var(--tc-ink);
  font-family:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding:26px 22px 24px;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.02em}
/* 焦点可见性：自定义交互元素用金色描边；
   排除 Element Plus 组件（它们的 input 带 tabindex、按钮是 <button>，
   若叠加金色 outline 会与其自身的聚焦环形成「双环」——已实测踩坑） */
:is(button, a, [tabindex]):not([class*='el-']):focus-visible{
  outline:2px solid var(--tc-accent-deep);outline-offset:2px;border-radius:8px;
}
/* Element 输入类组件：统一只保留其自身的聚焦环（石墨色），抑制浏览器默认 outline */
.el-input__inner:focus,.el-input__inner:focus-visible,
.el-textarea__inner:focus,.el-textarea__inner:focus-visible{
  outline:none;
}

/* ============================================================================
   2 · 浮层面板 + 顶栏胶囊导航（新外壳）
   ========================================================================== */

.tc-panel{
  width:100%;margin:0 auto;/*max-width:1440px;*/
  background:var(--tc-bg);
  border-radius:var(--tc-r-lg);
  padding:22px 26px 26px;
  position:relative;
  isolation:isolate;
  box-shadow:var(--tc-shadow-panel);
  opacity:0;transform:translateY(22px) scale(.994);
  transition:opacity .85s var(--tc-ease),transform .85s var(--tc-ease);
}
.tc-panel.in{opacity:1;transform:none}
/* 右侧万寿菊光晕 —— 整页的情绪来源 */
.tc-panel::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(880px 620px at 100% 8%,rgba(248,229,138,.62),transparent 62%),
    radial-gradient(720px 520px at 96% 92%,rgba(248,229,138,.46),transparent 64%),
    radial-gradient(560px 400px at 0% 100%,rgba(246,236,205,.5),transparent 70%),
    linear-gradient(114deg,#f9f8f4 0%,#f9f8f2 44%,#faf5e3 78%,#fbf4dc 100%);
}

.tc-topbar{display:flex;align-items:center;gap:14px;position:relative;z-index:40;flex-wrap:wrap}
.tc-logo{
  flex:none;display:inline-flex;align-items:center;
  height:48px;padding:0 24px;border-radius:999px;
  border:1px solid var(--tc-line);
  text-decoration:none;color:var(--tc-ink);
  font-size:19px;font-weight:500;letter-spacing:-.018em;
  background:rgba(255,255,255,.5);
  white-space:nowrap;
  transition:background .3s var(--tc-ease),border-color .3s var(--tc-ease),transform .3s var(--tc-ease);
}
.tc-logo:hover{background:rgba(255,255,255,.9);border-color:rgba(26,26,24,.13);transform:translateY(-1px)}

/* 白色胶囊导航 —— 签名元素 */
.tc-nav{
  position:relative;display:flex;align-items:center;gap:0;
  margin-left:auto;
  padding:5px;height:55px;
  background:#fdfdfd;border-radius:999px;
  box-shadow:0 1px 1.5px rgba(32,28,14,.035);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  flex:0 1 auto;min-width:0;
}
.tc-nav::-webkit-scrollbar{display:none}
.tc-nav-ind{
  position:absolute;top:5px;left:0;height:45px;width:0;
  border-radius:999px;background:var(--tc-dark);
  z-index:0;pointer-events:none;
  transition:left .5s var(--tc-ease-spring),width .5s var(--tc-ease-spring);
}
.tc-nav-ind.snap{transition:none}
.tc-nav-item{
  position:relative;z-index:1;flex:none;
  display:inline-flex;align-items:center;
  height:45px;padding:0 17px;border-radius:999px;
  font-size:13.2px;font-weight:500;color:var(--tc-ink-2);
  text-decoration:none;white-space:nowrap;
  transition:color .35s var(--tc-ease),transform .2s var(--tc-ease),padding .3s var(--tc-ease);
}
.tc-nav-item:hover{color:var(--tc-ink)}
.tc-nav-item:active{transform:scale(.96)}
.tc-nav-item.on{color:#fff;font-weight:500;padding:0 22px}

.tc-actions{display:flex;align-items:center;gap:10px;flex:none;position:relative}
.tc-pillbtn{
  display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;
  background:var(--tc-card);border:1px solid var(--tc-line);
  font-size:13.2px;font-weight:500;color:var(--tc-ink);
  box-shadow:var(--tc-shadow-card);cursor:pointer;
  transition:transform .25s var(--tc-ease),box-shadow .25s var(--tc-ease),border-color .25s var(--tc-ease);
}
.tc-pillbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .6s var(--tc-ease)}
.tc-pillbtn:hover{transform:translateY(-1.5px);box-shadow:var(--tc-shadow-float);border-color:rgba(26,26,24,.12)}
.tc-pillbtn:hover svg{transform:rotate(70deg)}
.tc-pillbtn:active{transform:translateY(0) scale(.97)}

.tc-iconbtn{
  position:relative;width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--tc-card);border:1px solid var(--tc-line);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--tc-shadow-card);
  transition:transform .25s var(--tc-ease),box-shadow .25s var(--tc-ease),background .25s var(--tc-ease);
}
.tc-iconbtn svg{width:17px;height:17px;stroke:var(--tc-ink);fill:none;stroke-width:1.6}
.tc-iconbtn:hover{transform:translateY(-1.5px);box-shadow:var(--tc-shadow-float);background:#fff}
.tc-iconbtn:active{transform:translateY(0) scale(.95)}
.tc-iconbtn .badge{
  position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--tc-accent-2);border:1.5px solid var(--tc-card);
}
.tc-iconbtn .badge::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--tc-accent-2);opacity:0;
  animation:tcPing 3.4s var(--tc-ease) infinite;
}
@keyframes tcPing{0%{transform:scale(.6);opacity:.75}55%,100%{transform:scale(1.5);opacity:0}}

.tc-avatar-btn{
  width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;padding:0;
  border:1px solid var(--tc-line);background:var(--tc-card);cursor:pointer;
  box-shadow:var(--tc-shadow-card);
  transition:transform .25s var(--tc-ease),box-shadow .25s var(--tc-ease);
}
.tc-avatar-btn svg{width:100%;height:100%;display:block}
.tc-avatar-btn:hover{transform:translateY(-1.5px);box-shadow:var(--tc-shadow-float)}
.tc-avatar-btn:active{transform:scale(.95)}

/* 弹层 */
.tc-pop{
  position:absolute;top:calc(100% + 12px);right:0;width:300px;
  background:var(--tc-card);border:1px solid var(--tc-line);border-radius:20px;padding:14px;
  box-shadow:0 30px 60px -26px rgba(30,28,16,.36);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
  pointer-events:none;visibility:hidden;
  transition:opacity .26s var(--tc-ease),transform .26s var(--tc-ease),visibility .26s;
  z-index:60;
}
.tc-pop.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.tc-pop h4{font-size:13px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;color:var(--tc-ink)}
.tc-pop-row{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:12px;transition:background .2s var(--tc-ease)}
.tc-pop-row:hover{background:rgba(26,26,24,.035)}
.tc-pop-dot{width:7px;height:7px;border-radius:50%;background:var(--tc-accent-2);flex:none;margin-top:6px}
.tc-pop-dot.mute{background:rgba(26,26,24,.16)}
.tc-pop-txt{font-size:12.5px;line-height:1.45;color:var(--tc-ink-2);min-width:0}
.tc-pop-txt b{color:var(--tc-ink);font-weight:600}
.tc-pop-txt span{display:block;font-size:11px;color:var(--tc-ink-3);margin-top:2px}
.tc-pop-sep{height:1px;background:var(--tc-line-2);margin:10px 0}
.tc-pop-link{
  display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:12px;
  font-size:13px;font-weight:500;color:var(--tc-ink);text-decoration:none;
  transition:background .2s var(--tc-ease),color .2s var(--tc-ease);
}
.tc-pop-link:hover{background:rgba(26,26,24,.045)}
.tc-pop-link.on{background:rgba(246,215,91,.22)}
.tc-pop-link .ico{width:16px;height:16px;flex:none;stroke:var(--tc-ink-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tc-pop-link.on .ico{stroke:var(--tc-accent-deep)}
.tc-pop-empty{padding:14px 8px;font-size:12.5px;color:var(--tc-ink-3);text-align:center}

/* 内容区 */
.tc-content{position:relative;z-index:1}
.tc-page-title{
  margin:30px 2px 0;font-size:clamp(26px,2.6vw,38px);
  font-weight:450;letter-spacing:-.028em;line-height:1.05;
}

/* ============================================================================
   3 · 全站共享类（原 layout 内联样式的新皮肤）
   ========================================================================== */

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.stat-card{
  background:var(--tc-card);border-radius:var(--tc-r);padding:22px 24px;
  box-shadow:var(--tc-shadow-card);min-width:0;
  transition:box-shadow .35s var(--tc-ease),transform .35s var(--tc-ease);
}
.stat-card:hover{box-shadow:0 1px 2px rgba(32,28,14,.04),0 18px 34px -22px rgba(32,28,14,.24);transform:translateY(-2px)}
.stat-number{font-size:38px;font-weight:450;color:var(--tc-ink);letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.stat-label{font-size:14px;color:var(--tc-ink-2);margin-top:10px}
.table-card{
  background:var(--tc-card);border-radius:var(--tc-r);padding:22px 24px;
  box-shadow:var(--tc-shadow-card);margin-top:14px;
}
.filter-bar{display:flex;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.tag-connected{color:#3c8d3c}
.tag-disconnected{color:#c0392b}
[v-cloak]{display:none}

/* ============================================================================
   4 · Element Plus 主题覆盖
   ========================================================================== */

:root{
  --el-color-primary:#303030;
  --el-color-primary-light-3:#5a5a57;
  --el-color-primary-light-5:#8a8a86;
  --el-color-primary-light-7:#b9b9b4;
  --el-color-primary-light-8:#d3d3cd;
  --el-color-primary-light-9:#eeede7;
  --el-color-primary-dark-2:#1c1c1a;

  --el-text-color-primary:#1a1a18;
  --el-text-color-regular:#454540;
  --el-text-color-secondary:#6f6f69;
  --el-text-color-placeholder:#a3a39c;

  --el-border-color:rgba(26,26,24,.14);
  --el-border-color-light:rgba(26,26,24,.10);
  --el-border-color-lighter:rgba(26,26,24,.07);
  --el-border-color-extra-light:rgba(26,26,24,.05);

  --el-fill-color-blank:#fdfcf9;
  --el-bg-color:#fdfcf9;
  --el-bg-color-overlay:#fdfcf9;

  --el-border-radius-base:10px;
  --el-border-radius-small:8px;
  --el-border-radius-round:999px;

  --el-table-border-color:rgba(26,26,24,.07);
  --el-table-header-bg-color:rgba(26,26,24,.035);
  --el-table-header-text-color:#6f6f69;
  --el-table-row-hover-bg-color:rgba(246,215,91,.12);
  --el-table-bg-color:transparent;
  --el-table-tr-bg-color:transparent;

  --el-box-shadow-light:0 10px 22px -18px rgba(32,28,14,.2);
  --el-font-family:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
}

.el-button{border-radius:999px;font-weight:500}
.el-button.is-circle{border-radius:50%}
.el-button--small{border-radius:999px}
.el-button.is-text{border-radius:10px}

.el-input__wrapper,.el-textarea__inner{border-radius:12px}
.el-select__wrapper{border-radius:12px}

.el-tag{border-radius:999px;font-weight:500}
.el-alert{border-radius:16px}
.el-message{border-radius:999px}
.el-notification{border-radius:18px}
.el-message-box{border-radius:22px}
.el-dialog{border-radius:26px;box-shadow:0 40px 90px -50px rgba(30,28,16,.42)}
.el-dialog__header .el-dialog__title{font-weight:500;letter-spacing:-.01em}
.el-card{border-radius:20px}
.el-loading-mask{background-color:rgba(250,248,242,.72)}

.el-table th.el-table__cell{font-weight:500}
.el-table .el-table__inner-wrapper::before{background-color:rgba(26,26,24,.07)}
.el-pagination{--el-pagination-button-bg-color:transparent}

.el-form-item__label{font-weight:500}

/* ============================================================================
   5 · 入场与降级
   ========================================================================== */

.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--tc-ease),transform .8s var(--tc-ease);
  transition-delay:calc(var(--i,0) * 62ms + 140ms);
}
.tc-panel.in .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;transition-delay:0ms !important}
  .tc-panel{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
}

/* ============================================================================
   6 · 自适应
   ========================================================================== */

@media (max-width:1260px){
  .tc-nav{order:3;width:100%;flex:1 1 100%;margin:4px 0 0}
}
@media (max-width:820px){
  body{padding:14px 12px 22px}
  .tc-panel{padding:16px 14px 20px;border-radius:26px}
  .tc-logo{height:44px;padding:0 18px;font-size:16px}
  .tc-pillbtn{height:42px;padding:0 15px}
  .tc-pillbtn span{display:none}
  .tc-iconbtn,.tc-avatar-btn{width:42px;height:42px}
  .tc-actions{margin-left:auto}
  .tc-page-title{margin-top:22px}
  .table-card{padding:16px 14px;border-radius:20px}
  .stat-card{padding:16px 18px;border-radius:20px}
  .stat-number{font-size:30px}
  .tc-pop{width:min(300px,86vw)}
}