body { font-family: Arial, sans-serif; margin: 20px; color: #1b1b1b; background: #f5f7fb; }
h1, h2, h3 { margin: 0; }
p { color: #555; }
label { display: block; margin-top: 10px; font-weight: bold; }
input, textarea, select { width: 100%; padding: 8px; margin-top: 6px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
textarea { min-height: 160px; font-family: monospace; }
button { padding: 8px 14px; border: 1px solid #ccc; border-radius: 6px; background: #f6f6f6; cursor: pointer; }
button.primary { background: #007acc; border-color: #007acc; color: #fff; }
button.danger { background: #d9342b; border-color: #d9342b; color: #fff; }
button:hover { filter: brightness(0.98); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
pre { background: #f7f7f7; padding: 10px; overflow-x: auto; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { border: 1px solid #e0e0e0; padding: 8px; }
th { background: #f0f0f0; text-align: left; }
tr.selected { background: #e8f4ff; }
tbody tr:hover { background: #f3f9ff; }
.tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.tag-default { background: #fff4e5; color: #8a4b08; }
.tag-active { background: #e6ffed; color: #046307; }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.content { display: grid; grid-template-columns: 1fr; gap: 20px; }
.panel { border: 1px solid #e2e2e2; border-radius: 10px; padding: 16px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.status { margin-top: 12px; }
.modal-content .status { margin-top: 10px; }
.backup-panel { margin-top: 20px; }
.backup-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px dashed #c7d2e2; border-radius: 8px; cursor: pointer; background: #f9fbff; }
.backup-meta { font-size: 12px; color: #6b7280; }
.backup-content { display: none; margin-top: 10px; }
.backup-content.open { display: block; }
.icon-button { background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; }
.icon-button:hover { border-color: #d0d7e2; background: #f4f7fb; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-content { background: #fff; max-width: 720px; width: 100%; border-radius: 10px; padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-actions { display: flex; gap: 10px; margin-top: 12px; }
.edit-modal-content { width: 70vw; height: 90vh; max-width: 70vw; max-height: 90vh; overflow: auto; }
.edit-modal-content form { display: flex; flex-direction: column; gap: 10px; }
.edit-modal-content label { margin-top: 0; }
.headers-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.headers-left { display: flex; flex-direction: column; gap: 10px; }
.headers-right { border: 1px solid #e2e2e2; border-radius: 8px; padding: 10px; background: #fafafa; min-height: 180px; }
.header-add { display: flex; gap: 8px; align-items: center; }
.header-add input { width: 100%; }
.chip-section { display: flex; flex-direction: column; gap: 6px; }
.chip-title { font-size: 12px; font-weight: bold; color: #555; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid #d0d7e2; background: #f4f7fb; cursor: pointer; font-size: 12px; }
.chip.selected { background: #e8f4ff; border-color: #7db7ff; }
.chip-remove { display: none; font-size: 12px; padding: 0 4px; border-radius: 999px; background: #d9342b; color: #fff; }
.chip.selected .chip-remove { display: inline-flex; }
.headers-right pre { white-space: pre-wrap; word-break: break-word; min-height: 140px; }
.table-container { width: 100%; display: flex; justify-content: center; }
.table-container table { width: 95%; }
@media (max-width: 900px) {
  .content { grid-template-columns: 1fr; }
}