.sse-added-content { max-width: 100%; height: auto; overflow-wrap: anywhere; }
body.sse-editing { padding-bottom: 4.5rem !important; }
.sse-inline-text { cursor: text !important; min-height: 1em; }
.sse-inline-text:hover { outline: 2px dashed #38bdf8 !important; outline-offset: 3px; }
.sse-inline-text:focus { outline: 3px solid #38bdf8 !important; outline-offset: 3px; }
.sse-detected-box { transition: outline-color .18s ease, outline-offset .18s ease; }
.sse-detected-box:hover { outline: 2px dashed rgba(13, 110, 253, .75) !important; outline-offset: 3px; }
.sse-selected { outline: 3px solid #ffb300 !important; outline-offset: 4px; }
.sse-dirty { box-shadow: inset 0 -3px #fbbf24 !important; }

body.sse-editing [data-sse-placeholder]:empty::before {
  content: attr(data-sse-placeholder);
  display: inline-block;
  min-width: 7rem;
  padding: .2rem .35rem;
  border: 1px dashed currentColor;
  border-radius: .3rem;
  opacity: .6;
}

body.sse-editing .sse-empty-image-host {
  position: relative !important;
  min-height: 8rem;
}

body.sse-editing .sse-empty-image-host::after {
  content: "+ Add image";
  position: absolute;
  inset: .35rem;
  display: grid;
  place-items: center;
  border: 2px dashed currentColor;
  border-radius: .5rem;
  opacity: .65;
  pointer-events: none;
  font: 700 1rem/1.2 system-ui, sans-serif;
}

.sse-sortable-item { cursor: grab !important; }
.sse-sortable-item:active { cursor: grabbing !important; }
.sse-sortable-item.sse-dragging {
  opacity: .45 !important;
  outline: 3px dashed #0d6efd !important;
}
.sse-sortable-item:focus { outline: 3px solid #0d6efd !important; outline-offset: 4px; }

#sse-panel {
  position: fixed;
  z-index: 999999;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2rem));
  padding: .8rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .75rem;
  background: #111827;
  color: #bae6fd;
  box-shadow: 0 14px 45px rgba(0,0,0,.35);
  font: 600 14px/1.45 system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: .8rem;
}
#sse-status { flex: 1 1 auto; text-align: left; }
#sse-status.sse-error { color: #fecaca; }
.sse-history-controls { display: flex; gap: .45rem; flex: 0 0 auto; }
#sse-panel .sse-clear-control {
  appearance: none;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: .45rem;
  padding: .5rem .75rem;
  background: #fff;
  color: #111827;
  cursor: pointer;
  font: 700 13px/1.2 system-ui, sans-serif;
}
#sse-panel .sse-clear-control:hover,
#sse-panel .sse-clear-control:focus { background: #e0f2fe; outline: 3px solid rgba(56,189,248,.35); }

.sse-delete-button {
  position: absolute;
  z-index: 1000000;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  border: 1px solid #fff;
  border-radius: .4rem;
  padding: .45rem .7rem;
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
  cursor: pointer;
  font: 700 13px/1.2 system-ui, sans-serif;
  transition: opacity .15s ease, transform .15s ease;
}
.sse-delete-button.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sse-delete-button:hover,
.sse-delete-button:focus { background: #991b1b; outline: 3px solid rgba(248,113,113,.4); }

.sse-add-placeholder {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  z-index: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .8rem !important;
  min-height: 9rem !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  cursor: pointer !important;
  border: 2px dashed #228be6 !important;
  border-radius: 1rem !important;
  opacity: 1;
  overflow: hidden;
  text-decoration: none !important;
  user-select: none;
  background-image: none !important;
  background: linear-gradient(145deg, rgba(224,242,254,.96), rgba(239,246,255,.98)) !important;
  color: #075985 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 .6rem 1.5rem rgba(14,116,144,.12) !important;
}
.sse-add-placeholder:hover,
.sse-add-placeholder:focus {
  opacity: 1;
  transform: translateY(-2px) !important;
  outline: 4px solid rgba(56, 189, 248, .35) !important;
  outline-offset: 2px;
}
.sse-add-placeholder .sse-plus {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font: 400 2.5rem/1 system-ui, sans-serif;
  background: #fff;
  box-shadow: 0 .35rem 1rem rgba(2,132,199,.18);
}
.sse-plus-copy { display: grid; gap: .2rem; text-align: center; }
.sse-plus-copy strong { color: inherit; font: 800 1rem/1.2 system-ui, sans-serif; }
.sse-plus-copy small { color: inherit; opacity: .72; font: 600 .78rem/1.2 system-ui, sans-serif; }

body.sse-editing #cards-honored > .sse-add-placeholder {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  align-content: center !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: clamp(1rem, 3vw, 2.5rem) !important;
  position: relative !important;
  top: auto !important;
  width: min(100%, 68rem) !important;
  max-width: 100% !important;
  min-height: clamp(12rem, 24vw, 17rem) !important;
  margin: 0 auto !important;
  padding: clamp(1.25rem, 4vw, 3rem) !important;
  border-radius: 1.25rem !important;
  background: linear-gradient(135deg, rgba(240,249,255,.98), rgba(224,242,254,.98)) !important;
  box-shadow: 0 .75rem 2rem rgba(19,60,85,.12), inset 0 0 0 1px rgba(255,255,255,.9) !important;
}
.sse-achievement-fields {
  display: grid;
  align-content: center;
  gap: 1rem;
}
.sse-achievement-fields > span {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: .8rem 1rem;
  color: #075985;
  background: rgba(255,255,255,.82);
  border: 2px dashed rgba(2,132,199,.48);
  border-radius: .65rem;
  text-align: left;
  font: 700 .9rem/1.3 system-ui, sans-serif;
}
.sse-achievement-media {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  min-height: 10rem;
  color: #075985;
  background: rgba(255,255,255,.68);
  border: 2px dashed #0284c7;
  border-radius: .85rem;
  font: 800 .9rem/1.2 system-ui, sans-serif;
}
.sse-achievement-media .sse-plus { width: 3.75rem; height: 3.75rem; }
@media (max-width: 560px) {
  body.sse-editing #cards-honored > .sse-add-placeholder { grid-template-columns: 1fr !important; }
}
body.sse-editing #cards-honored > .sse-add-placeholder::before,
body.sse-editing #cards-honored > .sse-add-placeholder::after {
  content: none !important;
}

