/* ===== Platform Credential Cards ===== */
.acl-cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.acl-cred-card{background:var(--md-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);overflow:hidden;border:1px solid transparent;transition:border-color .25s var(--ease-spring),box-shadow .25s var(--ease-spring),transform .25s var(--ease-spring)}
.acl-cred-card:hover{border-color:var(--md-primary-container);box-shadow:0 6px 20px rgba(0,82,217,.08);transform:translateY(-2px)}
.acl-cred-head{padding:16px 18px 12px;display:flex;align-items:center;gap:10px}
.acl-cred-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.acl-cred-info{flex:1;min-width:0}
.acl-cred-name{font-size:14px;font-weight:600;font-family:var(--font-family-display)}
.acl-cred-sub{font-size:11px;color:var(--md-outline);margin-top:2px}
.acl-cred-status{display:inline-flex;align-items:center;gap:3px;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600}
.acl-cred-body{padding:0 18px 14px;font-size:12px;color:var(--md-on-surface-variant);display:flex;flex-direction:column;gap:6px}
.acl-cred-row{display:flex;align-items:center;gap:6px}
.acl-cred-row-label{min-width:78px;font-weight:500;color:var(--md-outline)}
.acl-cred-row-val{font-family:var(--font-family-mono);color:var(--md-on-surface);word-break:break-all}
.acl-cred-mask{letter-spacing:2px}

/* Credential Verification */
.acl-cred-verify{padding:0 18px 16px;border-top:1px dashed var(--md-surface-3);margin-top:2px}
.acl-cred-verify-header{display:flex;align-items:center;justify-content:space-between;padding:10px 0 8px}
.acl-cred-verify-title{font-size:11px;font-weight:600;color:var(--md-on-surface-variant);display:flex;align-items:center;gap:4px}
.acl-cred-verify-title .material-symbols-outlined{font-size:14px}
.acl-verify-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:14px;font-size:11px;font-weight:600;border:1.5px solid var(--md-primary);background:transparent;color:var(--md-primary);cursor:pointer;font-family:inherit;transition:all .25s cubic-bezier(.2,0,0,1);position:relative;overflow:hidden}
.acl-verify-btn::before{content:'';position:absolute;inset:0;background:var(--md-primary);opacity:0;transition:opacity .2s}
.acl-verify-btn:hover::before{opacity:.08}
.acl-verify-btn:hover{transform:scale(1.02);box-shadow:0 2px 8px rgba(0,82,217,.2)}
.acl-verify-btn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
.acl-verify-btn .material-symbols-outlined{font-size:14px}
.acl-verify-checks{display:flex;flex-direction:column;gap:6px}
.acl-verify-item{display:flex;align-items:center;gap:10px;font-size:11px;padding:6px 10px;border-radius:8px;transition:all .3s cubic-bezier(.2,0,0,1);background:transparent}
.acl-verify-item-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s cubic-bezier(.2,0,0,1)}
.acl-verify-item-icon .material-symbols-outlined{font-size:13px}
.avi-pass{background:rgba(30,142,62,.06)}.avi-pass .acl-verify-item-icon{background:var(--md-success-container);box-shadow:0 0 0 3px rgba(30,142,62,.12)}.avi-pass .acl-verify-item-icon .material-symbols-outlined{color:var(--md-success)}
.avi-fail{background:rgba(217,48,37,.06)}.avi-fail .acl-verify-item-icon{background:var(--md-error-container);box-shadow:0 0 0 3px rgba(217,48,37,.12)}.avi-fail .acl-verify-item-icon .material-symbols-outlined{color:var(--md-error)}
.avi-warn{background:rgba(227,116,0,.06)}.avi-warn .acl-verify-item-icon{background:var(--md-warning-container);box-shadow:0 0 0 3px rgba(227,116,0,.12)}.avi-warn .acl-verify-item-icon .material-symbols-outlined{color:var(--md-warning)}
.avi-pending{background:rgba(0,82,217,.04)}.avi-pending .acl-verify-item-icon{background:var(--md-primary-container);animation:verifyPulse 1.2s ease-in-out infinite}.avi-pending .acl-verify-item-icon .material-symbols-outlined{color:var(--md-primary);animation:spin 1s linear infinite}
.avi-idle .acl-verify-item-icon{background:var(--md-surface-2)}.avi-idle .acl-verify-item-icon .material-symbols-outlined{color:var(--md-outline)}
.acl-verify-item-label{flex:1;color:var(--md-on-surface-variant);font-weight:500;transition:color .3s}
.avi-pass .acl-verify-item-label{color:var(--md-success);font-weight:600}.avi-fail .acl-verify-item-label{color:var(--md-error);font-weight:600}.avi-warn .acl-verify-item-label{color:var(--md-warning);font-weight:600}
.acl-verify-item-detail{font-size:10px;color:var(--md-outline);font-family:var(--font-family-mono);transition:all .3s;opacity:0;transform:translateX(-8px)}
.avi-pass .acl-verify-item-detail,.avi-fail .acl-verify-item-detail,.avi-warn .acl-verify-item-detail{opacity:1;transform:translateX(0)}
.acl-verify-time{font-size:10px;color:var(--md-outline);margin-top:6px;display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;background:var(--md-surface-1);transition:all .3s}
.acl-verify-time .material-symbols-outlined{font-size:12px}
@keyframes verifyPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,82,217,.3)}50%{box-shadow:0 0 0 6px rgba(0,82,217,0)}}
@keyframes checkPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes verifySlideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.acl-verify-running .acl-verify-item{animation:verifySlideIn .4s cubic-bezier(.2,0,0,1) forwards}

