* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: #f4f6f8;
  color: #1a1a2e;
}

.topnav {
  background: #16213e;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.topnav .brand {
  color: #fff;
  font-weight: 700;
  margin-right: 16px;
  padding: 14px 0;
}

.topnav a {
  color: #cfd8e6;
  text-decoration: none;
  padding: 14px 10px;
  font-size: 14px;
}

.topnav a:hover { color: #fff; background: #0f3460; }

.topnav a.right { margin-left: auto; }

main {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 16px;
}

h1 { font-size: 22px; }
h2 { font-size: 17px; margin-top: 0; }

.box {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

label { display: block; margin-bottom: 12px; font-size: 14px; }

input[type=text], input[type=password], select, textarea {
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

textarea { resize: vertical; }

button {
  background: #0f3460;
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

button.primary { background: #e94560; }

.button-like {
  display: inline-block;
  background: #0f3460;
  color: #fff;
  padding: 9px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  margin-left: 8px;
}

button.link {
  background: none;
  color: #0f3460;
  padding: 0;
  text-decoration: underline;
}

button.danger, .link.danger { color: #c0392b; }

.actions { margin-top: 12px; display: flex; gap: 8px; }

.inline { display: inline; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #e3e8ef;
}

th { background: #f0f3f7; }

.cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.card {
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
}

.card:hover { border-color: #0f3460; }
.card h2 { margin: 0 0 6px; }
.card p { margin: 0; color: #555; }

.columns-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.chip {
  background: #eef2f7;
  border: 1px solid #d5dee9;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.col-btn {
  background: #eef2f7;
  color: #0f3460;
  border: 1px solid #d5dee9;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: monospace;
}

.message-item { border-bottom: 1px solid #eee; padding: 10px 0; }
.message-item pre { white-space: pre-wrap; font-family: inherit; margin: 6px 0; }

.campaign-item { padding: 10px 0; border-bottom: 1px solid #eee; }

.stats { display: flex; gap: 16px; margin: 16px 0; }
.stats div {
  flex: 1;
  background: #eef2f7;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.stats span { font-size: 24px; font-weight: 700; }

.progress { background: #e3e8ef; border-radius: 8px; height: 12px; margin-bottom: 16px; overflow: hidden; }
.progress-bar { background: #0f3460; height: 100%; width: 0; transition: width 0.4s; }

.hint { color: #667; font-size: 13px; }
.error { color: #c0392b; }
.success { color: #27ae60; }
.warn { color: #b7791f; }

.login-wrap {
  max-width: 360px;
  margin: 80px auto;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  padding: 24px;
}

.log-box {
  background: #16213e;
  color: #cfd8e6;
  padding: 16px;
  border-radius: 8px;
  font-size: 13px;
}

.row-actions { white-space: nowrap; }

.status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-delivered { background: #e6f7ec; color: #1a7f37; }
.status-sent { background: #eef2f7; color: #555; }
.status-failed, .status-expired, .status-rejected, .status-undelivered { background: #fdecea; color: #c0392b; }

.carrier-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.carrier-check {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef2f7;
  border: 1px solid #d5dee9;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 0;
}

.carrier-check input { width: auto; margin: 0; }

.estimate-result pre {
  background: #16213e;
  color: #cfd8e6;
  padding: 14px;
  border-radius: 8px;
  font-size: 12px;
  overflow-x: auto;
  margin-top: 12px;
}

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.flash-success { background: #e6f7ec; color: #1a7f37; border: 1px solid #b7e4c7; }
.flash-error { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }

.message-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #e3e8ef;
  border-radius: 8px;
  background: #fafbfc;
}

.rotation-content { width: 100%; font-family: inherit; }