.metris-cf-wrap{max-width:1100px;margin:24px auto;padding:0 12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
.metris-cf-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.metris-cf-title{font-size:22px;font-weight:900;color:#0f172a;margin-bottom:6px;}
.metris-cf-sub{color:#475569;}

.metris-cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
@media(max-width:900px){.metris-cf-grid{grid-template-columns:1fr;}}

.metris-cf-cardtitle{font-weight:900;color:#0f172a;margin-bottom:6px;}
.metris-cf-note{color:#64748b;font-size:13px;margin-bottom:10px;}

.metris-cf-pills{display:flex;flex-wrap:wrap;gap:8px;}
.metris-cf-pill{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:8px 10px;cursor:pointer;font-weight:700;font-size:13px;color:#0f172a;}
.metris-cf-pill.is-active{background:#0f172a;color:#fff;border-color:#0f172a;}

.metris-cf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.metris-cf-btn{border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:800;}
.metris-cf-btn--primary{background:#0f172a;color:#fff;border-color:#0f172a;}

.metris-cf-output{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px;min-height:140px;}
.metris-cf-error{color:#b91c1c;font-weight:900;}
.metris-cf-muted{color:#64748b;font-size:13px;}
.metris-cf-mode{font-weight:900;color:#0f172a;margin-bottom:10px;}

.metris-cf-block{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px;margin-top:10px;}
.metris-cf-blockhead{display:flex;justify-content:space-between;gap:10px;}
.metris-cf-blocktitle{font-weight:900;color:#0f172a;}
.metris-cf-desc{color:#475569;font-size:13px;margin-top:6px;}
.metris-cf-section{margin-top:10px;}
.metris-cf-sectiontitle{font-weight:900;color:#0f172a;margin-bottom:6px;font-size:13px;}
.metris-cf-list{margin:6px 0 0 18px;color:#0f172a;}

/* Base save button */
#metris-cf-save {
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Disabled state */
#metris-cf-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f8fafc;
}

/* Ready to save */
#metris-cf-save.is-ready {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* Saved state */
#metris-cf-save.is-saved {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

#metris-cf-save.is-ready:hover {
  filter: brightness(1.05);
}

#metris-cf-save:not(:disabled):hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}