/* style.css (V38.1 - 仅展示新增和修改的部分) */

/* --- 全局样式与变量 --- */
:root {
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --c-bg: #ffffff;
    --c-bg-alt: #f6f8fa;
    --c-border: #e1e4e8;
    --c-text: #24292e;
    --c-text-subtle: #586069;
    --c-accent: #0366d6;
    --c-accent-hover: #005cc5;
    --c-code-bg: #f6f8fa;
    --c-code-toolbar: #e1e4e8;
    --editor-font-size: 16px;
    --c-shadow: rgba(0, 0, 0, 0.1);
    --c-bg-rgb: 255, 255, 255; /* V34: 新增RGB背景变量，用于RGBA透明度 */
    --c-bg-translucent: rgba(246, 248, 250, 0.8); /* V36: 半透明背景变量 */
    
    /* V38.1 新增: 为日间模式下的主题图标定义一个温暖的、半透明的径向渐变背景 */
    --c-theme-icon-light-bg: radial-gradient(circle, rgba(255, 193, 7, 0.5) 0%, rgba(255, 152, 0, 0) 70%); /* 从阳光黄到落日橙的透明光晕 */
}
body.dark-mode {
    --c-bg: #0d1117;
    --c-bg-alt: #161b22;
    --c-border: #30363d;
    --c-text: #c9d1d9;
    --c-text-subtle: #8b949e;
    --c-accent: #58a6ff;
    --c-accent-hover: #79b8ff;
    --c-code-bg: #161b22;
    --c-code-toolbar: #30363d;
    --c-shadow: rgba(255, 255, 255, 0.1);
    --c-bg-rgb: 13, 17, 23; /* V34: 暗模式下的RGB背景变量 */
    --c-bg-translucent: rgba(22, 27, 34, 0.8); /* V36: 暗模式半透明背景变量 */
}
body {
    font-family: var(--font-main);
    background-color: var(--c-bg-alt);
    color: var(--c-text);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

/* --- V36: 像素字体引入 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body.pixel-mode {
    font-family: 'Press Start 2P', cursive !important;
    /* 像素模式下可能需要调整字体大小以获得更好的显示效果 */
    --editor-font-size: 12px; /* 像素字体通常较小，需要调大 */
}
body.pixel-mode .pane,
body.pixel-mode textarea,
body.pixel-mode .preview-pane,
body.pixel-mode .btn,
body.pixel-mode .toast,
body.pixel-mode .ad-content {
    font-family: 'Press Start 2P', cursive !important;
    /* 像素字体可能需要额外的行高调整 */
    line-height: 1.5;
}
body.pixel-mode .logo {
    font-size: 18px; /* 像素logo字体可能也需要调整 */
}
body.pixel-mode #font-size-display {
    font-size: 11px; /* 像素模式下字体大小显示 */
}
body.pixel-mode .ad-content h3 {
    font-size: 20px;
}
body.pixel-mode .ad-content p {
    font-size: 14px;
}
body.pixel-mode .ad-content small {
    font-size: 10px;
}


/* --- 顶部与底部栏 --- */
.header {
    padding: 6px 16px;
    background: var(--c-bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 让元素分布在两端 */
    border-bottom: 1px solid var(--c-border);
    transition: background-color 0.3s, border-color 0.3s;
    position: relative;
    z-index: 10;
}
.logo-area, .controls { /* V37: 确保logo和controls是flex容器 */
    display: flex;
    align-items: center;
}
.logo { font-size: 20px; font-weight: 600; }
.logo sup { font-size: 10px; opacity: 0.7; }
.action-bar {
    padding: 8px 16px;
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}
.action-group { display: flex; align-items: center; gap: 10px; }

/* --- V32: 精致的控件区域 --- */
.controls { gap: 10px; }
.control-group, .theme-control-group {
    display: flex; align-items: center;
    background-color: transparent;
    padding: 4px; border-radius: 8px; border: 1px solid transparent;
    /* V38: 优化性能 - 减少动画 */
    transition: none; /* 移除过渡效果 */
}
.control-group { gap: 8px; padding: 4px 10px; }
.control-group:hover, .theme-control-group:hover {
    background-color: var(--c-bg-alt);
    border-color: var(--c-border);
}
.control-group-icon { color: var(--c-text-subtle); margin-right: 4px; }
.control-group-icon svg { display: block; }
#font-size-display { font-size: 13px; color: var(--c-text-subtle); min-width: 36px; text-align: center; }

/* --- 字体滑块样式 --- */
input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100px; height: 6px; background: var(--c-border);
    border-radius: 3px; outline: none; opacity: 0.7; transition: opacity .2s; cursor: pointer;
}
input[type="range"]:hover { opacity: 1; }
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; background: var(--c-accent); border-radius: 50%; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; background: var(--c-accent); border-radius: 50%; cursor: pointer;
}

