/* ============================================================
   TTS Relay 控制台样式
   规范：深炭底 + 单一琥珀 accent；只动 transform/opacity；
   全部动效尊重 prefers-reduced-motion；无外链资源（CSP 合规）。
   ============================================================ */
:root{
  --bg:#0e0f13; --surface:#15171d; --surface2:#1b1e26; --line:#262a34;
  --fg:#e9ebf0; --muted:#98a1b0; --faint:#6b7484;
  --acc:#e3a44a; --acc-hi:#f0b45e; --acc-ink:#1a1405;
  --good:#57b98a; --bad:#e06c75; --warn:#d9a441;
  --r-card:14px; --r-ctl:8px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
/* hidden 属性必须赢过 class 的 display 设置 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
b,.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
::selection{background:rgba(227,164,74,.28)}
.copy-helper{position:fixed;left:-9999px;top:0;opacity:0}

/* ---------------- 登录页（独立整页） ---------------- */
.page-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
}
/* 背景光斑：静态径向渐变，不动画（GPU 友好） */
.page-login::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 420px at 22% 18%, rgba(227,164,74,.09), transparent 62%),
    radial-gradient(720px 520px at 82% 84%, rgba(87,185,138,.06), transparent 60%);
}
.login-shell{position:relative; width:100%; max-width:400px}
.login-card{
  background:rgba(21,23,29,.78);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08); border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.5);
  padding:34px 32px 26px;
  animation:card-in .5s var(--ease) both;
}
@keyframes card-in{ from{opacity:0; transform:translateY(14px) scale(.985)} }
.brand{display:flex; align-items:center; gap:13px; margin-bottom:26px}
.brand-logo{width:34px; height:34px; color:var(--acc); flex:none}
.brand-name{font-size:19px; font-weight:700; margin:0; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted); margin:1px 0 0}
.login-form{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field-label{font-size:12px; color:var(--muted); letter-spacing:.3px}
.field input{
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-ctl);
  color:var(--fg); padding:9px 11px; font-size:14px; width:100%;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder{color:var(--faint)}
.field input:focus{
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(227,164,74,.14);
}
.pw-wrap{position:relative; display:block}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--faint); cursor:pointer;
  padding:6px; border-radius:6px; line-height:0;
  transition:color .15s;
}
.pw-toggle:hover{color:var(--fg)}
.login-msg{min-height:1.2em; margin:0; font-size:13px; color:var(--bad)}
.login-msg:empty{min-height:0}
.page-login.shake .login-card{animation:shake .4s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}
}
.login-foot{margin:22px 0 0; font-size:12px; color:var(--faint); text-align:center}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:0; border-radius:var(--r-ctl); padding:9px 16px;
  font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap;
  transition:transform .12s var(--ease), background-color .15s, border-color .15s, color .15s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-primary{background:var(--acc); color:var(--acc-ink)}
.btn-primary:hover:not(:disabled){background:var(--acc-hi)}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){color:var(--fg); border-color:#3a4152}
.btn-block{width:100%; padding:11px 16px; font-size:14.5px; letter-spacing:1px}
.btn-danger:hover:not(:disabled){color:var(--bad); border-color:rgba(224,108,117,.45)}

/* ---------------- 控制台骨架 ---------------- */
.panel-view{max-width:1180px; margin:0 auto; padding:20px 22px 40px}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:6px 2px 18px; flex-wrap:wrap;
}
.topbar .brand-logo{width:28px; height:28px}
.topbar .brand-name{font-size:16px}
.topbar-right{display:flex; align-items:center; gap:10px}
.conn{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 12px;
}
.pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none}
.conn.ok .pulse-dot{background:var(--good); animation:breathe 2.2s ease-in-out infinite}
.conn.bad .pulse-dot{background:var(--bad)}
@keyframes breathe{50%{opacity:.3}}
.who{font-size:12px; color:var(--muted)}
.main{display:flex; flex-direction:column; gap:14px}

/* 入场 stagger（nth-child 设延迟，避免内联 style 属性） */
.main > section{animation:rise .45s var(--ease) both}
.main > section:nth-child(1){animation-delay:0ms}
.main > section:nth-child(2){animation-delay:60ms}
.main > section:nth-child(3){animation-delay:120ms}
.main > section:nth-child(4){animation-delay:180ms}
.main > section:nth-child(5){animation-delay:240ms}
@keyframes rise{ from{opacity:0; transform:translateY(10px)} }

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:18px 20px;
}
.block-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.block-head h2{font-size:14.5px; margin:0; font-weight:650; letter-spacing:.2px}
.chip{
  font-size:11.5px; color:var(--muted); background:var(--surface2);
  border:1px solid var(--line); border-radius:999px; padding:2px 10px; white-space:nowrap;
}

