.dc-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 20px;
    border: 1px dashed var(--sg-border);
    border-radius: var(--sg-radius);
    background: var(--sg-surface);
}
.dc-state-icon {
    font-size: 34px;
    color: var(--sg-text-dim);
    margin-bottom: 14px;
}
.dc-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sg-text);
}
.dc-state-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--sg-text-muted);
    max-width: 320px;
}
.dc-state-btn {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    color: var(--sg-blue-deep);
    background: var(--sg-accent);
    font-weight: 600;
    text-decoration: none;
    transition: var(--sg-transition);
}
.dc-state-btn:hover {
    background: var(--sg-accent-light);
}
.dc-state-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.dc-empty-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.dc-state-btn-primary {
    color: #fff;
    background: var(--sg-blue-deep);
    box-shadow: 0 4px 14px rgba(47, 84, 158, 0.28);
}
.dc-state-btn-primary:hover {
    background: var(--sg-blue-mid);
}
.dc-empty-hints {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.dc-empty-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--sg-text-muted);
    background: var(--sg-bg-soft);
    border: 1px solid var(--sg-border);
    border-radius: 999px;
    text-decoration: none;
    transition: var(--sg-transition);
}
.dc-empty-hint:hover {
    color: var(--sg-blue-deep);
    border-color: var(--sg-accent);
}
.dc-state-jumps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.dc-state-jumps-label {
    font-size: 12px;
    color: var(--sg-text-dim);
}
.dc-state-jump {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--sg-text-secondary);
    background: var(--sg-bg-soft);
    border: 1px solid var(--sg-border);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--sg-transition);
}
.dc-state-jump:hover {
    color: var(--sg-blue-deep);
    border-color: var(--sg-accent);
}
.dc-quota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--sg-border);
  border-radius: 12px;
  background: var(--sg-bg-soft);
  font-size: 13px;
}
.dc-quota-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sg-text); }
.dc-quota-title i { color: #f59e0b; }
.dc-quota-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.08);
  color: var(--sg-text);
}
.dc-quota-item i { color: #0284c7; font-size: 12px; }
.dc-quota-item b { font-weight: 700; }
.dc-quota-item.warn { background: rgba(229, 72, 77, 0.1); }
.dc-quota-item.warn i, .dc-quota-item.warn b { color: #e5484d; }
.dc-quota-empty { color: var(--sg-text-muted); }
.dc-quota-help { margin-left: auto; font-size: 12px; color: #0284c7; text-decoration: none; }
.dc-quota-help:hover { text-decoration: underline; }
.dc-quota-exhausted { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: #e5484d; }