.btn {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-13);
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--font-13);
  font-weight: var(--weight-500);
  transition: color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.btn:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary-border);
}

.btn-primary {
  color: var(--c-gray-050);
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  color: var(--c-gray-050);
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.btn-ghost {
  border-color: var(--c-transparent);
  background: var(--c-transparent);
}

.btn-small {
  min-height: var(--s-28);
  padding: var(--s-4) var(--s-9);
  font-size: var(--font-12);
}

.btn:disabled,
.is-disabled {
  opacity: var(--opacity-disabled);
}

.icon-button {
  width: var(--s-32);
  height: var(--s-32);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  font-size: var(--font-14);
  transition: color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.icon-button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
}

.card {
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.card-header {
  min-height: var(--s-40);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-11) var(--s-14);
  border-bottom: var(--s-1) solid var(--color-divider);
}

.card-header h2,
.card-header h3 {
  font-size: var(--font-14);
  font-weight: var(--weight-700);
}

.card-body {
  padding: var(--s-14) var(--s-16);
}

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

.faint {
  color: var(--color-text-faint);
}

.up {
  color: var(--color-up);
}

.down {
  color: var(--color-down);
}

.warning {
  color: var(--color-warning);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-20);
  padding: var(--s-1) var(--s-7);
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--tag-radius);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  font-size: var(--font-11);
}

.tag-admin {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.tag-vip {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
  font-weight: var(--weight-800);
}

.field {
  display: grid;
  gap: var(--s-6);
}

.field label,
.field-label {
  color: var(--color-text-secondary);
  font-size: var(--font-12);
  font-weight: var(--weight-600);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--s-36);
  padding: var(--s-8) var(--s-12);
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--font-13);
}

.textarea {
  min-height: var(--s-64);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-faint);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-primary-border);
}

.form-grid {
  display: grid;
  gap: var(--s-12);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-8);
  padding-top: var(--s-4);
}

.field-error {
  color: var(--color-up);
  font-size: var(--font-11-5);
}

.notice {
  padding: var(--s-10) var(--s-12);
  border: var(--s-1) solid var(--color-primary-border);
  border-radius: var(--control-radius);
  color: var(--color-text-secondary);
  background: var(--color-primary-soft);
  font-size: var(--font-12);
  line-height: var(--s-18);
}

.notice-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.membership-lock {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}

.membership-lock span {
  flex: 1;
}

.locked-content {
  pointer-events: none;
  opacity: var(--opacity-muted);
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: var(--s-16);
  background: var(--color-overlay);
}

.dialog {
  width: min(100%, var(--s-dialog));
  max-height: calc(100vh - var(--s-34));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-float);
}

.dialog-wide {
  width: min(100%, var(--s-dialog-wide));
}

.dialog-header {
  min-height: var(--s-46);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-14);
  border-bottom: var(--s-1) solid var(--color-divider);
}

.dialog-title {
  font-size: var(--font-14);
  font-weight: var(--weight-700);
}

.dialog-close {
  margin-left: auto;
}

.dialog-body {
  overflow: auto;
  padding: var(--s-14) var(--s-16) var(--s-16);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-64);
  z-index: var(--z-toast);
  max-width: min(var(--s-400), calc(100vw - var(--s-32)));
  padding: var(--s-10) var(--s-14);
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-float);
  font-size: var(--font-12-5);
  transform: translateX(-50%);
}

.empty-state {
  min-height: var(--s-200);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-8);
  padding: var(--s-44) var(--s-16);
  text-align: center;
}

.empty-mark {
  width: var(--s-30);
  height: var(--s-30);
  display: grid;
  place-items: center;
  border: var(--s-1) solid var(--color-border);
  border-radius: var(--radius-round);
  color: var(--color-text-faint);
  background: var(--color-surface-muted);
}

.empty-state h2 {
  color: var(--color-text-secondary);
  font-size: var(--font-14);
  font-weight: var(--weight-600);
}

.empty-state p {
  max-width: var(--s-400);
  color: var(--color-text-secondary);
  font-size: var(--font-12);
  line-height: var(--s-18);
}