/* --- 主体双栏布局 --- */
.main-container { display: flex; flex: 1; overflow: hidden; user-select: none; }
.pane {
    padding: 25px; overflow-y: auto; box-sizing: border-box; background: var(--c-bg);
    transition: background-color 0.3s; height: 100%; width: 50%;
    position: relative; /* V34: 为广告牌定位提供上下文 */
}
.editor-pane { user-select: text; }
textarea#markdown-input, .preview-pane { font-size: var(--editor-font-size); }
textarea#markdown-input {
    width: 100%; height: 100%; border: none; resize: none; outline: none;
    line-height: 1.7; font-family: var(--font-mono); background: transparent; color: var(--c-text);
}
.placeholder { color: var(--c-text-subtle); text-align: center; margin-top: 40px; font-size: 16px; user-select: none; }
.error-msg { color: #dc3545; font-weight: bold; }

/* --- 拖拽手柄样式 --- */
#resizer {
    width: 5px; background: var(--c-border); cursor: col-resize;
    flex-shrink: 0; transition: background-color 0.2s;
}
#resizer:hover, #resizer.active { background: var(--c-accent); }

/* --- 预览区与代码块样式 --- */
.preview-pane { line-height: 1.7; user-select: text; }
.preview-pane h1, .preview-pane h2, .preview-pane h3 { border-bottom: 1px solid var(--c-border); padding-bottom: .3em; margin-top: 24px; margin-bottom: 16px; }
.preview-pane table { border-collapse: collapse; margin: 1em 0; display: block; overflow: auto; width: 100%; }
.preview-pane th, .preview-pane td { border: 1px solid var(--c-border); padding: 8px 15px; }
.preview-pane tr:nth-child(2n) { background-color: var(--c-bg-alt); }
.preview-pane img { max-width: 100%; height: auto; border-radius: 6px; }
.preview-pane div[class*="language-"] { position: relative; background-color: var(--c-code-bg); border: 1px solid var(--c-border); border-radius: 6px; margin: 1.5em 0; }
.preview-pane pre { margin: 0; padding: 16px; padding-top: 45px; overflow-x: auto; }
.code-toolbar { position: absolute; top: 0; left: 0; right: 0; height: 35px; background: var(--c-code-toolbar); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 12px; color: var(--c-text-subtle); border-top-left-radius: 5px; border-top-right-radius: 5px; }
.copy-btn { background: none; border: 1px solid transparent; color: var(--c-text-subtle); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 12px; transition: all 0.2s; }
.copy-btn:hover { background-color: var(--c-bg); border-color: var(--c-border); }
.copy-btn.copied { color: #28a745; border-color: #28a745; }
.preview-pane code { font-family: var(--font-mono); }

/* --- UI 组件 --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 6px 14px; font-size: 14px;
    border: 1px solid var(--c-border); border-radius: 6px;
    background-color: var(--c-bg-alt); cursor: pointer;
    font-weight: 500; 
    /* V38: 优化性能 - 减少动画 */
    transition: transform 0.1s; /* 只保留必要的点击效果 */
    color: var(--c-text);
    position: relative; /* V38: 为脉冲光环定位 */
    overflow: hidden; /* V38: 隐藏溢出的光环 */
}
.btn:hover { border-color: var(--c-text-subtle); background-color: var(--c-bg); }
.btn-primary { background-color: var(--c-accent); color: white; border-color: var(--c-accent); }
.btn-primary:hover { background-color: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn-secondary {
    background-color: var(--c-bg-alt);
    color: var(--c-text);
}
.btn-secondary:hover {
    border-color: var(--c-text-subtle);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* V38: 全新、优雅的按钮微交互 */
/* 清空动画 - 溶解 */
.btn.clearing {
    opacity: 0.5;
    transform: scale(0.98);
}

/* 下载动画 - 脉冲光环 */
#download-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
/* V38.1: 减少下载按钮动画时间 */
#download-btn.loading::after {
    animation: pulse 1s ease-out infinite; /* 从1.5秒减少到1秒 */
}
#download-btn.loading {
    color: rgba(255,255,255,0.8);
}

