/* EmlogStudio friend-link application: compact industrial interface. */
.emstudio-friend-entry,
.emstudio-friend-entry *,
.emstudio-friend-apply-page,
.emstudio-friend-apply-page * {
  box-sizing: border-box;
}

.emstudio-friend-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 17px 18px;
  overflow: hidden;
  border-radius: 15px;
}

.emstudio-friend-entry::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 112px;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .045));
  pointer-events: none;
}

.emstudio-friend-entry__mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--green-bright);
  background: rgba(var(--accent-rgb), .075);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 11px;
}

.emstudio-friend-entry__copy {
  min-width: 0;
}

.emstudio-friend-entry__copy > span {
  color: #839089;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
}

.emstudio-friend-entry__copy h3 {
  margin: 3px 0 2px;
  color: #e2ebe6;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 590;
}

.emstudio-friend-entry__copy p {
  margin: 0;
  color: #8b9891;
  font-size: 12px;
  line-height: 1.55;
}

.emstudio-friend-entry__action,
.emstudio-friend-entry__missing,
.emstudio-friend-apply__back,
.emstudio-friend-apply__submit {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  text-decoration: none;
}

.emstudio-friend-entry__action {
  color: #d9ffe9;
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .27);
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.emstudio-friend-entry__action:hover,
.emstudio-friend-entry__action:focus-visible {
  color: #eafff1;
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .43);
  outline: none;
  transform: translateY(-1px);
}

.emstudio-friend-entry__missing {
  color: #d5a86f;
  background: rgba(240, 181, 95, .06);
  border: 1px solid rgba(240, 181, 95, .18);
}

.emstudio-friend-apply-page {
  display: grid;
  /* Special pages share the full workspace rhythm.  The former 920px cap
     left a conspicuous empty rail on desktop, while still not buying us any
     useful reading measure.  1080px keeps the form comfortable and aligns
     with the footer monitor without changing the mobile contract. */
  width: min(100%, 1080px);
  margin: 0 auto;
  gap: 12px;
}

.emstudio-friend-apply__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: 17px;
}

.emstudio-friend-apply__hero::after {
  position: absolute;
  right: -44px;
  bottom: -82px;
  width: 210px;
  height: 150px;
  content: "";
  background:
    linear-gradient(rgba(var(--accent-rgb), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .055) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  transform: rotate(-8deg);
}

.emstudio-friend-apply__hero > div,
.emstudio-friend-apply__back {
  position: relative;
  z-index: 1;
}

.emstudio-friend-apply__hero h1 {
  margin: 6px 0 0;
  color: #edf5f1;
  font-family: var(--font-display);
  font-size: clamp(27px, 4vw, 38px);
  font-weight: 570;
  letter-spacing: -.025em;
  line-height: 1.14;
}

.emstudio-friend-apply__hero .eyebrow {
  color: var(--green-bright);
  font-size: 11px;
  line-height: 1.35;
}

.emstudio-friend-apply__hero p {
  max-width: 650px;
  margin: 9px 0 0;
  color: #929f98;
  font-size: 13px;
  line-height: 1.65;
}

.emstudio-friend-apply__back {
  color: #a5b1ab;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.emstudio-friend-apply__back:hover,
.emstudio-friend-apply__back:focus-visible {
  color: #dffbea;
  background: rgba(var(--accent-rgb), .06);
  border-color: rgba(var(--accent-rgb), .22);
  outline: none;
}

.emstudio-friend-apply__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 12px;
  list-style: none;
}

.emstudio-friend-apply__steps li {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #0a0f0d;
}

.emstudio-friend-apply__steps b {
  color: var(--green-bright);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 560;
}

.emstudio-friend-apply__steps span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.emstudio-friend-apply__steps strong {
  color: #cfd9d4;
  font-size: 12px;
  font-weight: 570;
}

.emstudio-friend-apply__steps small {
  overflow: hidden;
  color: #84918a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emstudio-friend-apply__form {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.emstudio-friend-apply__terminal {
  display: grid;
  min-height: 47px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 16px;
  gap: 11px;
  background: rgba(255, 255, 255, .018);
  border-bottom: 1px solid rgba(255, 255, 255, .065);
  font-family: var(--font-display);
}

.emstudio-friend-apply__terminal > span {
  display: flex;
  gap: 5px;
}

.emstudio-friend-apply__terminal > span i {
  width: 7px;
  height: 7px;
  background: #fb7185;
  border-radius: 50%;
}

.emstudio-friend-apply__terminal > span i:nth-child(2) { background: #f0b55f; }
.emstudio-friend-apply__terminal > span i:nth-child(3) { background: var(--green-bright); }

.emstudio-friend-apply__terminal > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 9px;
}

.emstudio-friend-apply__terminal strong {
  color: #a8b4ae;
  font-size: 11px;
  font-weight: 540;
}

.emstudio-friend-apply__terminal small {
  color: #839089;
  font-size: 11px;
  letter-spacing: .08em;
}

.emstudio-friend-apply__terminal em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7fdca6;
  font-family: var(--font-body);
  font-size: 11px;
  font-style: normal;
}

