body { font-family: sans-serif; margin: 20px; background-color: #f5f5f5; }
.root a { color: #0000EE; text-decoration: underline; }
.root a:visited { color: #0000EE; }
.directory-listing { background: white; border: 1px solid #ddd; padding: 20px; max-width: 800px; margin: 0 auto; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px; border-bottom: 2px solid #ddd; }
td { padding: 8px 10px; border-bottom: 1px solid #eee; }
td i { display: inline-block; margin-right: 8px; width: 20px; text-align: center; }
.disabled { color: #999; text-decoration: line-through; }
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;
  width: 90%;
  max-width: 600px;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.button { background: #4CAF50; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.button.admin { background: #2196F3; }
.tool-checkboxes { columns: 3; margin: 10px 0; }
.tool-checkboxes label { display: block; margin: 5px 0; }
.back-button { margin-right: 15px; }
.directory-header { display: flex; align-items: center; }

@media (max-width: 768px) {
  body { margin: 10px; }
  .directory-listing { padding: 10px; }
  .header { flex-direction: column; align-items: flex-start; gap: 15px; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  .modal { width: 90%; max-width: none; padding: 15px; }
  .tool-checkboxes { columns: 1; }
  .directory-header { flex-wrap: wrap; gap: 10px; }
  .back-button { margin-right: 0; margin-bottom: 10px; }
}

@media (max-width: 480px) {
  .button { padding: 8px 12px; font-size: 14px; }
  td, th { padding: 6px 8px; }
}