/* Add new channel card */
.acl-cred-add{border:2px dashed var(--md-outline-variant) !important;box-shadow:none !important;cursor:pointer;min-height:120px}
.acl-cred-add-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:inherit;padding:32px 16px}

/* Auth method buttons */
.cred-auth-method{transition:all .2s ease !important}
.cred-auth-method:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1) !important}

/* ===== Token-Groups Panels (single/workspace/agency shared) ===== */
/* 让 inline-style 渲染出来的面板在暗色模式下保持正确的前景色，
   浏览器对 <input>/<select> 默认使用系统色，在深色背景下会不可读。 */
#cred-tencent-token-groups input,
#cred-tencent-token-groups select,
#cred-tencent-token-groups textarea,
.inst-mount-acct-popup input,
.inst-mount-acct-popup select,
.inst-mount-acct-popup textarea{color:var(--md-on-surface);font-family:inherit}
#cred-tencent-token-groups select option,
.inst-mount-acct-popup select option{color:var(--md-on-surface);background:var(--md-surface)}
#cred-tencent-token-groups input::placeholder,
.inst-mount-acct-popup input::placeholder{color:var(--md-outline)}
/* 表头/表格边框在暗色下若退化，使用 surface-3 token 做显式声明 */
#cred-tencent-token-groups table thead tr{background:var(--md-surface) !important}
#cred-tencent-token-groups table tbody tr,
.inst-mount-acct-popup table tbody tr{color:var(--md-on-surface)}
/* 行内 Token 复制按钮在暗色下的悬停反馈 */
#cred-tencent-token-groups button[title="复制 Token"]:hover{background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* Dark mode specific fine-tuning for the merged single-account panel &
   legacy workspace/agency cards. Keeps contrast above WCAG AA. */