.emstudio-friend-apply__terminal em i {
  width: 6px;
  height: 6px;
  background: var(--green-bright);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(var(--accent-rgb), .38);
}

.emstudio-friend-apply__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.emstudio-friend-apply__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px;
  gap: 13px 14px;
}

.emstudio-friend-apply__fields label {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: #a8b3ad;
  font-size: 12px;
}

.emstudio-friend-apply__fields label.is-wide {
  grid-column: 1 / -1;
}

.emstudio-friend-apply__fields label > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.emstudio-friend-apply__fields label > span b {
  color: var(--green-bright);
  font-weight: 520;
}

.emstudio-friend-apply__fields label > span small {
  margin-left: auto;
  color: #839089;
  font-size: 11px;
}

.emstudio-friend-apply__fields input,
.emstudio-friend-apply__fields textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  color: #e1e9e5;
  background: rgba(255, 255, 255, .026);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.emstudio-friend-apply__fields input {
  min-height: 41px;
  padding: 0 11px;
}

.emstudio-friend-apply__fields textarea {
  min-height: 104px;
  padding: 10px 11px;
  resize: vertical;
}

.emstudio-friend-apply__fields input::placeholder,
.emstudio-friend-apply__fields textarea::placeholder {
  color: #84918a;
  opacity: 1;
}

.emstudio-friend-apply__fields input:hover,
.emstudio-friend-apply__fields textarea:hover {
  border-color: rgba(255, 255, 255, .15);
}

.emstudio-friend-apply__fields input:focus,
.emstudio-friend-apply__fields textarea:focus {
  background: rgba(var(--accent-rgb), .022);
  box-shadow: none;
  outline: none;
}

.emstudio-friend-apply__fields input:focus-visible,
.emstudio-friend-apply__fields textarea:focus-visible,
.emstudio-friend-apply__submit:focus-visible {
  outline: 1px solid #78848a;
  outline-offset: 2px;
}

/* Keep the desktop form compact: URL and icon are independent fields but
   share one row, just like the site name and contact email above.  The
   explicit wide class remains the mobile fallback and keeps the description
   full width. */
@media (min-width: 701px) {
  .emstudio-friend-apply__fields label:nth-child(3),
  .emstudio-friend-apply__fields label:nth-child(4) {
    grid-column: auto;
  }

  .emstudio-friend-apply__fields label:nth-child(5) {
    grid-column: 1 / -1;
  }
}

.emstudio-friend-apply__footer {
  display: flex;
  min-height: 61px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px 10px 18px;
  gap: 16px;
  background: rgba(255, 255, 255, .014);
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.emstudio-friend-apply__footer > span {
  color: #7f8b85;
  font-size: 11px;
  line-height: 1.55;
}

.emstudio-friend-apply__submit {
  flex: 0 0 auto;
  min-height: 40px;
  color: #dcffea;
  background: rgba(var(--accent-rgb), .11);
  border: 1px solid rgba(var(--accent-rgb), .29);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.emstudio-friend-apply__submit:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), .17);
  border-color: rgba(var(--accent-rgb), .45);
  transform: translateY(-1px);
}

.emstudio-friend-apply__submit:disabled {
  cursor: wait;
  opacity: .58;
}

.emstudio-friend-apply__form.is-success .emstudio-friend-apply__submit:disabled {
  cursor: default;
}

.emstudio-friend-apply__form.is-busy::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--green-bright), transparent);
  animation: emstudio-friend-progress 1s linear infinite;
  transform-origin: left center;
}