/* ---------------- 统计 bento ---------------- */
.grid-stats{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:14px}
.stat-wide{grid-column:span 1}
.stat-head{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  margin-bottom:8px;
}
.stat-num{display:block; font-size:27px; font-weight:700; line-height:1.15; letter-spacing:-.3px}
.stat-sub{display:block; font-size:11.5px; color:var(--faint); margin-top:3px}
.good{color:var(--good)}

/* ---------------- 表单 ---------------- */
.form-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.form-row .field{flex:1 1 170px}
.form-row .grow{flex:2 1 240px}
.form-row .grow0{flex:0 0 96px}
.form-actions{display:flex; gap:8px; padding-bottom:1px}
.form-msg{min-height:1.2em; margin:10px 0 0; font-size:13px; color:var(--bad)}
.form-msg.ok{color:var(--good)}

/* 进度条 */
.prog{margin-top:14px}
.bar{
  height:7px; background:var(--surface2); border:1px solid var(--line);
  border-radius:999px; overflow:hidden;
}
#prog-fill{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--acc), var(--acc-hi));
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
  transition:width .35s var(--ease);
}
@keyframes shimmer{ to{background-position:-200% 0} }
.prog-text{font-size:12.5px; color:var(--muted); margin:8px 0 0}

/* ---------------- 表格 ---------------- */
.table-wrap{overflow-x:auto; margin:0 -4px; padding:0 4px}
table.grid{width:100%; border-collapse:collapse; font-size:13px}
table.grid th{
  text-align:left; font-size:11px; font-weight:600; color:var(--faint);
  letter-spacing:.8px; text-transform:uppercase;
  padding:4px 10px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.grid td{
  padding:9px 10px; border-bottom:1px solid rgba(38,42,52,.55);
  white-space:nowrap; max-width:230px; overflow:hidden; text-overflow:ellipsis;
}
table.grid tbody tr{transition:background-color .12s}
table.grid tbody tr:hover{background:rgba(255,255,255,.022)}
table.grid tbody tr:last-child td{border-bottom:0}
.td-empty{color:var(--faint); text-align:center; padding:26px 10px !important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}
.muted{color:var(--muted)}

/* 凭证单元格：打码文本 + 复制/显隐图标按钮 */
.cred-cell{display:inline-flex; align-items:center; gap:6px; max-width:100%}
.cred-text{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;
  color:var(--fg); letter-spacing:.5px; max-width:190px; overflow:hidden; text-overflow:ellipsis;
}
.cred-none{color:var(--faint); font-size:12px}
.icobtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:none; padding:0; line-height:0;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:var(--faint); cursor:pointer;
  transition:color .13s, border-color .13s, transform .12s var(--ease), background-color .13s;
}
.icobtn:hover{color:var(--acc); border-color:var(--line); background:rgba(227,164,74,.07)}
.icobtn:active{transform:scale(.9)}
.icobtn.copied{color:var(--good); border-color:rgba(87,185,138,.4)}

/* 状态徽章 */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  border-radius:999px; padding:2.5px 10px; white-space:nowrap;
}
.pill i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.pill.good{color:var(--good); background:rgba(87,185,138,.1)}
.pill.warn{color:var(--warn); background:rgba(217,164,65,.1)}
.pill.bad{color:var(--bad); background:rgba(224,108,117,.1)}
.pill.muted{color:var(--muted); background:rgba(152,161,176,.1)}

/* 行内小按钮 */
.mini{
  padding:3.5px 10px; font-size:12px; border-radius:6px; margin-right:6px;
  border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
  transition:color .13s, border-color .13s, transform .12s var(--ease);
}
.mini:last-child{margin-right:0}
.mini:hover{color:var(--fg); border-color:#3a4152}
.mini:active{transform:scale(.95)}
.mini.danger:hover{color:var(--bad); border-color:rgba(224,108,117,.45)}

.foot{font-size:11.5px; color:var(--faint); text-align:center; padding:10px 0 4px}

/* ---------------- 响应式 ---------------- */
@media (max-width:760px){
  .panel-view{padding:14px 12px 30px}
  .grid-stats{grid-template-columns:1fr 1fr}
  .topbar{gap:10px}
}

/* ---------------- 动效豁免 ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}