.daxin-agent{

max-width: 1000px;

margin: 40px auto;

font-family :
Arial,
sans-serif;

}

.agent-header{

Contexte :
linear-gradient(
135deg,
#006b45,
#00b86b
);

couleur : blanc ;

padding: 45 px ;

border-radius : 20 px ;

text-align:center;

}

.agent-header h1{

taille de police : 40 px ;

margin-bottom : 15px ;

}

.agent-card{

fond : blanc ;

padding: 35 px ;

margin-top : 30px ;

border-radius : 20 px ;

box-shadow :
0 8px 30px rgba(0,0,0,.12);

}

.agent-card h2{

taille de police : 28 px ;

couleur : #006b45;

}

#productInput{

width:100%;

hauteur : 120 px ;

padding : 15px ;

taille de police : 17 px ;

border :

1px solid #ccc;

border-radius : 10 px ;

}

button{

rembourrage :

15px 35px ;

margin-top : 20px ;

border-radius : 30 px ;

border:none;

taille de police : 16 px ;

cursor:pointer;

}

#generateBtn{

fond : #008f55 ;

couleur : blanc ;

}

.tiktok{

fond : #000 ;

couleur : blanc ;

}

.publish{

fond : #fe2c55 ;

couleur : blanc ;

margin-left: 15px ;

}

.output{

fond : #f1faf5 ;

border-left :

5px solide #008f55;

padding : 25px ;

border-radius : 12 px ;

}

.output h3{

couleur : #008f55 ;

}

#status{

margin-top : 25px ;

taille de police : 20 px ;

font-weight:bold;

couleur : #008f55 ;

}

.daxin-dashboard{

max-width: 1200px ;
margin: 40px auto;
font-family :
Arial,
Helvetica,
sans-serif;

couleur : #1e293b ;

}

.daxin-header{

Contexte :
linear-gradient(135deg,#0f172a,#2563eb);

padding: 45 px ;

border-radius : 25 px ;

couleur : blanc ;

margin-bottom : 30px ;

}

.daxin-header h1{

taille de police : 42 px ;
margin: 0 0 15px ;

}

.daxin-header p{

taille de police : 18 px ;

opacité : 0,9 ;

}

.grid{

display:grid;

grid-template-columns :
repeat(2, 1fr);

gap:25px;

}

.box{

fond : blanc ;

padding : 30px ;

border-radius : 20 px ;

box-shadow :
0 10px 30px rgba(0,0,0,.08);

}

.box h2{

taille de police : 26 px ;

margin-bottom : 20px ;

}

entrée,
zone de texte,
select{

width:100%;

padding: 14px ;

border-radius : 10 px ;

border: 1px solid #ddd;

margin-bottom : 15px ;

taille de police : 16 px ;

}

textarea {

hauteur : 120 px ;

}

.btn{

fond : #2563eb ;

couleur : blanc ;

border:none;

padding : 14px 25px ;

border-radius : 10 px ;

cursor:pointer;

taille de police : 16 px ;

}

.btn:hover{

background:#1d4ed8;

}

.ai-result{

background:#f8fafc;

padding : 20px ;

border-radius : 15 px ;

}

.tag{

display:inline-block;

fond : #dbeafe ;

padding : 8px 15px ;

border-radius : 30 px ;

margin: 5px;

}

.channel{

display: flex;

justify-content:space-between;

padding : 15px ;

border-bottom: 1px solid #eee;

}

.status{

couleur : vert ;

font-weight:bold;

}

.analytics{

display:grid;

grid-template-columns :
repeat(3, 1fr);

gap:20px;

}

.metric{

background:#f1f5f9;

padding : 25px ;

border-radius : 15 px ;

text-align:center;

}

.metric strong{

display:block;

taille de police : 32 px ;

couleur : #2563eb ;

}

.loading{

display:none;

couleur : #2563eb ;

font-weight:bold;

}

@media(max-width:768px){

.grid{

grid-template-columns: 1fr;

}

.analytics{

grid-template-columns: 1fr;

}

}