.ao-title {
  font-size:34px;
  letter-spacing:.04em;
  margin:0 0 4px
}

.wrapper{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px
}

.head_area{
  margin-bottom:12px
}
.head_content{
  font-size:18px;
  color:#444;margin:0
}
 
.fg-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 2px 16px rgba(16,24,40,.06);
  padding:18px
}
.fg-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:18px;
  line-height:1.6
}
 
.fg-gap{
  position:relative;
  display:inline-flex
}

.fg-gap input{
  font-size:18px;
  padding:6px 10px;
  border:2px solid #e4e7ec;
  border-radius:10px;
  transition:.15s
}

.fg-gap.ok input, .ao-field.ok input{
  border-color:#16a34a;
  background:#ecfdf5
}

.fg-gap.err input, .ao-field.err input{
  border-color:#ef4444;
  background:#fef2f2
}

.fg-gap .fg-correct{
  position:absolute;
  right:8px;top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#667085;
  padding:2px 6px;
  border-radius:6px;
  background:#f4f4f5;
  display:none;
  white-space:nowrap
}

.fg-gap.show-tip .fg-correct{
  display:inline-block
}
 
.fg-hint{
  border:none;
  background:#fffbeb;
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px #f59e0b;
  margin-left:8px
}

.fg-hint:hover{
  background:#fff3c4
}

.fg-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0 0;
  gap:12px;
}

.fg-actions-left{ 
  display:flex; 
  gap:16px; 
  align-items:center; 
}

.action_button--ghost{
  background:#fff;
  color:#312e81;
  box-shadow: inset 0 0 0 2px #312e81;
}

.fg-complete{ 
  margin-top:16px; 
  text-align:center; 
}
.fg-done-row{
  display:inline-flex; 
  align-items:center; 
  gap:10px;
  font-size:22px; 
  font-weight:700; 
  color:#111;
}

.fg-complete .action_area{ 
  display:block; 
}
.fg-complete .button_action_area{
  display: flex;
  flex-direction: row;
}

.fg-star{ 
  width:3em; 
  height:3em; 
  object-fit:contain; 
}

.ao-field {
  position: relative;
  display: inline-block;  /* чтобы ширина = ширине поля */
}

.ao-hint-btn {
  position: absolute;
  right: 8px;             /* внутри поля справа */
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff3cd;        /* светло-жёлтая под стили сайта */
  border: 2px solid #f0c36d;  /* контур под цвет рамок */
  color: #a15b00;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.ao-tt {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  max-width: 320px;
  z-index: 20;
  background: #fffbe6;
  color: #111;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  font-size: 14px;
  line-height: 1.3;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  white-space: normal;
}

.ao-tt::after {
  content: "";
  position: absolute;
  right: 16px;
  top: -7px;
  width: 12px; height: 12px;
  background: #fffbe6;
  border-left: 1px solid #f0c36d;
  border-top: 1px solid #f0c36d;
  transform: rotate(45deg);
}

.ao-hint.open .ao-tt {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.ao-hint:hover .ao-tt {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.ao-input {
  padding-right: 38px;    /* место под иконку */
}

.action_area{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:16px 0
}

.action_button{
	margin: 0 auto;
	padding: 0.5em 0;
	border: none;
	outline: none;
	border-radius: 1em;
	background: #372E42;
	width: 40%;
  font-size: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.action_button_content{
  width: 100%;
	font-size: 1.5em;
	color: #fff;
	text-align: center;
	margin:0;
}

.action_button_area {
	display: flex;
	flex-direction: row;
}

.fg-result{
  font-size:18px
}
.fg-result.ok{
  color:#16a34a
}
.fg-result.err{
  color:#ef4444
}

.breadcrumb-section { 
  display: none !important; 
}

.uni-page-sticky { 
  margin-top: 0 !important; 
}


@media (max-width:720px){
  .fg-row{
    font-size:16px
  }

  .fg-gap input{
    font-size:16px
  }
}

.fg-final-text{
  background:#f8fafc;
  border-radius:12px;
  padding:12px 14px;
  margin-top:8px;
  font-size:18px
}

@media (max-width:560px){
  .fg-actions{ 
    flex-wrap:wrap; 
    row-gap:10px; 
  }
  .fg-actions-left{ 
    width:100%; 
  }
  .fg-hint{ 
    margin-left:auto; 
  }
}

@media (max-width: 480px){
  .ao-tt {
    right: 50%;
    transform: translate(50%, -4px);
  }
  .ao-tt::after {
    right: 50%;
    transform: translateX(50%) rotate(45deg);
  }
}