.emstudio-friend-apply__form.is-success .emstudio-friend-apply__footer > span {
  color: #7ce7a9;
}

.emstudio-friend-apply__form.has-error .emstudio-friend-apply__footer > span {
  color: #ff9cad;
}

.emstudio-friend-apply__unavailable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 20px;
  border-radius: 14px;
}

.emstudio-friend-apply__unavailable > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #f4bd79;
  background: rgba(240, 181, 95, .07);
  border: 1px solid rgba(240, 181, 95, .2);
  border-radius: 8px;
  font-family: var(--font-display);
}

.emstudio-friend-apply__unavailable strong {
  color: #e4d1b9;
  font-size: 13px;
}

.emstudio-friend-apply__unavailable p {
  margin: 4px 0 0;
  color: #a2917d;
  font-size: 12px;
  line-height: 1.65;
}

/* Keep the runtime monitor and legal footer on the same visual rail as the
   application card.  This is scoped to the standalone route so the home
   dashboard can retain its wider footer treatment. */
body.emstudio-view-friend-apply .workspace-footer-stack {
  width: min(100%, 1080px);
  margin-right: auto;
  margin-left: auto;
}

/* The first step is the current action.  A small state tint and number disc
   make the three-step rail readable at a glance without increasing its
   height or introducing a second decorative badge. */
.emstudio-friend-apply__steps li {
  position: relative;
}

.emstudio-friend-apply__steps li:first-child {
  background: rgba(var(--accent-rgb), .06);
}

.emstudio-friend-apply__steps b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--green-bright);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .23);
  border-radius: 8px;
  line-height: 1;
}

.emstudio-friend-apply__steps li:first-child b {
  color: #04130a;
  background: var(--green-bright);
  border-color: var(--green-bright);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .18);
}

@media (max-width: 700px) {
  body.emstudio-view-friend-apply .workspace-footer-stack {
    width: 100%;
  }

  .emstudio-friend-apply__steps li:first-child {
    background: rgba(var(--accent-rgb), .06);
  }
}

/* Daylight keeps the exact same geometry, but uses a flat paper surface and
   a restrained mint accent.  Hiding the decorative grid prevents a dark
   pseudo-layer from reading as an accidental border on white surfaces. */
html[data-theme="light"] .emstudio-friend-apply__hero::after {
  display: none;
}

html[data-theme="light"] .emstudio-friend-apply__steps li:first-child {
  background: #eef8f5 !important;
}

html[data-theme="light"] .emstudio-friend-apply__steps b {
  color: #087c71;
  background: #e5f5f1;
  border-color: rgba(8, 124, 113, .22);
}

html[data-theme="light"] .emstudio-friend-apply__steps li:first-child b {
  color: #ffffff;
  background: #087c71;
  border-color: #087c71;
  box-shadow: 0 5px 12px rgba(8, 124, 113, .16);
}

@keyframes emstudio-friend-progress {
  0% { transform: translateX(-70%) scaleX(.35); }
  100% { transform: translateX(70%) scaleX(.35); }
}

