:root{
  --blur:2px;
  --card-bg:white;
  --card-bg-dark:rgba(29,29,31,.68);
  --radius:16px;
  --spacing:24px;
  --accent:#0a84ff;
  --text:#1d1d1f;
  --text-dark:#f5f5f7;
  --grey:#6a778e;
}
.modal-overlay{
  position:fixed;inset:0;display:flex;
  align-items:center;justify-content:center;
  background:rgb(255 255 255 / 40%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .1s ease;
  z-index:9999;
}
.modal-overlay.show{opacity:1;pointer-events:all;}
.modal-card{
  width:90%;max-width:470px;
  padding:var(--spacing) calc(var(--spacing) - 4px) 20px;
  text-align:center;

  background:var(--card-bg);
  -webkit-backdrop-filter:blur(calc(var(--blur)*1.5));
          backdrop-filter:blur(calc(var(--blur)*1.5));

  border-radius:var(--radius);
  box-shadow:0 24px 48px rgba(0,0,0,.24);

  transform:translateY(20px) scale(.95);
  opacity:0;
  animation:modalIn .4s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes modalIn{
  to{transform:translateY(0) scale(1);opacity:1}
}
.modal-check{margin-top:-8px;margin-bottom:8px;}
.modal-title{
  margin:0 0 18px;
  font-size:21px;font-weight:500;
  color:var(--grey);
}
.modal-short-link {
  display: inline-block;
  font-size: 35px;
  font-weight: 300;
  color: #fff;
  background: #f6f6f6;
  padding: 6px 12px;
  border-radius: 10px;
  margin: 10px 0 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}
.modal-short-link:hover {
  background: #f6f6f6;
}
.modal-text{
  margin:10px 0 10px;
  font-size:16px;line-height:1.4;
  color:var(--grey);
}
.modal-link{
  display:block;width:100%;
  padding:12px 10px;margin-bottom:16px;
  background:var(--accent);color:#fff;
  font-size:15px;letter-spacing:-0.4px;border:none;border-radius:12px;
  font-weight:300;cursor:pointer;word-break:break-all;
}
.modal-link:active{transform:scale(.97)}
.modal-close{
  background:none;border:none;
  color:var(--accent);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}
.modal-close:active{opacity:.6}
.ai-field{           
  display:block;
  margin-bottom:var(--spacing);
  text-align: left;
}
.ai-field input{    
  width:100%;
  padding:12px 16px;
  box-sizing:border-box;
  border:1px solid #d1d1d6;
  border-radius:8px;
  font-size:15px;
  background:#fff;
}
.ai-field input:focus{
  outline:2px solid var(--accent);
}
.ai-field span{
  display:block;
  margin-bottom:8px;
  font-size:18px;        
  font-weight:400;
  line-height:1.3;
}
.ai-field input,
.ai-field textarea{
  width:100%;
  padding:5px 9px;     
  box-sizing:border-box;
  border:1px solid #d1d1d6;
  border-radius:8px;
  font-size:18px;        
  line-height:1.3;
  background:#f8f8f8;
  resize:vertical;      
}
.ai-field textarea{
  min-height:75px;       
}
.ai-field input:focus,
.ai-field textarea:focus{
  outline:2px solid var(--accent);
}
.ai-field input.invalid,
.ai-field textarea.invalid{
  border-color:#ff3b30;
}
#aiGenerateBtn{
  position: relative;
  width: auto;
  height: 48px;
  border-radius: 14px;
  padding: 0 9px;
  font-size: 25px;
  font-weight: 150;
  color: #fff;
  border: 0px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background:linear-gradient(120deg, #5de0e6, #8a7dff, #ff9cee) border-box;  
  background-clip: padding-box, border-box;
  background-size: auto, 200% 200%;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  background-position: 0 0, 0% 50%;
}
#aiGenerateBtn:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  background-position: 0 0, 100% 50%;
}
#aiGenerateBtn:active{
  transform: translateY(0);
  filter: brightness(.98);
}
#aiGenerateBtn::before{
  content:"";
  position:absolute;
  inset:0; 
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.35), transparent 60%);
  opacity:.35;
  mix-blend-mode: screen;
  transform: translateX(-10%);
  transition: transform .6s ease, opacity .6s ease;
}
#aiGenerateBtn:hover::before{
  transform: translateX(0);
  opacity:.45;
}
#aiGenerateBtn:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
#aiGenerateBtn:disabled,
.result.loading#aiGenerateBtn{
  cursor: progress;
  filter: saturate(.85);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce){
  #aiGenerateBtn,
  #aiGenerateBtn::before{
    transition: none;
  }
}
@keyframes btnGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#aiGenerateBtn {
  background-size: auto, 250% 250%;
}
#aiGenerateBtn.loading {
  color: transparent;
  pointer-events: none;
}
#aiGenerateBtn.loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2.5px solid rgba(255,255,255,.6);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.ai-actions .btn{ width: 100%; max-width: none; }
@media (min-width:640px){
  .modal-card.ai-card{max-width:560px;}
}
.ai-field input.invalid{border-color:#ff3b30;}
@media (prefers-color-scheme:dark){
  .modal-card{background:var(--card-bg-dark)}
  .modal-title{color:var(--text-dark)}
  .modal-text{color:#8e8e93}
}
#modal .modal-link {
  text-align: left;
  padding-left: 14px;
}
#modal .url-ellipsis{
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1px;
}
#modal .modal-short-link,
#modal .modal-short-link:hover{
  color: var(--accent);
}
#modal .ad-selector{
  display:flex; gap:10px; justify-content:center; align-items:center;
  margin:-6px 0 14px;
}
#modal .ad-pill{
  appearance:none; border:none;
  background: rgba(0,0,0,.04); color: var(--text);
  padding:8px 12px; border-radius:999px;
  display:flex; align-items:center; gap:8px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
}
#modal .ad-pill:hover{ transform: translateY(-1px); }
#modal .ad-pill:active{ transform: translateY(0); }
#modal .ad-pill.active{
  background: var(--accent); color:#fff;
  box-shadow: 0 8px 24px rgba(16,120,254,.28);
}
#modal .ad-pill:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
#modal .ad-icon{ width:20px; height:20px; display:block; }
#modal .ad-pill span{ font-size:15px; letter-spacing:-.15px; }
#modal .ad-icon{
  width: 21px; height: 21px; display: block;
  object-fit: contain;
}