/* ===== Base ===== */
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f3f4f6; }

/* ===== Tabs ===== */
.tab-active { border-bottom: 3px solid #2563eb; color: #1e40af; font-weight: 600; }
.tab { padding: .75rem 1.25rem; cursor: pointer; color: #6b7280; border-bottom: 3px solid transparent; transition: .2s; }
.tab:hover { color: #374151; }

/* ===== Cards ===== */
.card { background: #fff; border-radius: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* ===== Buttons ===== */
.btn-primary { background: #2563eb; color: #fff; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; border: none; cursor: pointer; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #dc2626; color: #fff; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; border: none; cursor: pointer; }
.btn-danger:hover { background: #b91c1c; }
.btn-secondary { background: #e5e7eb; color: #374151; padding: .5rem 1rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; border: none; cursor: pointer; }
.btn-secondary:hover { background: #d1d5db; }

/* ===== Form ===== */
.input { border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; width: 100%; box-sizing: border-box; }
.input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.label { font-size: .75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .025em; margin-bottom: .25rem; display: block; }
textarea.input { min-height: 120px; font-family: monospace; }

/* ===== Pre-style textarea for HTML body ==== */
.pre-textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
  font-size: 13px; line-height: 1.6; padding: .75rem;
  border: 1px solid #d1d5db; border-radius: .5rem;
  background: #1e1e2e; color: #cdd6f4;
  tab-size: 2; white-space: pre; overflow: auto;
  box-sizing: border-box;
}
.pre-textarea:focus { outline: none; box-shadow: 0 0 0 2px #bfdbfe; }

/* ===== Layout ===== */
.grid-2 { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ===== Badges ===== */
.badge { display: inline-block; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f3f4f6; color: #4b5563; }

/* ===== Tables ===== */
table { width: 100%; font-size: .875rem; border-collapse: collapse; }
th { text-align: left; padding: .75rem; font-weight: 600; color: #6b7280; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
td { padding: .75rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
tr:hover td { background: #f9fafb; }
.truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Stats ===== */
.stat-card { padding: 1.25rem; border-radius: .75rem; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* ===== Modal ===== */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal-bg.open { display: flex; }
.modal { background: #fff; border-radius: .75rem; max-width: 700px; width: 90%; max-height: 80vh; overflow: auto; padding: 1.5rem; }

/* ===== Toast ===== */
.toast { position: fixed; top: 1rem; right: 1rem; padding: .75rem 1rem; border-radius: .5rem; color: #fff; font-size: .875rem; font-weight: 500; transform: translateX(120%); transition: .3s; z-index: 60; }
.toast.show { transform: translateX(0); }

/* ===== Utility ===== */
.hidden { display: none !important; }

/* ===== Iframe ===== */
iframe { border: 1px solid #e5e7eb; border-radius: .5rem; width: 100%; min-height: 240px; background: #fff; }
.editor-panel { min-height: 70vh; display: flex; flex-direction: column; }
.preview-panel { min-height: 70vh; display: flex; flex-direction: column; }
.editor-layout { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.editor-body-wrap { min-height: 200px; flex: 1; position: relative; display: flex; flex-direction: column; }
.preview-frame-wrap { flex: 1; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; background: #fff; min-height: 200px; }
.preview-frame-wrap iframe { width: 100%; height: 100%; border: none; border-radius: 0; min-height: 0; }