@media (max-width: 700px) {
  .emstudio-friend-entry {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .emstudio-friend-entry__action,
  .emstudio-friend-entry__missing {
    grid-column: 1 / -1;
    width: 100%;
  }

  .emstudio-friend-apply__hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 19px;
    gap: 16px;
  }

  .emstudio-friend-apply__back {
    width: max-content;
  }

  .emstudio-friend-apply__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .emstudio-friend-apply__steps small {
    white-space: normal;
  }

  .emstudio-friend-apply__fields {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .emstudio-friend-apply__fields label.is-wide {
    grid-column: auto;
  }

  .emstudio-friend-apply__fields input,
  .emstudio-friend-apply__fields textarea {
    font-size: 16px;
  }

  .emstudio-friend-apply__fields input {
    min-height: 44px;
  }

  .emstudio-friend-apply__footer {
    align-items: stretch;
    flex-direction: column;
    padding: 13px 14px;
  }

  .emstudio-friend-apply__submit {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .emstudio-friend-entry {
    padding: 15px;
  }

  .emstudio-friend-apply__terminal {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .emstudio-friend-apply__terminal > div small,
  .emstudio-friend-apply__terminal em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emstudio-friend-entry *,
  .emstudio-friend-entry *::before,
  .emstudio-friend-entry *::after,
  .emstudio-friend-apply-page *,
  .emstudio-friend-apply-page *::before,
  .emstudio-friend-apply-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Screenshot-aligned daylight application layout.  The page keeps the
   existing semantic form contract, but uses independent cards and a wider
   reading rail so the standalone route matches the rest of the workspace. */
.emstudio-friend-apply-page {
  width: min(100%, 1150px);
  gap: 15px;
}

.emstudio-friend-apply__hero {
  min-height: 150px;
  padding: 29px 39px;
  border-radius: 16px;
}

.emstudio-friend-apply__hero::after {
  top: 69px;
  right: 355px;
  width: 86px;
  height: 34px;
  background-image: radial-gradient(circle, rgba(var(--accent-rgb), .42) 1.2px, transparent 1.3px);
  background-size: 8px 8px;
  transform: none;
  opacity: .5;
}

.emstudio-friend-apply__hero-art {
  position: absolute;
  z-index: 0;
  top: 8px;
  right: 178px;
  display: grid;
  width: 190px;
  height: 130px;
  place-items: center;
  color: var(--green-bright);
  opacity: .12;
  transform: rotate(-15deg);
  pointer-events: none;
}

.emstudio-friend-apply__hero-art svg {
  width: 100%;
  height: 100%;
}

.emstudio-friend-apply__hero h1 {
  font-size: clamp(30px, 3.2vw, 36px);
}

.emstudio-friend-apply__steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.emstudio-friend-apply__steps li {
  min-height: 84px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 15px;
  background: #0a0f0d;
}

.emstudio-friend-apply__steps li + li::before {
  position: absolute;
  top: 50%;
  left: -17px;
  color: #a5c6d4;
  content: '→';
  font-size: 18px;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.emstudio-friend-apply__steps b {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 14px;
}

.emstudio-friend-apply__step-icon {
  width: 24px;
  height: 24px;
  color: var(--green-bright);
  opacity: .9;
}

.emstudio-friend-apply__form {
  border-radius: 15px;
}

.emstudio-friend-apply__terminal {
  min-height: 51px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0 25px;
  gap: 11px;
}

.emstudio-friend-apply__terminal > span:not(.emstudio-friend-apply__terminal-mark),
.emstudio-friend-apply__terminal > div small,
.emstudio-friend-apply__terminal > em {
  display: none;
}

.emstudio-friend-apply__terminal-mark {
  display: grid !important;
  width: 19px;
  height: 22px;
  place-items: center;
  color: var(--green-bright);
}

.emstudio-friend-apply__terminal-mark svg {
  width: 19px;
  height: 22px;
}

.emstudio-friend-apply__terminal strong {
  color: #a8b4ae;
  font-size: 13px;
  font-weight: 560;
}

.emstudio-friend-apply__fields {
  padding: 20px 25px 15px;
  gap: 14px 25px;
}

.emstudio-friend-apply__fields input {
  min-height: 43px;
}

.emstudio-friend-apply__fields textarea {
  min-height: 76px;
}

.emstudio-friend-apply__input-action-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 !important;
  align-items: stretch !important;
}

.emstudio-friend-apply__input-action-wrap input {
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.emstudio-friend-apply__input-action {
  min-width: 57px;
  padding: 0 13px;
  color: #a9b8bd;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.emstudio-friend-apply__input-action:hover,
.emstudio-friend-apply__input-action:focus-visible {
  color: var(--green-bright);
  background: rgba(var(--accent-rgb), .08);
  border-color: rgba(var(--accent-rgb), .35);
  outline: none;
}

.emstudio-friend-apply__footer {
  min-height: 64px;
  padding: 10px 25px;
}

.emstudio-friend-apply__footer-note {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.emstudio-friend-apply__footer-note > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--green-bright);
}

.emstudio-friend-apply__footer-note > span {
  color: #7f8b85;
  font-size: 11px;
  line-height: 1.55;
}

.emstudio-friend-apply__submit {
  min-height: 45px;
  padding: 0 16px;
  border-radius: 10px;
}

/* The address, icon and description are intentionally full-width fields in
   the reference layout.  This rule comes after the legacy two-column helper
   so the standalone application page keeps one clear reading rail. */
@media (min-width: 701px) {
  .emstudio-friend-apply__fields label.is-wide {
    grid-column: 1 / -1;
  }
}

body.emstudio-view-friend-apply .workspace-footer-stack {
  width: min(100%, 1150px);
}

/* Light mode uses the same geometry as the dark page, with paper-white
   surfaces and the mint/sky accent visible in the reference capture. */
html[data-theme="light"] .emstudio-friend-apply__hero {
  background: linear-gradient(118deg, #ffffff 0%, #f5fbfe 58%, #eaf8f5 100%) !important;
  border-color: #d8e7ef !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 12px 24px rgba(28, 98, 131, .08) !important;
}

html[data-theme="light"] .emstudio-friend-apply__hero-art {
  color: #4fb8eb;
  opacity: .16;
}

html[data-theme="light"] .emstudio-friend-apply__hero::after {
  display: block;
  opacity: .45;
}

html[data-theme="light"] .emstudio-friend-apply__steps li {
  background: linear-gradient(145deg, #ffffff, #f0f9fc) !important;
  border-color: #d8e7ef !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 7px 15px rgba(28, 98, 131, .06);
}

html[data-theme="light"] .emstudio-friend-apply__steps li:first-child {
  background: linear-gradient(145deg, #ffffff, #eaf8f5) !important;
}

html[data-theme="light"] .emstudio-friend-apply__steps li + li::before {
  color: #8eafbe;
}

html[data-theme="light"] .emstudio-friend-apply__step-icon {
  color: #087c71;
}

html[data-theme="light"] .emstudio-friend-apply__terminal-mark,
html[data-theme="light"] .emstudio-friend-apply__terminal strong {
  color: #087c71;
}

html[data-theme="light"] .emstudio-friend-apply__input-action {
  color: #496f81;
  background: #ffffff;
  border-color: #d8e7ef;
}

html[data-theme="light"] .emstudio-friend-apply__input-action:hover,
html[data-theme="light"] .emstudio-friend-apply__input-action:focus-visible {
  color: #007d70;
  background: #eaf8f6;
  border-color: rgba(0, 125, 112, .38);
}

html[data-theme="light"] .emstudio-friend-apply__footer-note > span {
  color: #58798c;
}

@media (max-width: 700px) {
  .emstudio-friend-apply-page {
    width: 100%;
    gap: 12px;
  }

  .emstudio-friend-apply__hero {
    min-height: 0;
    padding: 20px;
  }

  .emstudio-friend-apply__hero-art {
    right: 18px;
    top: 18px;
    width: 125px;
    height: 90px;
  }

  .emstudio-friend-apply__hero::after {
    right: 24px;
    top: 82px;
  }

  .emstudio-friend-apply__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .emstudio-friend-apply__steps li {
    min-height: 68px;
    padding: 12px 15px;
  }

  .emstudio-friend-apply__steps li + li::before {
    display: none;
  }

  .emstudio-friend-apply__steps b {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 12px;
  }

  .emstudio-friend-apply__terminal {
    padding: 0 17px;
  }

  .emstudio-friend-apply__fields {
    padding: 15px;
    gap: 13px;
  }

  .emstudio-friend-apply__fields textarea {
    min-height: 104px;
  }

  .emstudio-friend-apply__footer {
    min-height: 0;
    align-items: stretch;
    padding: 13px 15px;
  }

  .emstudio-friend-apply__footer-note {
    align-items: flex-start;
  }

  .emstudio-friend-apply__submit {
    min-height: 44px;
  }

  .emstudio-friend-apply__fields input,
  .emstudio-friend-apply__input-action {
    min-height: 44px;
  }

  body.emstudio-view-friend-apply .workspace-footer-stack {
    width: 100%;
  }
}

/* Final route-only alignment: the daylight layer used the steps rail as a
   shared tinted strip.  The reference design keeps only the three cards and
   their shadows, with the page canvas visible between them. */
html body.emstudio-view-friend-apply .emstudio-friend-apply__steps {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* There is a 16px grid gap between cards.  Position the arrow's centre at
   half that gap instead of 17px into the preceding card. */
html body.emstudio-view-friend-apply .emstudio-friend-apply__steps li + li::before {
  left: -8px;
}