:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17312d;
  background: #eef4f1;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button, .hosted-button {
  min-height: 40px;
  border: 1px solid #55736d;
  border-radius: 7px;
  padding: 8px 14px;
  background: #fff;
  color: #17312d;
  cursor: pointer;
}
button.primary, .hosted-button.primary { background: #275f55; color: #fff; border-color: #275f55; }
button.danger { color: #8d1f1f; border-color: #bb6d6d; }
button:disabled { opacity: .55; cursor: wait; }
a { color: #1c6256; }

.hosted-app {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0;
}
.hosted-card {
  background: #fff;
  border: 1px solid #cad8d4;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(25, 55, 49, .08);
  padding: 28px;
}
.hosted-card h1 { margin: 0 0 8px; font-size: 1.65rem; }
.hosted-card > p { line-height: 1.5; }
.hosted-form { display: grid; gap: 14px; margin-top: 22px; }
.hosted-form label { display: grid; gap: 6px; font-weight: 650; }
.hosted-form input, .hosted-form select {
  width: 100%; min-height: 42px; border: 1px solid #8fa7a1; border-radius: 6px; padding: 8px 10px; background: #fff;
}
.hosted-form label.inline { display: flex; align-items: center; font-weight: 500; }
.hosted-form label.inline input { width: auto; min-height: auto; }
.hosted-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.hosted-refusal { color: #982727; background: #fff1f1; border: 1px solid #e5b1b1; border-radius: 6px; padding: 10px 12px; }
.hosted-success { color: #245a30; background: #effbef; border: 1px solid #add1b4; border-radius: 6px; padding: 10px 12px; }
.hosted-muted { color: #526c66; }
.hosted-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hosted-nav div { display: flex; gap: 8px; }
.design-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.design-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #d4dfdc; border-radius: 8px; padding: 12px; }
.design-row strong { overflow-wrap: anywhere; }
.design-row .hosted-actions { margin: 0; }
.hosted-empty { padding: 28px 0; text-align: center; color: #607771; }
.hosted-modal-scrim { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(16, 35, 31, .5); z-index: 10000; }
.hosted-modal { width: min(460px, calc(100% - 32px)); background: #fff; border-radius: 10px; padding: 24px; }
.hosted-modal h2 { margin-top: 0; }
.hosted-editor-nav { height: 46px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px 14px; background: #e8f0ed; border-bottom: 1px solid #b8cbc5; }
.hosted-editor-nav + .app-shell { height: calc(100vh - 46px); }
.hosted-section { border-top: 1px solid #d4dfdc; margin-top: 24px; padding-top: 20px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .profile-grid { grid-template-columns: 1fr; } .design-row { align-items: flex-start; flex-direction: column; } }