.page { padding: 40px 20px; max-width: 1100px; margin: 0 auto; }
.page h1 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.page .subtitle { color: #888; margin-bottom: 24px; font-size: 14px; }

label {
  display: block; font-size: 13px; font-weight: 600; color: #aaa;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.btn {
  padding: 9px 16px; background: #141414; border: 1px solid #2a2a2a;
  color: #ccc; border-radius: 6px; font-size: 13px; cursor: pointer;
  transition: all 0.15s; font-family: inherit;
}
.btn:hover { border-color: #ff4444; color: #fff; background: #1f1f1f; }
.btn.copied { color: #4ade80; border-color: #4ade80; }

.grid-wrap {
  background: #0d0d0d; border: 1px solid #262626; border-radius: 10px;
  padding: 12px; overflow-x: auto; margin-bottom: 16px;
}
table.editor {
  border-collapse: collapse; width: 100%; min-width: 400px;
}
table.editor th, table.editor td {
  border: 1px solid #2a2a2a; padding: 0; background: #0a0a0a;
}
table.editor th {
  background: #141414; font-weight: 700;
}
table.editor [contenteditable] {
  padding: 8px 10px; min-height: 32px; outline: none;
  font-family: inherit; font-size: 13px; color: #e1e1e1;
}
table.editor [contenteditable]:focus { background: #1a1a1a; }
table.editor th [contenteditable] { color: #fff; }

.align-indicator {
  display: inline-block; margin-right: 6px; padding: 1px 5px;
  background: #2a2a2a; color: #aaa; border-radius: 3px;
  font-family: 'SF Mono', monospace; font-size: 10px; cursor: pointer;
  user-select: none;
}
.align-indicator:hover { background: #ff4444; color: #fff; }

th .th-wrap { display: flex; align-items: center; }
th .th-wrap [contenteditable] { flex: 1; cursor: text; }
th .sort-btn {
  background: transparent; border: none; color: #666; cursor: pointer;
  padding: 0 6px; font-size: 12px;
}
th .sort-btn:hover { color: #ff4444; }

textarea {
  width: 100%; min-height: 200px; resize: vertical;
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 10px;
  color: #e1e1e1; font-size: 13px; padding: 14px; outline: none;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  line-height: 1.5; transition: border-color 0.2s; tab-size: 2;
}
textarea:focus { border-color: #ff4444; }

.import-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.import-inner {
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 24px; max-width: 600px; width: 100%;
}
.import-inner h3 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.import-inner .hint { color: #888; font-size: 13px; margin-bottom: 12px; }
.import-inner textarea { min-height: 180px; margin-bottom: 12px; }
.import-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 700px) {
  textarea { min-height: 160px; }
}