/* ===== HERO TEXT (create-specific) ===== */
.dynamic{
  display:inline-block;
  color: var(--accent);
  transition: opacity .4s ease, transform .4s ease;
}

/* ===== FORM CONTROLS ===== */
.select{
  width:100%;
  margin-top:12px;
  height:52px;
  padding: 0 14px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background-color:#020617;
  color: var(--text-main);

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  cursor:pointer;
  padding-right:44px;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
}

.select:hover{ border-color: rgba(255,255,255,0.18); }

.select:focus{
  outline:none;
  border-color: rgba(94,234,212,0.6);
  box-shadow: 0 0 0 3px rgba(94,234,212,0.12);
}

.select::-ms-expand{ display:none; }

/* ===== MESSAGE INPUT WITH FOOTER ===== */
.message-box{
  margin-top:12px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:#020617;
  overflow:hidden;
}

.message-box textarea{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color: var(--text-main);
  font-size:16px;
  padding:14px;
  resize:vertical;
  min-height:140px;
  display:block;
}

.message-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color: var(--text-muted);
  font-size:14px;
}

.message-footer label{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--text-muted);
  user-select:none;
}

.hint{
  font-size:12px;
  color: rgba(156,163,175,0.9);
  line-height:1.4;
  text-align:right;
}

/* ===== ACTIONS ROW ===== */
.actions-row{
  margin-top:24px;
  display:flex;
  gap:14px;
  align-items:stretch;
}

.actions-row > *{ flex:1; }

/* secondary button look */
.secondary-btn{
  height:52px;
  padding:0 18px;
  border-radius:10px;

  border:1px solid rgba(255,255,255,0.12);
  background: rgba(2,6,23,0.55);

  color: var(--text-main);
  font-size:15px;
  font-weight:600;
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
}

.secondary-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

#status{
  margin-top:14px;
  color: var(--danger);
}

/* ===== RESULT STATE ===== */
#resultWrap{ display:none; }

.share-title{
  margin-top:2px;
  font-size:14px;
  color: var(--text-muted);
}

.share-row{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
}

.share-input{
  flex:1;
  height:52px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.75);
  border-radius:12px;
  padding: 0 14px;
  color: var(--accent);
  font-size:14px;
  outline:none;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.share-input:focus{
  border-color: rgba(94,234,212,0.55);
  box-shadow: 0 0 0 3px rgba(94,234,212,0.12);
}

.copy-icon-btn{
  width:52px;
  min-width:52px;
  height:52px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,0.10);
  background: rgba(2,6,23,.75);
  color: var(--text-main);
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition: box-shadow .15s ease, border-color .15s ease;
  padding:0;
}

.copy-icon-btn:hover{
  border-color: rgba(94,234,212,0.35);
  box-shadow: 0 10px 30px rgba(94,234,212,.18);
}

.copy-icon-btn.success{
  border-color: rgba(94,234,212,0.6);
  box-shadow: 0 10px 30px rgba(94,234,212,.16);
}

.new-primary{ margin-top:16px; }

/* ===== TOAST INSIDE CARD ===== */
.toast{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(0.98);
  background: rgba(2,6,23,.92);
  border:1px solid rgba(94,234,212,0.25);
  color: var(--text-main);
  padding:12px 14px;
  border-radius:14px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  box-shadow: 0 18px 50px rgba(0,0,0,.45);

  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:20;
}

.toast.show{
  opacity:1;
  transform: translate(-50%,-50%) scale(1);
}

.toast-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--accent);
}

.toast-text{
  font-size:14px;
  color: rgba(229,231,235,.95);
  white-space:nowrap;
}

/* ===== MOBILE POLISH (create-specific) ===== */
@media (max-width: 640px){
  .message-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .hint{
    text-align:left;
  }

  .actions-row{
    flex-direction:column;
  }

  .actions-row > *{
    width:100%;
  }

  /* PRIMARY + любые кнопки в actions-row */
  .actions-row .btn{
    min-height:64px;      /* комфортная высота тапа */
    padding:0 20px;
    font-size:16px;
    line-height:1.2;     /* фикс “узкой” кнопки */
  }

  /* вторичная кнопка */
  .secondary-btn{
    min-height:64px;
    padding:0 20px;
    font-size:16px;
  }

  .select{
    height:64px;
    padding:0 16px;
    font-size:16px;
  }

  .share-input{
    height:64px;
    font-size:15px;
  }

  .copy-icon-btn{
    width:64px;
    height:64px;
    min-width:64px;
  }

  .copy-icon-btn svg{
    width:22px;
    height:22px;
  }
}