[data-theme="dark"] #cred-tencent-token-groups input,
[data-theme="dark"] #cred-tencent-token-groups select,
[data-theme="dark"] .inst-mount-acct-popup input,
[data-theme="dark"] .inst-mount-acct-popup select{
  background:var(--md-surface-2);
  border-color:var(--md-surface-4);
}
[data-theme="dark"] #cred-tencent-token-groups input:focus,
[data-theme="dark"] #cred-tencent-token-groups select:focus,
[data-theme="dark"] .inst-mount-acct-popup input:focus,
[data-theme="dark"] .inst-mount-acct-popup select:focus{
  border-color:var(--md-primary);
  outline:none;
  box-shadow:0 0 0 2px rgba(163,196,255,.18);
}
[data-theme="dark"] #cred-tencent-token-groups table thead tr,
[data-theme="dark"] .inst-mount-acct-popup table thead tr{background:var(--md-surface-2) !important}
[data-theme="dark"] #cred-tencent-token-groups table tbody tr:hover td,
[data-theme="dark"] .inst-mount-acct-popup table tbody tr:hover td{background:rgba(163,196,255,.04)}
[data-theme="dark"] #cred-tencent-token-groups [data-cred-single-panel],
[data-theme="dark"] #cred-tencent-token-groups [data-cred-group]{background:var(--md-surface-2);border-color:var(--md-surface-4)}

/* ===== Pager buttons (shared by single / workspace / agency panels) ===== */
.acl-cred-pager-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:64px;height:26px;padding:0 12px;
  font-size:11px;font-weight:500;font-family:inherit;
  border-radius:6px;border:1px solid var(--md-surface-3);
  background:var(--md-surface);color:var(--md-on-surface);
  cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.acl-cred-pager-btn:hover:not(:disabled){
  background:var(--md-primary-container);
  border-color:var(--md-primary);
  color:var(--md-on-primary-container);
}
.acl-cred-pager-btn:active:not(:disabled){
  background:var(--md-primary);color:#fff;border-color:var(--md-primary);
}
.acl-cred-pager-btn:disabled{
  opacity:.45;cursor:not-allowed;
  background:var(--md-surface-1);color:var(--md-outline);
  border-color:var(--md-surface-2);
}

/* Dark-mode tuning: Material defaults on <button> lose contrast against dark surface */
[data-theme="dark"] .acl-cred-pager-btn{
  background:var(--md-surface-2);
  border-color:var(--md-surface-4);
  color:var(--md-on-surface);
}
[data-theme="dark"] .acl-cred-pager-btn:hover:not(:disabled){
  background:rgba(163,196,255,.12);
  border-color:var(--md-primary);
  color:var(--md-primary);
}
[data-theme="dark"] .acl-cred-pager-btn:disabled{
  background:var(--md-surface-1);
  border-color:var(--md-surface-3);
  color:var(--md-outline);
}

/* ===== Partial-pull banner (workspace/agency token 超时续拉提示) =====
   需要在亮色/暗色两套主题下都保持足够对比度；之前用 inline
   var(--md-warning-container, #FFF4E5) + 深棕字的方案在暗色模式下
   会被浏览器默认色覆盖成「浅黄底 / 黑字」，可读性极差。改为 class
   托管配色，暗色下翻成半透明暖色面板 + 暖色文字。 */
.acl-cred-partial-banner{
  background:var(--md-warning-container,#FFF4E5);
  border:1px solid var(--md-warning,#E37400);
  color:var(--md-on-warning-container,#7A3E00);
}
.acl-cred-partial-banner strong{color:inherit;font-weight:600}
.acl-cred-partial-banner-icon{color:var(--md-warning,#E37400)}
.acl-cred-partial-banner-btn{
  border:1px solid var(--md-warning,#E37400);
  background:var(--md-warning,#E37400);
  color:#fff;
  font-family:inherit;font-weight:500;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.acl-cred-partial-banner-btn:hover{filter:brightness(1.05)}

[data-theme="dark"] .acl-cred-partial-banner{
  /* 直接用透明叠加色，不依赖主题里不一定定义的 warning-container token */
  background:rgba(227,116,0,.14);
  border-color:rgba(227,116,0,.55);
  color:#F5D6A6;
}
[data-theme="dark"] .acl-cred-partial-banner-icon{color:#F5A045}
[data-theme="dark"] .acl-cred-partial-banner-btn{
  background:transparent;
  border-color:#F5A045;
  color:#F5A045;
}
[data-theme="dark"] .acl-cred-partial-banner-btn:hover{
  background:rgba(245,160,69,.18);
  color:#FFD59E;
  border-color:#FFD59E;
}