@keyframes pulse {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 200%; /* 光环扩散到按钮宽度的两倍 */
        height: 200%;
        opacity: 0;
    }
}

/* V37: 恢复并优化按钮微交互 (保留V37的图标动画，与V38的光环动画结合) */
#download-btn .btn-icon-wrapper {
    position: relative;
    width: 16px; height: 16px;
}
#download-btn .icon-default, #download-btn .icon-loading {
    position: absolute; top: 0; left: 0;
    transition: opacity 0.2s ease-in-out;
}
#download-btn .icon-loading {
    opacity: 0;
}
#download-btn.loading .icon-default {
    opacity: 0;
}
#download-btn.loading .icon-loading {
    opacity: 1;
    animation: spin 1.2s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* --- V33: Toast 容器和通用样式 --- */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.toast {
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 4px 12px var(--c-shadow);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
    display: flex;
    align-items: center;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
.toast.success { background-color: #28a745; }
.toast.error { background-color: #dc3545; }
/* V38: 更新Logo彩蛋Toast样式 */
.toast.info {
    background-color: #6f42c1; /* 紫色代替蓝色 */
    border: 2px solid #5a32a3;
}

/* V37: 登录彩蛋Toast新背景 */
.toast.dev-joke {
    background: #333;
    border: 1px solid #555;
    color: #f1f1f1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.toast.dev-joke::before {
    content: '🤫'; /* 换个更神秘的表情 */
    font-size: 24px;
    margin-right: 12px;
    animation: jiggle 0.6s ease-in-out infinite;
}
@keyframes jiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-1deg); }
}

.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--c-accent); }
input:checked + .slider:before { transform: translateX(14px); }

/* --- V38.1 核心修改点: 美化主题切换按钮 --- */
.theme-toggle {
    cursor: pointer;
    border: none;
    padding: 8px; /* 稍微增加内边距，让光晕更明显 */
    color: var(--c-text-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 将按钮变为圆形，以承载光晕效果 */

    /* 默认应用日间模式的背景（光晕效果）*/
    background: var(--c-theme-icon-light-bg);

    /* 添加平滑的过渡效果 */
    transition: background 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-toggle:hover {
    transform: rotate(30deg) scale(1.1); /* 增强旋转效果 */
    color: var(--c-text);
}

/* 当处于暗黑模式时，移除按钮的背景，恢复透明 */
body.dark-mode .theme-toggle {
    background: none;
}


/* V38: 更新广告牌样式 - 更醒目 */
.ad-board {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--c-bg-rgb), 0.92); /* 更高的不透明度 */
    backdrop-filter: blur(8px); /* 更强的模糊效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 100;
    cursor: pointer; /* 可点击关闭 */
}
.ad-board.visible {
    opacity: 1;
    visibility: visible;
}
.ad-content {
    padding: 30px;
    border-radius: 15px;
    background: var(--c-bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    transition: transform 0.5s ease-in-out;
    max-width: 80%;
    width: 400px; /* 增加最大宽度 */
    border: 1px solid var(--c-border);
}
.ad-board.visible .ad-content {
    transform: scale(1);
}
.ad-content h3 {
    font-size: 28px;
    color: #6f42c1; /* 紫色代替蓝色 */
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}
.ad-content h3::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 25%;
    width: 50%;
    height: 3px;
    background: #6f42c1; /* 紫色代替蓝色 */
}
.ad-content p {
    font-size: 22px;
    color: var(--c-text);
    margin-bottom: 20px;
    line-height: 1.6;
    font-weight: 500;
}
.ad-content small {
    font-size: 14px;
    opacity: 0.7;
    color: var(--c-text-subtle);
    display: block;
    margin-top: 20px;
}

