/* ============================================
   筑豆生态 · 账号面板 v1.0
   所有筑豆生态工具引用同一份,UI 像素级一致
   ============================================
   设计原则:
   - 完整 modal(自带遮罩 + 关闭),不依赖任何工具的 modal 系统
   - 深色主题(跟 topbar 视觉一致,作为生态层 overlay)
   - 不论工具自身是浅色(筑豆)还是深色(GEO),弹出的账号面板都是同一种视觉
   ============================================ */

.zda-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;z-index:200;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
.zda-overlay.zda-show{display:flex}

.zda-modal{
  background:#2a2a2a;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  width:760px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;
  overflow:hidden;color:#e5e5e5;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:zdaSlideUp .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes zdaSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

.zda-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 26px 16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.zda-title{font-size:17px;font-weight:600;color:#fff;margin-bottom:6px}
.zda-sub{font-size:12px;color:rgba(255,255,255,.55)}
.zda-tier{
  display:inline-block;font-size:9px;padding:2px 8px;border-radius:9px;
  background:linear-gradient(135deg,#3a8a5c,#52b07a);color:#fff;
  font-weight:700;letter-spacing:.3px;margin-left:6px;vertical-align:middle;
}
.zda-close{
  width:30px;height:30px;border:0;background:0;border-radius:6px;
  font-size:20px;color:rgba(255,255,255,.55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.zda-close:hover{background:rgba(255,255,255,.06);color:#fff}

.zda-tabs{
  display:flex;padding:0 26px;border-bottom:1px solid rgba(255,255,255,.06);gap:2px;
}
.zda-tab{
  height:38px;padding:0 14px;border:0;background:0;
  color:rgba(255,255,255,.55);font-size:13px;cursor:pointer;
  position:relative;transition:color .12s;
}
.zda-tab:hover{color:#fff}
.zda-tab.zda-active{color:#52b07a;font-weight:600}
.zda-tab.zda-active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:-1px;
  height:2px;background:#52b07a;border-radius:2px;
}

.zda-body{padding:20px 26px;overflow:auto;flex:1;min-height:240px}
.zda-body::-webkit-scrollbar{width:6px}
.zda-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

.zda-pane{display:none}
.zda-pane.zda-active{display:block}

.zda-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;
}
.zda-row:last-child{border-bottom:0}
.zda-row-k{color:rgba(255,255,255,.55)}
.zda-row-v{color:#e5e5e5}
.zda-row-v b{color:#fff;font-weight:600}

.zda-cta-row{display:flex;gap:8px;margin-top:18px}
.zda-btn-primary{
  padding:8px 16px;background:#52b07a;color:#fff;border:0;border-radius:6px;
  font-size:13px;font-weight:500;cursor:pointer;transition:background .15s;
}
.zda-btn-primary:hover{background:#3a8a5c}
.zda-btn-secondary{
  padding:8px 16px;background:0;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.15);border-radius:6px;
  font-size:13px;cursor:pointer;transition:all .15s;
}
.zda-btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}

.zda-tip{
  font-size:12px;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.04);padding:10px 12px;border-radius:6px;
  margin-top:14px;line-height:1.6;
}

/* === 会员状态紧凑横条(单行,不浪费空间) === */
.zda-member-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:8px;margin-bottom:14px;
  font-size:13px;
}
.zda-member-bar.zda-paid{
  background:linear-gradient(90deg,rgba(82,176,122,.15),rgba(82,176,122,.04));
  border:1px solid rgba(82,176,122,.25);
}
.zda-member-bar.zda-free{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.zda-member-pill{
  font-size:10px;font-weight:800;letter-spacing:.8px;
  background:linear-gradient(135deg,#3a8a5c,#52b07a);color:#fff;
  padding:2px 8px;border-radius:99px;flex-shrink:0;
}
.zda-member-text{
  flex:1;color:rgba(255,255,255,.85);font-size:12.5px;
}
.zda-member-text b{color:#fff;font-weight:600}
.zda-btn-link{
  background:0;border:0;color:rgba(255,255,255,.55);font-size:12px;
  cursor:pointer;padding:4px 6px;border-radius:4px;transition:color .12s,background .12s;
}
.zda-btn-link:hover{color:#fff;background:rgba(255,255,255,.06)}

/* === 用量进度条(类似 Claude,本周期豆子使用情况) === */
.zda-progress-block{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:14px 16px;margin-bottom:14px;
}
.zda-progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.zda-progress-label{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:500}
.zda-progress-num{
  font-size:13px;color:#fff;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.zda-progress-bar{
  height:6px;background:rgba(255,255,255,.06);
  border-radius:3px;overflow:hidden;
}
.zda-progress-fill{
  height:100%;background:#52b07a;border-radius:3px;
  transition:width .3s,background .3s;
}
.zda-progress-fill.zda-warn{background:#f0a84a}
.zda-progress-fill.zda-danger{background:#f07370}
.zda-progress-meta{
  font-size:11.5px;color:rgba(255,255,255,.5);margin-top:8px;
}

/* === 权益 chips(精简,一行带过) === */
.zda-feat-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;
}
.zda-chip{
  font-size:11.5px;padding:4px 10px;border-radius:99px;
  background:rgba(82,176,122,.12);color:#52b07a;
  border:1px solid rgba(82,176,122,.18);
}
.zda-chip.zda-chip-mute{
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.4);
  border-color:rgba(255,255,255,.08);
}
.zda-chip.zda-chip-btn{
  cursor:pointer;font:inherit;
  transition:background .12s,border-color .12s;
}
.zda-chip.zda-chip-btn:hover{
  background:rgba(82,176,122,.22);
  border-color:rgba(82,176,122,.4);
}

/* === BYOK 模式状态卡(替代进度条) === */
.zda-progress-block.zda-byok-mode{
  background:linear-gradient(90deg,rgba(143,189,184,.12),rgba(143,189,184,.04));
  border-color:rgba(143,189,184,.25);
}

/* === BYOK 配置子视图 === */
.zda-back-btn{
  background:0;border:0;color:rgba(255,255,255,.6);font-size:12.5px;
  cursor:pointer;padding:6px 10px 6px 0;margin-bottom:14px;
  transition:color .12s;
}
.zda-back-btn:hover{color:#fff}
.zda-byok-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px}
.zda-byok-desc{
  font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.7;
  margin-bottom:18px;background:rgba(255,255,255,.03);
  padding:12px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.04);
}
/* 三段式 BYOK 配置卡 */
.zda-byok-type{
  border:1px solid rgba(255,255,255,.08);border-radius:8px;
  margin-bottom:10px;background:rgba(255,255,255,.02);
  transition:border-color .15s,background .15s;
}
.zda-byok-type.zda-byok-on{
  border-color:rgba(82,176,122,.3);
  background:linear-gradient(90deg,rgba(82,176,122,.06),rgba(82,176,122,.02));
}
.zda-byok-type-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;
}
.zda-byok-type-title{
  font-size:13px;font-weight:600;color:#fff;
}
.zda-byok-type:not(.zda-byok-on) .zda-byok-type-title{color:rgba(255,255,255,.55)}
.zda-byok-type-body{
  padding:0 14px 12px;display:flex;flex-direction:column;gap:8px;
  display:none;
}
.zda-byok-type.zda-byok-on .zda-byok-type-body{display:flex}
.zda-byok-test-btn{
  align-self:flex-start;margin-top:2px;
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.1);border-radius:5px;
  padding:5px 12px;font-size:11.5px;cursor:pointer;
  transition:background .12s;
}
.zda-byok-test-btn:hover{background:rgba(255,255,255,.08);color:#fff}

/* iOS 风格 toggle 开关 */
.zda-toggle{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer}
.zda-toggle input{opacity:0;width:0;height:0}
.zda-toggle-slider{
  position:absolute;inset:0;background:rgba(255,255,255,.15);
  border-radius:20px;transition:background .2s;
}
.zda-toggle-slider::before{
  content:'';position:absolute;height:14px;width:14px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .2s;
}
.zda-toggle input:checked + .zda-toggle-slider{background:#52b07a}
.zda-toggle input:checked + .zda-toggle-slider::before{transform:translateX(16px)}

/* 部分 BYOK 提示 */
.zda-byok-partial{
  margin-top:8px;padding-top:8px;
  border-top:1px dashed rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
}

.zda-byok-row{display:flex;align-items:center;gap:12px}
.zda-byok-k{
  width:80px;flex-shrink:0;color:rgba(255,255,255,.55);
  font-size:12.5px;
}
.zda-byok-input{
  flex:1;height:34px;padding:0 12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:#fff;border-radius:6px;font-size:13px;
  outline:none;transition:border-color .15s,background .15s;
  font-family:inherit;
}
.zda-byok-input:focus{
  border-color:#52b07a;background:rgba(255,255,255,.06);
}
select.zda-byok-input{cursor:pointer;appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.zda-byok-pwd{flex:1;display:flex;gap:6px}
.zda-byok-pwd .zda-byok-input{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace}
.zda-byok-eye{
  height:34px;padding:0 12px;background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.1);
  border-radius:6px;font-size:12px;cursor:pointer;flex-shrink:0;
  transition:background .12s;
}
.zda-byok-eye:hover{background:rgba(255,255,255,.08);color:#fff}
.zda-byok-actions{display:flex;gap:8px;align-items:center;margin-top:6px}
.zda-byok-tips{
  display:flex;flex-direction:column;gap:6px;
  font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.7;
  padding:12px 14px;background:rgba(255,255,255,.025);
  border-radius:6px;border:1px solid rgba(255,255,255,.04);
}

/* === 加油包卡片 === */
.zda-packs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.zda-pack{
  background:#333;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color .15s,transform .15s;
}
.zda-pack:hover{border-color:#52b07a;transform:translateY(-2px)}
.zda-pack-cred{
  font-size:18px;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;
}
.zda-pack-price{font-size:14px;color:rgba(255,255,255,.85);font-weight:500}
.zda-pack-save{
  font-size:11px;color:#52b07a;font-weight:500;
  background:rgba(82,176,122,.15);padding:2px 8px;border-radius:9px;
}
.zda-pack-btn{
  margin-top:6px;padding:6px 16px;background:#52b07a;color:#fff;border:0;
  border-radius:5px;font-size:12px;font-weight:500;cursor:pointer;width:100%;
}
.zda-pack-btn:hover{background:#3a8a5c}

/* === 用量明细表格 === */
.zda-usage-table{width:100%;border-collapse:collapse;font-size:13px}
.zda-usage-table th{
  text-align:left;padding:10px 8px;color:rgba(255,255,255,.55);
  font-weight:500;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px;letter-spacing:.05em;
}
.zda-usage-table td{
  padding:11px 8px;border-bottom:1px solid rgba(255,255,255,.05);color:#e5e5e5;
}
.zda-usage-time{
  color:rgba(255,255,255,.4);font-size:12px;
  font-variant-numeric:tabular-nums;
}
.zda-usage-credits{
  color:#f0a84a;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;
}

/* === 跨工具跳转链接(强调"会离开当前工具") === */
.zda-cross-link{
  display:inline-flex;align-items:center;gap:4px;
  color:#52b07a;text-decoration:none;font-size:12px;
}
.zda-cross-link:hover{text-decoration:underline}
.zda-cross-link::after{content:'→';font-size:11px}

/* === 响应式 === */
@media(max-width:640px){
  .zda-modal{max-width:96vw;max-height:92vh}
  .zda-head{padding:18px 18px 12px}
  .zda-tabs{padding:0 18px;overflow-x:auto;white-space:nowrap}
  .zda-tab{height:36px;padding:0 10px;font-size:12px}
  .zda-body{padding:16px 18px}
  .zda-packs{grid-template-columns:1fr}
}