/* --- Global Reset & Box-sizing (VERY IMPORTANT) --- */

/* css/base.css 或其他主题文件 */
:root {
    --primary-color: #4CAF50; /* 主色调 */
    --secondary-color: #607D8B; /* 次级色调 */
    --accent-color: #FFC107;   /* 强调色 */
    --accent-dark-color: #FFA000; /* 强调色深色版 */
    --text-color: #333;        /* 主要文字颜色 */
    --text-color-light: #777;  /* 次要文字颜色 */
    --background-color: #f4f7f6; /* 背景色 */
    --card-bg-color: #ffffff;  /* 卡片背景色 */
    --input-bg-color: #f9f9f9; /* 输入框背景色 */
    --border-color: #ddd;      /* 边框颜色 */
    --border-radius: 8px;      /* 圆角半径 */
    --border-radius-sm: 4px;   /* 小圆角半径 */
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); /* 小阴影 */
    --danger-color: #f44336;   /* 错误/危险颜色 */
    --danger-dark-color: #d32f2f; /* 错误/危险深色版 */
    --success-color: #4CAF50;  /* 成功颜色 */
}

/* 將 box-sizing: border-box 應用於所有元素，包括偽元素 */
html {
    height: 100%; /* 確保 html 元素佔據整個視窗高度 */
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Global & Container Styles --- */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f8ff; /* Light blue background */
    display: flex;
    justify-content: center;
    /* align-items: flex-start; /* Content starts from the top - REMOVE THIS */
    min-height: 100vh; /* 確保 body 最小高度為視窗高度 */
    margin: 0;
    padding: 20px;
    /* NEW: For sidebar transition */
    overflow-x: hidden; /* Prevent horizontal scrollbar during sidebar transition */
    position: relative; /* Needed for z-index context of mainContent */
}

/* NEW: Adjust body.sidebar-open for main content alignment */
body.sidebar-open {
    /* When sidebar is open, content shifts. No need to adjust justify-content here if using margin-left on container */
    /* This class is primarily for shifting the main content div */
}

.words-logo {
    max-width: 100%; /* Start with a reasonable size for mobile, e.g., 80% of its container */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the logo if needed */
}

.container {
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 30px 40px;
    width: 100%;
    max-width: 800px; /* Max width for readability */
    text-align: center;
    border: 5px solid #ffcc00; /* Yellow border for accent */
    /* NEW: Add transition for margin-left */
    transition: margin-left 0.3s ease-in-out;
    margin-left: 0; /* Default position */
    z-index: 1; /* Ensure container is above background but below sidebar */
    position: relative; /* For z-index context */
}

h1 {
    color: #ff6347; /* Tomato red */
    font-size: 2.8em;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.clickable-word {
    cursor: pointer;
    color: #007bff; /* A nice blue color */
    transition: color 0.2s;
}

.clickable-word:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Optional: if you want words inside the history section to have a slightly different clickable color */
.history-item-details .clickable-word {
    color: #28a745; /* Green for history words */
}

.history-item-details .clickable-word:hover {
    color: #1e7e34;
}