/* V35: Logo 彩蛋动画 - 改为跳动效果 */
.logo { 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}
.logo.thinking {
    animation: bounce 0.5s ease infinite alternate;
}
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

/* V35: 主题切换彩蛋 */
.btn.theme-glow {
    animation: glow-effect 0.8s ease-in-out;
}
@keyframes glow-effect {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-accent); }
  50% { box-shadow: 0 0 10px 5px var(--c-accent); }
}

/* V38: 优化诗歌彩蛋样式 */
.poetry-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    max-width: 300px;
    pointer-events: none;
    z-index: 10;
}
.poetry-line {
    background: rgba(var(--c-bg-rgb), 0.95);
    color: var(--c-text);
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 14px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-left: 3px solid #6f42c1; /* 紫色代替蓝色 */
    opacity: 0;
    transform: translateY(10px);
    animation: fade-in-out 5s ease-in-out forwards;
}
@keyframes fade-in-out {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* V37: 动态欢迎语样式 */
.welcome-message {
    font-size: 14px;
    color: var(--c-text-subtle);
    font-weight: 500;
    position: absolute; /* 绝对定位，使其不影响布局 */
    left: 50%;
    transform: translateX(-50%);
    animation: fade-in 0.5s ease-in-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 新的按钮点击效果 */
.btn:active {
    transform: scale(0.96);
    transition: transform 0.1s;
}

/* 登录按钮特殊效果 */
#login-btn:hover {
    background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
    border-color: var(--c-accent);
    box-shadow: 0 0 10px rgba(var(--c-accent-rgb), 0.3);
}

/* 字体滑块发光效果 */
#font-size-slider::-webkit-slider-thumb {
    box-shadow: 0 0 5px var(--c-accent);
}
#font-size-slider::-moz-range-thumb {
    box-shadow: 0 0 5px var(--c-accent);
}

/* V38: 新的登录按钮彩蛋样式 */
.login-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: var(--c-bg);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 90%;
    width: 400px;
    text-align: center;
}
.login-modal.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s;
}
.login-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.login-modal h2 {
    color: #6f42c1;
    margin-bottom: 20px;
    font-size: 28px;
}
.login-modal p {
    color: var(--c-text);
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.6;
}
.login-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}
/* V38.1: 优化登录选项效果 */
.login-option {
    padding: 15px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 16px;
}
.login-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: #6f42c1;
}
.login-option.selected {
    background: rgba(111, 66, 193, 0.1);
    border-color: #6f42c1;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.2);
}
.login-modal button {
    background: #6f42c1;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(111, 66, 193, 0.4);
}
.login-modal button:hover {
    transform: scale(1.05);
    box-shadow: 0 7px 20px rgba(111, 66, 193, 0.6);
}
/* V38.1: 优化关闭按钮 */
.login-modal .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--c-text-subtle);
    transition: transform 0.3s;
}
.login-modal .close-btn:hover {
    transform: rotate(90deg);
    color: #6f42c1;
}

/* V38.1: 添加魔法特效 */
.magic-effect {
    animation: magicPulse 2s ease;
}

@keyframes magicPulse {
    0% { box-shadow: inset 0 0 0 0 rgba(111, 66, 193, 0.4); }
    50% { box-shadow: inset 0 0 100px 50px rgba(111, 66, 193, 0.1); }
    100% { box-shadow: inset 0 0 0 0 rgba(111, 66, 193, 0); }
}