/* --- Light Mode (Default) --- */
:root {
    --header-bg: rgba(255, 255, 255, 0.7);
    --header-border: rgba(0, 0, 0, 0.05);
    --header-text: #343a40;
    --footer-bg: rgba(255, 255, 255, 0.6);
    --footer-border: rgba(0, 0, 0, 0.05);
    --footer-text: #6c757d;
    --body-bg-color: #f4f7f6;
    --body-bg-image: linear-gradient(135deg, #eef1f5 0%, #e6e9ef 100%);
}
html, body {
    margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden;
    display: flex; flex-direction: column; font-family: sans-serif;
    background-color: var(--body-bg-color); background-image: var(--body-bg-image);
    position: relative; transition: background-color 0.4s ease;
}
body::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.03; pointer-events: none;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW3W1tZ5eXlsbW3g4ODZ2dnPz8/Ly8vIx8fGxsbr6+vh4eHY2Njh4eHb29vT09PU1NTNzc3Ozs7U1NTQ0NDR0dHR0dHW1tZpaWmZmdUbAAAAIElEQVRIx+3QSRKAQAxA0UpFVL2d2N9/S9w5wpG2VX7BlA3nCENsC44d+wAAAADg3z1UfT7wJAAAAACg3x4u2w4/zVfVBwAAAAC/GzxpAAAAAADgH3kAAAAA4K/2AAAAAADAv3kAAAAA4K/2AAAAAADAv3kAAAAA4K/2AAAAAADAv3kAAAAA4K/2AAAAAADA/30AAAAAAPwB/c4D8xM39qgAAAAASUVORK5CYII=');
}
.tool-header {
    display: flex; align-items: center; justify-content: center; padding: 0 20px;
    height: 60px; flex-shrink: 0; position: relative; 
    background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--header-border); transition: all 0.4s ease;
}
.back-button, #toolTitle { color: var(--header-text); text-shadow: none; }
.back-button { position: absolute; left: 20px; text-decoration: none; font-size: 16px; font-weight: 500; transition: transform 0.2s; }
#toolTitle { margin: 0; font-size: 20px; font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.tool-main { flex-grow: 1; overflow: hidden; }
#toolFrame { width: 100%; height: 100%; border: none; background-color: #fff; }
footer {
    text-align: center; padding: 15px 20px; font-size: 14px; flex-shrink: 0;
    width: 100%; box-sizing: border-box; background: var(--footer-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--footer-border); color: var(--footer-text); transition: all 0.4s ease;
}
footer p { margin: 0; }
#theme-switcher { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--header-border); background: var(--header-bg); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-size: 20px; cursor: pointer; z-index: 100; }

/* --- Dark Mode Overrides --- */
body.dark-mode {
    --header-bg: rgba(25, 29, 39, 0.3);
    --header-border: rgba(255, 255, 255, 0.1);
    --header-text: #ffffff;
    --footer-bg: rgba(11, 15, 25, 0.2);
    --footer-border: rgba(255, 255, 255, 0.05);
    --footer-text: #adb5bd;
    --body-bg-color: #0b0f19;
    --body-bg-image: radial-gradient(circle at 10% 20%, rgba(10, 39, 94, 0.4) 0%, transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(61, 28, 94, 0.4) 0%, transparent 50%);
}
body.dark-mode::before { display: none; }
body.dark-mode #toolTitle, body.dark-mode .back-button { text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
/* --- 统一样式：页脚链接样式 --- */
footer a {
    /* 继承父元素(p标签)的颜色，这样无论明暗主题都能自动匹配 */
    color: inherit; 
    /* 去掉默认的下划线 */
    text-decoration: none;
    transition: color 0.2s;
}

/* 鼠标悬浮时，显示下划线，以提示用户这是一个链接 */
footer a:hover {
    text-decoration: underline;
}

/* 分隔符样式，让它不那么显眼 */
footer .separator {
    margin: 0 10px;
    opacity: 0.5;
}