:root {
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --text:#172033;
  --muted:#667085;
  --line:#e4e7ec;
  --primary:#087f78;
  --primary-strong:#066860;
  --primary-soft:#e6f6f4;
  --accent:#1d4ed8;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --warning:#b45309;
  --warning-soft:#fff7ed;
  --success:#067647;
  --success-soft:#ecfdf3;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding:28px 32px 52px !important;
  line-height:1.5;
  font-size:14px;
}
h1 {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px;
  font-size:26px !important;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 18px !important;
  color:#101828 !important;
}
h2 { font-size:22px; letter-spacing:-.015em; color:#101828; }
h3 { font-size:18px; margin:0 0 14px !important; color:#101828 !important; }
p { margin-top:0; }
a { color:var(--primary); }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; }

.top-nav {
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  margin:0 0 22px !important;
  padding:8px !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.03) !important;
}
.top-nav a,.top-nav button {
  text-decoration:none !important;
  margin:0 !important;
}

.card {
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  padding:22px !important;
  margin-bottom:20px !important;
}

button,.btn,.top-nav a {
  appearance:none;
  border:1px solid transparent !important;
  border-radius:var(--radius-sm) !important;
  font:inherit;
  font-weight:650 !important;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .05s ease;
}
button,.btn { padding:9px 14px !important; }
button:active,.btn:active { transform:translateY(1px); }
button:disabled,.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }
.btn-primary:hover { background:var(--primary-strong) !important; border-color:var(--primary-strong) !important; }
.btn-secondary { background:#eef2f6 !important; color:#253044 !important; border-color:#e1e6ed !important; }
.btn-secondary:hover { background:#e4eaf1 !important; }
.btn-danger { background:var(--danger) !important; color:#fff !important; border-color:var(--danger) !important; }
.btn-small { padding:6px 10px !important; font-size:12px !important; }

input,select,textarea {
  min-height:40px;
  border:1px solid #cfd6df !important;
  border-radius:var(--radius-sm) !important;
  background:#fff !important;
  color:var(--text) !important;
  font:inherit;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
input,select { padding:8px 10px !important; }
textarea { padding:10px 11px !important; }
input:focus,select:focus,textarea:focus {
  outline:none !important;
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(8,127,120,.12) !important;
}
label { color:#344054; }

.app-toolbar,.toolbar {
  display:flex !important;
  gap:9px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.app-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

.stat { display:inline-flex !important; flex-direction:column; min-width:130px; margin:0 28px 8px 0 !important; }
.stat .num { font-size:27px !important; font-weight:800 !important; color:#101828; letter-spacing:-.02em; }
.stat .label { font-size:12px !important; color:var(--muted) !important; }

.integration-grid,.summary-grid,.security-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:12px !important;
}
.integration-item,.summary-item,.security-item {
  background:var(--surface-soft) !important;
  border:1px solid var(--line) !important;
  border-radius:11px !important;
  padding:13px 14px !important;
}

.hint,.muted { color:var(--muted) !important; }
.status-ok,.ok { color:var(--success) !important; font-weight:750 !important; }
.status-warn { color:var(--warning) !important; font-weight:750 !important; }
.status-bad,.missing { color:#b42318 !important; font-weight:750 !important; }
.status-badge,.badge {
  display:inline-flex !important;
  align-items:center;
  padding:3px 9px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:750 !important;
}
.status-running { background:#fef3c7 !important; color:#92400e !important; }
.status-success,.badge-active { background:#d1fae5 !important; color:#065f46 !important; }
.status-failed,.badge-archived { background:#fee2e2 !important; color:#991b1b !important; }

.message {
  display:none;
  padding:13px 15px !important;
  border-radius:10px !important;
  font-size:13px !important;
  margin:0 0 18px !important;
  white-space:pre-wrap;
}
.message.show { display:block; }
.message.ok { background:var(--success-soft); color:#067647; border:1px solid #abefc6; }
.message.warn { background:#fffaeb; color:#b54708; border:1px solid #fedf89; }
.message.error { background:var(--danger-soft); color:#b42318; border:1px solid #fecdca; }

.smtp-diagnostic {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
  padding:14px;
  margin-top:14px;
}
.smtp-diagnostic.good { border-color:#abefc6; background:var(--success-soft); }
.smtp-diagnostic.bad { border-color:#fecdca; background:var(--danger-soft); }
.smtp-diagnostic h4 { margin:0 0 8px; font-size:14px; }
.smtp-checks { display:grid; gap:7px; margin-top:10px; }
.smtp-check { display:flex; gap:9px; align-items:flex-start; font-size:12px; }
.smtp-check .dot { width:9px; height:9px; border-radius:50%; background:#98a2b3; margin-top:5px; flex:none; }
.smtp-check.ok .dot { background:#12b76a; }
.smtp-check.bad .dot { background:#f04438; }
.smtp-actions { margin:9px 0 0 20px; color:#475467; font-size:12px; }
.provider-note { background:#eef4ff; border:1px solid #c7d7fe; color:#344054; border-radius:10px; padding:10px 12px; font-size:12px; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:16px; }
.field label { display:block; font-size:12px; font-weight:750; margin-bottom:6px; color:#344054; }
.field input,.field select,.field textarea { width:100%; }
.field textarea { min-height:92px; resize:vertical; }
.span-2 { grid-column:1/-1; }
.days { display:flex; flex-wrap:wrap; gap:8px; }
.day { display:flex !important; align-items:center; gap:6px; border:1px solid #d0d5dd !important; border-radius:9px !important; padding:8px 10px !important; background:#f8fafc !important; font-size:13px !important; }
.day input { min-height:auto !important; box-shadow:none !important; }

.table-wrap,.history-wrap { overflow:auto; border-radius:10px; }
table { width:100% !important; border-collapse:separate !important; border-spacing:0 !important; }
th,td { border-bottom:1px solid #eaecf0 !important; vertical-align:middle !important; }
th { background:#f8fafc !important; color:#344054 !important; font-weight:750 !important; }
th:first-child { border-top-left-radius:8px; }
th:last-child { border-top-right-radius:8px; }
tr:last-child td { border-bottom:0 !important; }
.preview-table img,.image-links img,.product-thumb {
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:7px !important;
  object-fit:contain !important;
}
.image-links img { width:52px; height:52px; margin:2px; }

#log {
  background:#101828 !important;
  color:#d0d5dd !important;
  border:1px solid #1d2939 !important;
  border-radius:10px !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  padding:14px !important;
  max-height:360px !important;
  overflow:auto !important;
  white-space:pre-wrap !important;
}
.secret-reveal { background:#fffbeb !important; border:1px solid #fde68a !important; border-radius:9px !important; padding:12px !important; }

@media (max-width:860px) {
  body { padding:18px 14px 38px !important; }
  h1 { font-size:22px !important; }
  .form-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
}
@media (max-width:560px) {
  .top-nav { padding:6px !important; }
  .top-nav a,.top-nav button { flex:1 1 auto; text-align:center; }
  h1 { align-items:flex-start !important; }
}

body.login-page {
  max-width:none !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(145deg,#eef7f6 0%,#f4f7fb 52%,#eef2ff 100%) !important;
}
.login-card {
  width:min(390px,100%) !important;
  padding:32px !important;
  border-top:4px solid var(--primary) !important;
}
.login-card h1 { display:block !important; font-size:22px !important; margin-bottom:20px !important; }
.login-card input { width:100% !important; margin-bottom:12px !important; }
.login-card button { width:100% !important; background:var(--primary) !important; color:#fff !important; }

.btn,.top-nav a { display:inline-flex !important; align-items:center !important; justify-content:center !important; }