* { box-sizing: border-box; }
body {
  font-family: -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  margin: 0;
  background: #f4f5f7;
  color: #1f2430;
}
nav {
  background: #1f2430;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
}
nav a {
  color: #cbd2e1;
  text-decoration: none;
  font-size: 14px;
}
nav a.brand { color: #fff; font-weight: 600; margin-right: 16px; }
nav a:hover { color: #fff; }
nav form { margin-left: auto; }
nav button {
  background: none; border: none; color: #cbd2e1; cursor: pointer; font-size: 14px;
}
main { max-width: 960px; margin: 32px auto; padding: 0 24px; }
h1 { font-size: 22px; margin-bottom: 16px; }
.card {
  background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eee; font-size: 14px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d3d6de; border-radius: 6px; font-size: 14px;
}
textarea { font-family: ui-monospace, monospace; }
button, .btn {
  background: #3454d1; color: #fff; border: none; padding: 8px 16px; border-radius: 6px;
  cursor: pointer; font-size: 14px; margin-top: 12px; display: inline-block; text-decoration: none;
}
button.danger { background: #d1344e; }
.error { background: #fde2e2; color: #9b1c1c; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.muted { color: #6b7280; font-size: 13px; }
.dns-table { margin-top: 10px; }
.dns-table th { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.dns-table td { vertical-align: middle; }
.dns-table code { background: #f4f5f7; border: 1px solid #e1e4ea; border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.dns-table .dns-value { word-break: break-all; max-width: 360px; display: inline-block; }
.copy-btn { background: #eef0f5; color: #1f2430; border: 1px solid #d3d6de; padding: 4px 10px; margin: 0; font-size: 12px; border-radius: 5px; cursor: pointer; }
.copy-btn:hover { background: #e1e4ea; }
.tag-pill { display: inline-block; background: #eef0f5; color: #1f2430; border: 1px solid #d3d6de; padding: 4px 12px; border-radius: 14px; font-size: 13px; text-decoration: none; margin: 0 4px 4px 0; }
.tag-pill.active { background: #3454d1; color: #fff; border-color: #3454d1; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; }
.kpi-card .value { font-size: 26px; font-weight: 700; }
.kpi-card .label { font-size: 12px; color: #6b7280; margin-top: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge.verified { background: #d4f4dd; color: #14633d; }
.badge.pending { background: #fef3c7; color: #92400e; }
.badge.sent { background: #d4f4dd; color: #14633d; }
.badge.failed { background: #fde2e2; color: #9b1c1c; }
.badge.draft, .badge.sending { background: #e0e7ff; color: #3730a3; }
iframe.preview { width: 100%; height: 300px; border: 1px solid #d3d6de; border-radius: 6px; margin-top: 8px; }

/* Hosting module */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.site-card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #eceef2; transition: box-shadow .15s, transform .15s; }
.site-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }
.site-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.site-card-head .domain { font-weight: 700; font-size: 15px; word-break: break-all; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1fbf6c; margin-right: 6px; box-shadow: 0 0 0 3px rgba(31,191,108,0.15); }
.site-card .stats { display: flex; gap: 14px; margin: 10px 0; font-size: 12px; color: #6b7280; }
.site-card .stats strong { color: #1f2430; font-size: 13px; }
.site-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.site-card-actions a, .site-card-actions button { margin-top: 0; padding: 7px 12px; font-size: 13px; }
.site-card-actions form { flex: none; }
.btn-outline { background: #fff; color: #3454d1; border: 1px solid #c8d0f7; }
.btn-outline:hover { background: #f2f4ff; }
.empty-state { text-align: center; padding: 48px 16px; color: #6b7280; }
.empty-state .icon { font-size: 40px; margin-bottom: 8px; }

.breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; margin-bottom: 14px; }
.breadcrumb a { color: #3454d1; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #b0b5c0; }

.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar button { margin-top: 0; }
.toolbar-panel { display: none; background: #f8f9fb; border: 1px solid #eceef2; border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.toolbar-panel.open { display: block; }

.dropzone { border: 2px dashed #c8ccd6; border-radius: 8px; padding: 22px; text-align: center; color: #6b7280; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; }
.dropzone:hover, .dropzone.drag { background: #f2f4ff; border-color: #3454d1; }

.file-table tr.file-row:hover { background: #f8f9fb; }
.file-table .file-name { display: flex; align-items: center; gap: 8px; }
.file-table .file-icon { font-size: 16px; width: 20px; text-align: center; flex: none; }
.file-table .file-actions { display: flex; gap: 6px; justify-content: flex-end; }
.file-table .file-actions button, .file-table .file-actions a { margin-top: 0; padding: 4px 10px; font-size: 12px; }

.editor-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.editor-toolbar .hint { font-size: 12px; color: #6b7280; }
.CodeMirror { height: 65vh; border: 1px solid #d3d6de; border-radius: 6px; font-size: 13px; }
.toast { position: fixed; bottom: 24px; right: 24px; background: #1f2430; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }