.ai-prompt-generator {
　display: flex;
justify-content: center;
align-items: center;
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background: #f8f9fa;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(255,167,38,0.1);
border: 2px solid #ffe8cc;
font-family: 'Segoe UI', sans-serif;
} .ai-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
padding-bottom: 20px;
}
.ai-header::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 3px;
background: linear-gradient(90deg, #74c0fc 0%, #bac8ff 100%);
border-radius: 2px;
} .ai-main-title {
background: linear-gradient(135deg, #FFD6E8 0%, #FFF5D2 50%, #D2FFE7 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 2.5em;
font-weight: 700; 
letter-spacing: -0.5px; text-shadow: 2px 2px 4px rgba(116,192,252,0.2);
display: inline-block;
padding: 15px 30px;
margin: 20px 0;
border: 2px solid #a5d8ff;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(116,192,252,0.15);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
} .ai-main-title:hover {
transform: scale(1.02);
box-shadow: 0 6px 20px rgba(116,192,252,0.2);
} .ai-main-title::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.3),
transparent
);
transition: 0.5s;
}
.ai-main-title:hover::after {
left: 100%;
} .ai-subtitle {
color: #e74c3c;
font-size: 1.2em;
font-weight: 500;
margin-top: 0;
} .ai-instruction {
width: 75%;
margin: 1.5rem auto;
padding: 1rem;
border: 2px dashed #ffa726;
border-radius: 8px;
background: #fff3e0;
}
.ai-instruction p {
color: #2c3e50;
font-size: 14px;
text-align: left;
line-height: 1.6;
margin: 0.5rem 20px;
} .ai-section-divider {
border-bottom: 2px solid #ffd8a8;
margin: 35px 0 75px;
position: relative;
}
.ai-section-divider h3 {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 25px;
color: #ff922b;
font-size: 1.4em;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(255,146,43,0.2);
letter-spacing: 1px;
} .ai-input-text, .ai-output-text {
width: 75% !important;
margin: 15px auto !important;
display: block !important;
padding: 15px 20px;
border: 2px solid #a5d8ff;
border-radius: 8px;
background: #f0f8ff;
color: #2c3e50;
font-size: 1em;
transition: all 0.3s ease;
min-height: 120px;
text-align: left !important;
}
.ai-input-text:focus, .ai-output-text:focus {
border-color: #74c0fc;
box-shadow: 0 0 8px rgba(116,192,252,0.3);
outline: none;
}
.ai-input-text::placeholder,
.ai-output-text::placeholder {
color: #adb5bd;
font-style: italic;
font-size: 0.95em;
} .editor-title {
text-align: center;
color: #74c0fc;
font-size: 1.5em;
margin: 20px 0 10px;
padding: 8px 25px;
display: inline-block;
border-radius: 30px;
background: #e7f5ff;
border: 2px solid #a5d8ff;
box-shadow: 0 2px 4px rgba(116,192,252,0.1);
} .ai-action-buttons, .ai-control-buttons {
display: flex;
justify-content: center;
gap: 25px;
margin: 25px 0;
}
.ai-btn {
color: white !important;
border: none !important;
padding: 12px 28px;
border-radius: 50px !important;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 10px;
position: relative;
overflow: hidden;
}
.ai-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
filter: brightness(1.1);
}
.ai-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.3),
transparent
);
transition: 0.5s;
}
.ai-btn:hover::before {
left: 100%;
} .ai-translate-btn { 
background: linear-gradient(135deg, #74c0fc 0%, #4dabf7 100%) !important;
}
.ai-nontranslate-btn { 
background: linear-gradient(135deg, #ff8787 0%, #ff6b6b 100%) !important;
}
.ai-add-btn { 
background: linear-gradient(135deg, #69db7c 0%, #40c057 100%) !important;
}
.ai-copy-btn { 
background: linear-gradient(135deg, #bac8ff 0%, #91a7ff 100%) !important;
}
.ai-reset-btn { 
background: linear-gradient(135deg, #ffd43b 0%, #fab005 100%) !important;
} .ai-prompt-selectors {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
margin: 25px 0 45px;
padding-top: 20px;
font-size: 16px;
} .ai-select.narrow {
width: 200px !important;
border: 2px solid #c3fae8;
background: #e3fafc;
color: #2c3e50;
border-radius: 8px;
padding: 8px 15px;
font-size: 0.95em;
transition: all 0.3s ease;
}
.ai-select.narrow:focus {
border-color: #74c0fc;
box-shadow: 0 0 8px rgba(116,192,252,0.3);
} @media (max-width: 768px) {
.ai-prompt-generator {
padding: 1.5rem;
margin: 1rem;
}
.ai-main-title {
font-size: 2em; 
padding: 12px 25px;
}
.ai-section-divider h3 {
font-size: 1.2em;
top: -15px;
}
.ai-prompt-selectors {
margin: 20px 0 35px;
flex-direction: column;
gap: 10px;
}
.ai-instruction {
width: 90%;
}
.ai-select.narrow, .ai-btn {
width: 100% !important;
margin: 8px 0;
}
.ai-action-buttons, .ai-control-buttons {
flex-direction: column;
gap: 15px;
}
.editor-title {
font-size: 1.2em;
padding: 6px 20px;
}
} .dashicons {
width: 20px;
height: 20px;
font-size: 20px;
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
}
.midjourney-params-section {
margin-top: 2rem;
padding: 1rem;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
}
.midjourney-params-section hr {
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 1rem;
}
.midjourney-params-section h3 {
margin: 0 0 0.5rem;
font-size: 1.5em;
color: #333;
text-align: center;
}
.midjourney-params-section p {
font-size: 0.95em;
color: #666;
text-align: center;
margin-bottom: 1rem;
}
.midjourney-param-row {
display: flex;
flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.mid-param-desc {
width: 60%;
font-weight: bold;
padding: 4px 0;
}
.mid-param-value {
width: 38%;
text-align: right;
padding: 4px 0;
}
.mid-param-value .param-text {
margin-bottom: 4px;
font-size: 0.95em;
color: #444;
}
.add-param-btn {
padding: 4px 8px;
font-size: 0.85em;
background: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.add-param-btn:hover {
background: #43a047;
} .midjourney-params-section hr {
border: 0;
border-top: 1px solid #bbb; margin-bottom: 1em;
}
.midjourney-params-section h3 {
color: #f48fb1;
font-family: 'Comic Sans MS', cursive, sans-serif;
font-size: 1.8em;
text-align: center;
margin-bottom: 0.5em;
}
.midjourney-params-section p {
text-align: center;
color: #666;
margin-bottom: 1em;
}
#accordion-toggle {
display: block;
margin: 0 auto 1em auto;
padding: 0.5em 1em;
font-size: 1em;
cursor: pointer;
background-color: #f06292; border: 1px solid #e91e63; border-radius: 4px;
}
#accordion-toggle:hover {
background-color: #ec407a; } .midjourney-param-row {
padding: 8px 0;
border-bottom: 1px solid #bbb;
} .mid-param-desc {
display: inline-block;
width: 60%;
vertical-align: top;
font-weight: bold;
} .mid-param-value {
display: inline-block;
width: 38%;
vertical-align: top;
text-align: right;
}
.mid-param-value .param-text {
margin-bottom: 4px;
font-size: 0.95em;
color: #444;
}
.add-param-btn {
margin-top: 4px;
font-size: 0.9em;
cursor: pointer;
padding: 4px 8px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
}
.add-param-btn:hover {
background-color: #43a047;
}