/* --- 自定义字体加载 --- */
@font-face {
  font-family: 'Cascadia Code Bold';
  src: url('static/CascadiaCode-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Bold Italic';
  src: url('static/CascadiaCode-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Extra Light';
  src: url('static/CascadiaCode-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Extra Light Italic';
  src: url('static/CascadiaCode-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Italic';
  src: url('static/CascadiaCode-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Light';
  src: url('static/CascadiaCode-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Light Italic';
  src: url('static/CascadiaCode-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Medium';
  src: url('static/CascadiaCode-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Medium Italic';
  src: url('static/CascadiaCode-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Regular';
  src: url('static/CascadiaCode-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Semi Bold';
  src: url('static/CascadiaCode-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code Semi Bold Italic';
  src: url('static/CascadiaCode-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Black';
  src: url('static/Roboto-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Black Italic';
  src: url('static/Roboto-BlackItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Bold';
  src: url('static/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Bold Italic';
  src: url('static/Roboto-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Extra Bold';
  src: url('static/Roboto-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Extra Bold Italic';
  src: url('static/Roboto-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Extra Light';
  src: url('static/Roboto-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Extra Light Italic';
  src: url('static/Roboto-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Italic';
  src: url('static/Roboto-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Light';
  src: url('static/Roboto-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Light Italic';
  src: url('static/Roboto-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Medium';
  src: url('static/Roboto-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Medium Italic';
  src: url('static/Roboto-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Regular';
  src: url('static/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Bold';
  src: url('static/Roboto-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Bold Italic';
  src: url('static/Roboto-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Thin';
  src: url('static/Roboto-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Thin Italic';
  src: url('static/Roboto-ThinItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Black';
  src: url('static/Roboto_Condensed-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Black Italic';
  src: url('static/Roboto_Condensed-BlackItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Bold';
  src: url('static/Roboto_Condensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Bold Italic';
  src: url('static/Roboto_Condensed-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Extra Bold';
  src: url('static/Roboto_Condensed-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Extra Bold Italic';
  src: url('static/Roboto_Condensed-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Extra Light';
  src: url('static/Roboto_Condensed-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Extra Light Italic';
  src: url('static/Roboto_Condensed-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Italic';
  src: url('static/Roboto_Condensed-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Light';
  src: url('static/Roboto_Condensed-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Light Italic';
  src: url('static/Roboto_Condensed-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Medium';
  src: url('static/Roboto_Condensed-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Medium Italic';
  src: url('static/Roboto_Condensed-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Regular';
  src: url('static/Roboto_Condensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Semi Bold';
  src: url('static/Roboto_Condensed-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Semi Bold Italic';
  src: url('static/Roboto_Condensed-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Thin';
  src: url('static/Roboto_Condensed-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed Thin Italic';
  src: url('static/Roboto_Condensed-ThinItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Black';
  src: url('static/Roboto_SemiCondensed-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Black Italic';
  src: url('static/Roboto_SemiCondensed-BlackItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Bold';
  src: url('static/Roboto_SemiCondensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Bold Italic';
  src: url('static/Roboto_SemiCondensed-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Extra Bold';
  src: url('static/Roboto_SemiCondensed-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Extra Bold Italic';
  src: url('static/Roboto_SemiCondensed-ExtraBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Extra Light';
  src: url('static/Roboto_SemiCondensed-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Extra Light Italic';
  src: url('static/Roboto_SemiCondensed-ExtraLightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Italic';
  src: url('static/Roboto_SemiCondensed-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Light';
  src: url('static/Roboto_SemiCondensed-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Light Italic';
  src: url('static/Roboto_SemiCondensed-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Medium';
  src: url('static/Roboto_SemiCondensed-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Medium Italic';
  src: url('static/Roboto_SemiCondensed-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Regular';
  src: url('static/Roboto_SemiCondensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Semi Bold';
  src: url('static/Roboto_SemiCondensed-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Semi Bold Italic';
  src: url('static/Roboto_SemiCondensed-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Thin';
  src: url('static/Roboto_SemiCondensed-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Semi Condensed Thin Italic';
  src: url('static/Roboto_SemiCondensed-ThinItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Caveat Bold';
  src: url('static/Caveat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Caveat Medium';
  src: url('static/Caveat-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Caveat Regular';
  src: url('static/Caveat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Caveat Semi Bold';
  src: url('static/Caveat-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Dancing Script Bold';
  src: url('static/DancingScript-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Dancing Script Medium';
  src: url('static/DancingScript-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Dancing Script Regular';
  src: url('static/DancingScript-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Dancing Script Semi Bold';
  src: url('static/DancingScript-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Pacifico Regular';
  src: url('static/Pacifico-Regular.ttf') format('truetype');
}

/* --- 全局和基本样式 --- */
:root {
    /* 新的颜色方案 (多色绿 V2) */
    --bg-color: #D8F3DC; /* 页面背景色 (最浅) */
    --secondary-color: #FFFFFF; /* 卡片背景色 (白色) */
    --primary-color: #081C15; /* 主要文字颜色 (最深) */
    --text-color-light: #1B4332; /* 次要文字颜色 (次深) */
    --border-color: #95D5B2; /* 边框颜色 (中浅) */
    --header-bg: #40916C; /* 头部背景色 (中深) */
    --logo-text: #B7E4C7; /* Logo 文字颜色 (较浅) */
    --accent-color: #52B788; /* 主按钮背景 (中亮) */
    --button-text-on-accent: #FFFFFF; /* 主按钮文字 (白色) */
    --accent-color-hover: #2D6A4F; /* 主按钮悬停背景 (更深) */
    --lang-switch-text-border: #95D5B2; /* 语言按钮文字/边框 (中浅) */
    --lang-switch-hover-bg: #1B4332; /* 语言按钮悬停背景 (次深) */
    --lang-switch-hover-text: #B7E4C7; /* 语言按钮悬停文字 (较浅) */
    --secondary-button-bg: #95D5B2; /* 次要按钮背景 (中浅) */
    --secondary-button-text: #081C15; /* 次要按钮文字 (最深) */
    --secondary-button-hover-bg: #74C69D; /* 次要按钮悬停背景 (中等) */
    --secondary-button-hover-text: #081C15; /* 次要按钮悬停文字 (最深) */

    /* 字体 */
    --body-font: 'Open Sans', sans-serif; /* UI 字体 */
    /* 手写体将在 JS 中直接应用 */
}

/* 基本重置 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--primary-color);
    /* 使用新的纯色背景 */
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* 容器 */
.container {
    width: 90%;
    max-width: 1100px; /* 保持最大宽度 */
    margin: 0 auto;
    padding: 1rem 0; /* 减小默认上下边距 */
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
    text-decoration: none;
}

h1 {
    font-size: 2.8rem;
    font-weight: 700; /* 标题加粗 */
    margin-bottom: 0.5rem;
    text-align: center;
    color: var(--primary-color);
}

/* --- 新 Header 样式 --- */
header {
    /* 将头部背景改为新的中深绿色 */
    background-color: var(--header-bg);
    padding: 0.8rem 0;
    /* 边框颜色也用新的中浅绿色 */
    border-bottom: 1px solid var(--border-color);
}

header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    /* 在中深绿背景下，使用较浅绿色 Logo */
    color: var(--logo-text);
    /* 移除卡通字体 */
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem; /* 导航项间距 */
}

.main-nav a {
    color: var(--text-color-light); /* 导航链接浅色 */
    font-size: 0.95rem;
}

.main-nav a:hover {
    color: var(--primary-color); /* 悬停变深色 */
    opacity: 1;
}

/* 语言切换器调整以适应新背景 */
.language-switcher button {
    background-color: transparent;
    /* 在中深绿背景下，使用中浅绿色边框和文字 */
    color: var(--lang-switch-text-border);
    border: 1px solid var(--lang-switch-text-border);
    padding: 0.3rem 0.8rem;
    margin-left: 0.5rem;
    font-size: 0.9rem;
    font-family: var(--body-font);
    border-radius: 4px; /* 方角 */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.language-switcher button:hover {
    /* 悬停时，次深绿色背景，较浅绿色文字 */
    background-color: var(--lang-switch-hover-bg);
    color: var(--lang-switch-hover-text);
    border: 1px solid var(--lang-switch-hover-bg); /* 边框也改 */
}

/* --- Hero New Section --- */
.hero-new {
    padding: 3rem 0 2rem 0; /* 调整上下边距 */
    text-align: center;
}

.hero-new p {
    color: var(--text-color-light); /* 副标题浅色 */
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 1rem auto;
}

/* --- Generator Section --- */
.generator-section {
    padding: 1rem 0 3rem 0; /* 调整上下边距 */
}

.generator-card {
    background-color: var(--secondary-color); /* 卡片背景白色 */
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 添加阴影 */
    border: 1px solid var(--border-color);
}

.generator-controls {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem; /* 增加元素间距 */
}

#text-input {
    flex-grow: 1; /* 占据大部分空间 */
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    /* 移除 margin-right，使用 gap 代替 */
    min-width: 200px; /* 调整最小宽度 */
}

/* Pretty Font 按钮样式更新 */
#pretty-font-button {
    padding: 0.8rem 1.5rem;
    background-color: var(--accent-color); /* 使用强调色 (中亮绿) */
    color: var(--button-text-on-accent); /* 文字用白色 */
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

#pretty-font-button:hover {
    background-color: var(--accent-color-hover); /* 悬停时颜色变为更深的绿色 */
}

/* 新增：随机字体按钮样式 */
#random-font-button {
    padding: 0.8rem 1.5rem;
    /* 使用次要按钮颜色 */
    background-color: var(--secondary-button-bg); 
    color: var(--secondary-button-text); 
    border: 1px solid var(--secondary-button-bg); /* 加个边框 */
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

#random-font-button:hover {
    /* 悬停时使用次要按钮悬停色 */
    background-color: var(--secondary-button-hover-bg);
    color: var(--secondary-button-hover-text);
    border-color: var(--secondary-button-hover-bg);
}

.size-control {
    /* 这个选择器对应的元素已经不存在，可以移除 */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 0.5rem; */
    /* color: var(--text-color-light); */
}

#size-slider {
    /* 这个选择器对应的元素已经不存在，可以移除 */
    /* cursor: pointer; */
    /* width: 150px; */
}

#size-value {
    /* 这个选择器对应的元素已经不存在，可以移除 */
    /* min-width: 40px; */
    /* text-align: right; */
    /* font-weight: bold; */
    /* color: var(--primary-color); */
}

/* --- Results Area --- */
#results-area {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 结果行间距 */
}

.result-line {
    display: flex;
    justify-content: space-between; /* 文本和按钮两端对齐 */
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #eee; /* 分隔线 */
    min-height: 60px; /* 最小高度确保对齐 */
}

.result-line:last-child {
    border-bottom: none; /* 最后一行无分隔线 */
}

.result-text {
    flex-grow: 1; /* 占据主要空间 */
    overflow: hidden; /* 防止文本溢出 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
    white-space: nowrap; /* 不换行 */
    margin-right: 1rem; /* 与按钮间距 */
    /* font-size 由 JS 控制 */
    /* font-family 由 JS 控制 */
}

.result-actions button {
    /* 复制按钮样式更新 */
    background-color: var(--secondary-button-bg); /* 中浅绿背景 */
    color: var(--secondary-button-text); /* 最深绿文字 */
    border: 1px solid var(--secondary-button-bg); /* 边框也用中浅绿 */
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-family: var(--body-font);
    margin-left: 0.5rem;
}

.result-actions button:hover {
    /* 悬停时使用中绿色背景 */
    background-color: var(--secondary-button-hover-bg);
    color: var(--secondary-button-hover-text); /* 最深绿文字 */
    border: 1px solid var(--secondary-button-hover-bg);
}

/* --- Footer --- */
footer {
    background-color: var(--secondary-color); /* 页脚背景白色 */
    color: var(--text-color-light); /* 页脚文字浅色 */
    padding: 1.5rem 0;
    margin-top: 3rem;
    text-align: center;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

footer p {
    margin-bottom: 0.3rem;
}

footer a {
    color: var(--text-color-light);
    text-decoration: underline;
}

footer a:hover {
    color: var(--primary-color);
    opacity: 1;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .main-nav {
        display: none; /* 在中屏幕隐藏主导航 (简化处理) */
    }
    header .header-container {
         /* 可以添加移动端菜单按钮的逻辑，但暂时隐藏 */
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }
    .generator-controls {
        flex-direction: column; /* 控制区域垂直排列 */
        align-items: stretch; /* 拉伸对齐 */
        gap: 1rem; /* 增加间距 */
    }
    #text-input {
        margin-right: 0; /* 移除右边距 */
    }
    .size-control {
        justify-content: center; /* 居中滑块 */
    }
    .result-line {
        flex-direction: column; /* 结果行垂直排列 */
        align-items: flex-start; /* 左对齐 */
        gap: 0.8rem; /* 增加间距 */
    }
    .result-text {
         white-space: normal; /* 允许换行 */
         margin-right: 0;
         margin-bottom: 0.5rem; /* 与下方按钮间距 */
         width: 100%; /* 占据全部宽度 */
         text-align: center; /* 居中显示 */
    }
    .result-actions {
        width: 100%;
        text-align: center; /* 居中按钮 */
    }
     .result-actions button {
         margin-left: 0.2rem;
         margin-right: 0.2rem;
     }

}

@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
    h1 {
        font-size: 1.8rem;
    }
    .logo {
        font-size: 1.5rem;
    }
    .generator-card {
        padding: 1rem;
    }
    #text-input {
         font-size: 0.9rem;
    }
     .result-actions button {
         padding: 0.3rem 0.6rem;
         font-size: 0.8rem;
     }
}

/* 移除旧的样式规则 */
/* 
#hero, #features, #testimonials, #content, #examples, 
.font-examples, .cta-button, .testimonial-grid, .testimonial, 
.example-grid {
    display: none !important; 
}
*/
/* 更好的方法是直接删除旧规则，但作为快速修复，可以先隐藏 */