.ohnl-widget{
  display:grid;
  grid-template-columns:minmax(220px,var(--ohnl-media-width,42%)) 1fr;
  gap:var(--ohnl-gap,18px);
  max-width:var(--ohnl-max-width,1200px);
  background:var(--ohnl-bg,transparent);
  border-radius:var(--ohnl-widget-radius,0);
  padding:var(--ohnl-widget-padding,0);
  overflow:visible;
  color:var(--ohnl-text);
  margin:24px auto;
  align-items:stretch;
  box-sizing:border-box;
}
.ohnl-widget.ohnl-layout-image-right{grid-template-columns:1fr minmax(220px,var(--ohnl-media-width,42%))}
.ohnl-widget.ohnl-layout-image-right .ohnl-media{order:2}
.ohnl-widget.ohnl-layout-image-right .ohnl-content{order:1}
.ohnl-widget.ohnl-layout-stacked{grid-template-columns:1fr;gap:var(--ohnl-gap,16px)}
.ohnl-media{
  min-height:100%;
  background:var(--ohnl-media-bg,rgba(255,255,255,.08));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--ohnl-media-padding,0);
  border-radius:var(--ohnl-media-radius,24px);
  overflow:hidden;
  box-sizing:border-box;
}
.ohnl-media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:inherit;
}
.ohnl-content{
  background:var(--ohnl-card-bg,#fff);
  padding:var(--ohnl-content-padding,40px);
  border-radius:var(--ohnl-content-radius,28px);
  box-sizing:border-box;
}
.ohnl-title{font-size:var(--ohnl-title-size,34px);line-height:1.08;margin:0 0 16px;color:var(--ohnl-text)}
.ohnl-subtitle{margin:0 0 26px;line-height:1.6}
.ohnl-form{margin-top:8px}
.ohnl-row{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
  min-height:46px;
  transition:gap .56s cubic-bezier(.22,.61,.36,1);
}
.ohnl-input{
  flex:1 1 220px;
  width:auto;
  max-width:100%;
  min-height:46px;
  border:1px solid rgb(36 67 135 / 50%);
  border-color:color-mix(in srgb,var(--ohnl-button-bg,rgb(36 67 135)) 50%,transparent);
  border-radius:var(--ohnl-field-radius,18px);
  background:var(--ohnl-input-bg,#f9fafb);
  color:var(--ohnl-input-text,#111827);
  padding:0 16px;
  font-size:15px;
  box-sizing:border-box;
  opacity:1;
  transform:translateX(0);
  transition:opacity .56s cubic-bezier(.22,.61,.36,1),transform .56s cubic-bezier(.22,.61,.36,1),width .56s cubic-bezier(.22,.61,.36,1),max-width .56s cubic-bezier(.22,.61,.36,1),padding .56s cubic-bezier(.22,.61,.36,1),border-width .56s cubic-bezier(.22,.61,.36,1),flex-basis .56s cubic-bezier(.22,.61,.36,1);
}
.ohnl-button{
  flex:0 0 auto;
  min-height:46px;
  border:0;
  border-radius:var(--ohnl-field-radius,18px);
  background:var(--ohnl-button-bg,#111827);
  color:var(--ohnl-button-text,#ffffff);
  padding:0 20px;
  font-weight:700;
  cursor:pointer;
  font-size:var(--ohnl-button-font-size,16px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  transition:opacity .56s cubic-bezier(.22,.61,.36,1),flex-basis .56s cubic-bezier(.22,.61,.36,1),width .56s cubic-bezier(.22,.61,.36,1),background-color .56s cubic-bezier(.22,.61,.36,1);
}
.ohnl-button:disabled{cursor:progress;opacity:.9}
.ohnl-button:hover{opacity:.92}
.ohnl-form.is-loading .ohnl-row,
.ohnl-form.is-complete .ohnl-row{
  flex-wrap:nowrap;
  gap:0;
}
.ohnl-form.is-loading .ohnl-input,
.ohnl-form.is-complete .ohnl-input{
  flex:0 1 0;
  width:0;
  max-width:0;
  min-width:0;
  padding-left:0;
  padding-right:0;
  border-width:0;
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
}
.ohnl-form.is-loading .ohnl-button,
.ohnl-form.is-complete .ohnl-button{
  flex:1 1 100%;
  width:100%;
}
.ohnl-notice{
  display:block;
  margin:12px 0 0;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.4;
  opacity:1;
  transform:translateY(0);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1);
}
.ohnl-notice:empty,
.ohnl-notice[hidden]{display:none}
.ohnl-notice-success{background:#ecfdf5;color:#065f46}.ohnl-notice-error{background:#fef2f2;color:#991b1b}.ohnl-notice-info{background:#eff6ff;color:#1d4ed8}
.ohnl-hp{position:absolute !important;left:-9999px !important;opacity:0 !important;pointer-events:none !important}
.ohnl-status-body{
  margin:0;
  background:#f3f4f6;
}
.ohnl-status-page,
.ohnl-status-page *{
  box-sizing:border-box;
}
.ohnl-status-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:#f3f4f6;
  color:#111827;
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
}
.ohnl-status-card{
  width:100%;
  max-width:560px;
  background:#ffffff;
  border-radius:20px;
  padding:36px;
  box-shadow:0 18px 45px rgba(17,24,39,.10);
  text-align:center;
  box-sizing:border-box;
}
.ohnl-status-kicker{
  margin:0 0 12px;
  color:#4f46e5;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ohnl-status-title{
  margin:0 0 14px;
  color:#111827;
  font-size:32px;
  line-height:1.15;
  letter-spacing:0;
}
.ohnl-status-text{
  margin:0 auto 26px;
  max-width:440px;
  color:#374151;
  font-size:16px;
  line-height:1.6;
}
.ohnl-status-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 22px;
  border-radius:12px;
  background:#111827;
  color:#ffffff !important;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  box-sizing:border-box;
}
.ohnl-status-button:hover{opacity:.92}
@media (prefers-reduced-motion: reduce){
  .ohnl-input,
  .ohnl-button,
  .ohnl-row,
  .ohnl-notice{
    transition:none;
  }
}
@media (max-width: 782px){
  .ohnl-widget,.ohnl-widget.ohnl-layout-image-right{grid-template-columns:1fr;gap:14px}
  .ohnl-media{min-height:220px}
  .ohnl-title{font-size:clamp(26px,7vw,var(--ohnl-title-size,34px))}
  .ohnl-row{flex-direction:column;align-items:stretch}
  .ohnl-form.is-loading .ohnl-row,
  .ohnl-form.is-complete .ohnl-row{flex-wrap:wrap}
  .ohnl-input{
    display:block;
    flex:0 0 auto;
    width:100%;
    min-height:46px;
    height:46px;
  }
  .ohnl-button{
    flex:0 0 auto;
    width:100%;
    min-height:46px;
    height:46px;
  }
  .ohnl-form.is-loading .ohnl-input,
  .ohnl-form.is-complete .ohnl-input{
    flex:0 1 0;
    max-height:0;
    height:0;
    min-height:0;
    margin:0;
    transform:translateY(-6px);
  }
  .ohnl-form.is-loading .ohnl-button,
  .ohnl-form.is-complete .ohnl-button{
    flex:0 0 auto;
    width:100%;
  }
  .ohnl-status-card{padding:28px 22px}
  .ohnl-status-title{font-size:28px}
  .ohnl-status-button{width:100%}
}