/* 按钮 */
button {
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  border:none;
  border-radius:var(--radius-md);
  padding:11px 20px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 12px rgba(59,130,246,.25),inset 0 1px 0 rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}

button:before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;
  transition:opacity .2s;
}

button:hover:not(:disabled) {
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(59,130,246,.35),inset 0 1px 0 rgba(255,255,255,.15);
}

button:hover:not(:disabled):before { opacity:1; }

button:active:not(:disabled) {
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(59,130,246,.3);
}

button:disabled {
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
}

.btn-secondary {
  background:linear-gradient(135deg,#374151,#1f2937);
  box-shadow:0 4px 12px rgba(31,41,55,.25),inset 0 1px 0 rgba(255,255,255,.05);
}

.btn-secondary:hover:not(:disabled) {
  box-shadow:0 6px 16px rgba(31,41,55,.35),inset 0 1px 0 rgba(255,255,255,.08);
}

.btn-danger {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 4px 12px rgba(239,68,68,.25),inset 0 1px 0 rgba(255,255,255,.1);
}

.btn-danger:hover:not(:disabled) {
  box-shadow:0 6px 16px rgba(239,68,68,.35),inset 0 1px 0 rgba(255,255,255,.15);
}

.btn-warn {
  background:linear-gradient(135deg,#f59e0b,#d97706);
  box-shadow:0 4px 12px rgba(245,158,11,.25),inset 0 1px 0 rgba(255,255,255,.1);
}

.btn-warn:hover:not(:disabled) {
  box-shadow:0 6px 16px rgba(245,158,11,.35),inset 0 1px 0 rgba(255,255,255,.15);
}

.btn-success {
  background:linear-gradient(135deg,#10b981,#059669);
  box-shadow:0 4px 12px rgba(16,185,129,.25),inset 0 1px 0 rgba(255,255,255,.1);
}

.btn-success:hover:not(:disabled) {
  box-shadow:0 6px 16px rgba(16,185,129,.35),inset 0 1px 0 rgba(255,255,255,.15);
}

.btn-icon {
  padding:10px;
  aspect-ratio:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-sm {
  padding:8px 16px;
  font-size:13px;
}

/* 卡片 */
.card {
  background:linear-gradient(145deg,rgba(20,27,40,.7),rgba(15,20,32,.85));
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-md);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}

.card:before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.4),transparent);
  opacity:0;
  transition:opacity .3s;
}

.card:hover {
  border-color:var(--border-light);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.card:hover:before { opacity:1; }

/* 芯片/标签 */
.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:rgba(59,130,246,.15);
  border:1px solid rgba(59,130,246,.3);
  border-radius:20px;
  color:var(--accent-secondary);
  font-size:12px;
  font-weight:600;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}

.chip.chip-success {
  background:var(--success-bg);
  border-color:rgba(16,185,129,.3);
  color:var(--success);
}

.chip.chip-danger {
  background:var(--danger-bg);
  border-color:rgba(239,68,68,.3);
  color:var(--danger);
}

.chip.chip-warning {
  background:var(--warning-bg);
  border-color:rgba(245,158,11,.3);
  color:var(--warning);
}

.chip.chip-info {
  background:var(--info-bg);
  border-color:rgba(6,182,212,.3);
  color:var(--info);
}

/* 状态相关样式 */
.status-summary {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:14px;
}

.status-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
}

.status-active { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.status-disabled { background:rgba(156,163,175,.15); color:#9ca3af; border:1px solid rgba(156,163,175,.3); }
.status-error { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); }
.status-unknown { background:rgba(251,191,36,.15); color:#fbbf24; border:1px solid rgba(251,191,36,.3); }

.status-card {
  background:linear-gradient(145deg,rgba(20,27,40,.7),rgba(15,20,32,.85));
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}

.status-card:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--border);
}

.status-card.active:before { background:#22c55e; }
.status-card.disabled:before { background:#9ca3af; }
.status-card.error:before { background:#ef4444; }
.status-card.unknown:before { background:#fbbf24; }

.status-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.status-title {
  font-weight:600;
  color:var(--text-primary);
}

.status-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
}

/* 键值对列表 */
.kvs {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:10px 16px;
  font-size:13px;
}

.kvs-key {
  color:var(--text-muted);
  font-weight:500;
}

.kvs-value {
  color:var(--text-primary);
  word-break:break-all;
}

/* 代码块 */
.code {
  background:rgba(5,8,15,.8);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  color:#d8e8ff;
  max-height:300px;
  overflow:auto;
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4);
}

/* 日志容器 */
.log-container {
  background:rgba(5,8,15,.8);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  max-height:600px;
  overflow-y:auto;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4);
}

.log-entry {
  padding:10px 16px;
  border-bottom:1px solid rgba(45,55,72,.5);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:13px;
  line-height:1.5;
  transition:background .15s ease;
}

.log-entry:last-child {
  border-bottom:none;
}

.log-entry:hover {
  background:rgba(59,130,246,.05);
}

.log-time {
  color:var(--text-muted);
  margin-right:12px;
  font-weight:600;
}

.log-message {
  color:var(--text-secondary);
}

/* 开关 */
.switch {
  position:relative;
  display:inline-block;
  width:48px;
  height:26px;
}

.switch input { opacity:0; width:0; height:0; }

.slider {
  position:absolute;
  cursor:pointer;
  inset:0;
  background:linear-gradient(135deg,#374151,#1f2937);
  transition:.3s cubic-bezier(.4,0,.2,1);
  border-radius:26px;
  border:1px solid var(--border);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}

.slider:before {
  position:absolute;
  content:"";
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  transition:.3s cubic-bezier(.4,0,.2,1);
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}

input:checked+.slider {
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  box-shadow:0 0 12px rgba(59,130,246,.4),inset 0 2px 4px rgba(0,0,0,.2);
}

input:checked+.slider:before {
  transform:translateX(22px);
}

/* 加载状态 */
.loading {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.spinner {
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

/* 成功区域 */
.success-banner {
  background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.15));
  border:1px solid rgba(16,185,129,.3);
  border-radius:var(--radius-md);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  animation:fadeIn .3s ease-out;
}

.success-header {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--success);
  font-weight:600;
  font-size:15px;
}

.success-header:before {
  content:'✓';
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  background:var(--success);
  color:#fff;
  border-radius:50%;
  font-size:14px;
}