.dai-card {
  max-width: 100%;
  margin-right: 20px;
  border-radius: 20px;
  padding: 5px;
  box-shadow: 0 15px 40px rgba(0,0,0,.08);
}



@media (max-width:768px){

   
.dai-card {
  
  margin-right: 0px;
 
}


}



.dai-header {
  margin-bottom: 0px;
 
}

.dai-header h2{

margin:0;
font-size: clamp(28px, 4vw, 34px);
font-family: tusker-m; line-height: 100%; text-align: center;
}

.dai-header p{

margin-top:10px;
color:#777; text-align: center;
line-height: 100%;
}


.dai-header{

    display:flex;

    align-items:center;

    gap:25px;

}

.dai-header-left{

    flex:0 0 35%

}

.dai-header-left img{

    width:100%;

    display:block;

    border-radius:12px;

}

.dai-header-right{

    flex:1;

}



.dai-header-banner{

    position:relative;

    overflow:hidden;

    border-radius:16px;

}

.dai-header-banner img{

    width:100%;

    display:block; transform: rotate(4deg);

}

.dai-header-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

   

    padding:20px;

}

.dai-header-overlay h3{

    margin:0;

    font-size:38px;

    font-weight:700;
color: #1f2d4d; font-family: Aerosoldier;

}

.dai-header-overlay p{

    margin-top:8px;

    font-size:15px;

    opacity:.9;

}




.dai-input,

.dai-select{

width:100%;
padding:12px;
margin-bottom:10px;
border-radius:12px;
border:1px solid #ddd;
font-size:16px;
box-sizing:border-box;

}

.dai-button{

width:100%;
padding:18px;
border:none;
border-radius:12px;
background:#2563eb;
color:white;
font-size:18px;
cursor:pointer;

}

.dai-button:hover{

opacity:.9;

}

.dai-preview {
  margin-top: 0px;
  min-height: 644px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ddd;
  border-radius: 20px;
  font-size: 18px;
  color: #888;
}

@media (max-width: 768px) {
  .dai-preview  {
   min-height: 400px;
  }
}


#dai-status {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 25px;
  color: #f00;
  line-height: 100%; background: #fc0;
}

#dai-image{

max-width:100%;
display:block;
margin:auto;

}


.dai-chips{

display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:25px;

}

.dai-chip{

padding:10px 16px;
border-radius:30px;
border:1px solid #ddd;
background:#fafafa;
cursor:pointer;
transition:.25s;

}

.dai-chip:hover{

background:#2563eb;
color:#fff;
border-color:#2563eb;

}


.dai-layout{

display:flex;
gap:30px;
align-items:flex-start;

}

.dai-sidebar{

width:35%;

}

.dai-content{

width:65%;

}

@media(max-width:900px){

.dai-layout{

flex-direction:column;

}

.dai-sidebar{

width:100%;

}

.dai-content{

width:100%;

}

}



.dai-label{

display:block;

font-size:14px;

font-weight:normal;

margin-bottom:8px;

margin-top:10px;

color: #cbd5e1;

}


.dai-download{

margin-top:20px;

}

#dai-download{

width:100%;

}



.dai-textarea{

width:100%;

min-height:140px;

padding:14px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

line-height:1.6;

resize:vertical;

box-sizing:border-box;

font-family:inherit;

}


.dai-textarea:focus{

outline:none;

border-color:#666;

}



/* ==========================
STATUS
========================== */

.dai-status{

display:flex;

align-items:center;

gap:12px;

margin-top:18px;

padding:12px 16px;

border-radius:12px;

background:#f7f7f7;

font-size:14px;

font-weight:600;

}

.dai-spinner{

width:18px;

height:18px;

border:3px solid #ddd;

border-top:3px solid #4f46e5;

border-radius:50%;

animation:dai-spin .8s linear infinite;

display:none;

}

@keyframes dai-spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}