/* --- Global Form Styles for Dark Mode --- */

.form-group {
    margin-bottom: 24px;
}

label {
    display: block;
    margin-bottom: 8px;
    /* 使用标题色 Color 4 (纯白) */
    color: var(--theme-palette-color-4);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px; /* 增加一点字间距，更有科技感 */
}

select, textarea {
    width: 100%;
    padding: 12px 15px;
    
    /* 背景改为 Color 6 (Deep Void)，比页面背景更深一点，形成凹陷感 */
    background-color: var(--theme-palette-color-6);
    
    /* 文字颜色 Color 3 (Slate Mist) */
    color: var(--theme-palette-color-3);
    
    /* 边框 Color 5 (Dark Slate) */
    border: 1px solid var(--theme-palette-color-5);
    
    border-radius: 6px; /*稍微圆润一点*/
    font-size: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease; /* 添加过渡动画 */
}

/* 输入框获得焦点时的发光效果 */
select:focus, textarea:focus {
    outline: none;
    /* 边框变成主色 Color 1 */
    border-color: var(--theme-palette-color-1);
    /* 添加一点微弱的紫色光晕 */
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); 
}

select {
    height: 50px;
    appearance: none;
    -webkit-appearance: none;
    
    /* 
       关键修改：
       原 SVG 的 fill='%23333' (黑色) 改为 fill='%238B5CF6' (Color 1 紫色)。
       这样箭头在深色背景下清晰可见。
    */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 0h12L6 6z' fill='%238B5CF6'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    cursor: pointer;
}

textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

.generate-btn {
    width: 100%;
    padding: 15px;
    
    /* 背景改为 Color 1 (Primary) */
    background: var(--theme-palette-color-1);
    
    /* 文字改为 Color 4 (White) */
    color: var(--theme-palette-color-4);
    
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600; /* 加粗一点 */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* 大写更有气势 */
}

.generate-btn:hover {
    /* 悬停改为 Color 2 (Hover) */
    background: var(--theme-palette-color-2);
    transform: translateY(-1px); /* 轻微上浮 */
}

.generate-btn:active {
    transform: translateY(0);
}

#output {
    margin-top: 20px;
    padding: 24px;
    min-height: 200px;
    
    /* 背景改为 Color 5 (Cards)，让它像一张卡片 */
    background-color: var(--theme-palette-color-5);
    
    /* 文字颜色 Color 3 */
    color: var(--theme-palette-color-3);
    
    border-radius: 6px;
    white-space: pre-wrap;
    line-height: 1.8; /* 增加行高，歌词阅读更舒适 */
    border: 1px solid rgba(255,255,255,0.05); /* 极细的内发光边框 */
}

.note {
    /* 使用 Color 3 但透明度降低，作为注释文字 */
    color: var(--theme-palette-color-3);
    opacity: 0.7;
    
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.4;
}

.italic {
    font-style: italic;
    opacity: 0.8;
}