.sse-add-images-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: 11rem;
  margin: 0;
  padding: 1rem;
  border: 2px dashed #0284c7;
  border-radius: .75rem;
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
  color: #075985;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.sse-add-images-tile:hover,
.sse-add-images-tile:focus { transform: translateY(-2px); outline: 3px solid rgba(56,189,248,.32); }
.sse-gallery-plus {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: 2rem;
  line-height: 1;
}
.sse-add-images-tile strong { font-size: .95rem; }
.sse-add-images-tile small { opacity: .72; font-size: .72rem; }
.sse-media-gallery > .sse-add-images-tile { min-height: clamp(15rem, 25vw, 22rem); }

.sse-add-certificate-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 15.625rem;
  min-height: 19rem;
  margin: 0;
  padding: 1.25rem;
  color: #075985;
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
  border: .55rem solid #8b5e3c;
  border-radius: .75rem;
  box-shadow: 0 .625rem 1.56rem rgba(0,0,0,.22);
  cursor: pointer;
  font-family: system-ui, sans-serif;
}
.sse-add-certificate-tile:hover,
.sse-add-certificate-tile:focus-visible { transform: translateY(-3px); outline: 3px solid rgba(56,189,248,.42); outline-offset: 3px; }

@media (max-width: 600px) {
  body.sse-editing { padding-bottom: 5.5rem !important; }
  #sse-panel { bottom: .4rem; width: calc(100% - .8rem); flex-wrap: wrap; font-size: 12px; }
  #sse-status { flex-basis: 100%; text-align: center; }
  .sse-history-controls { width: 100%; }
  #sse-panel .sse-clear-control { flex: 1; }
  .sse-add-placeholder { min-height: 7rem !important; }
}
