html,body{width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;}
#vanta-bg{position:fixed !important;inset:0;width:100%;height:100%;z-index:-1;}
*{box-sizing:border-box}

html{height:100%;margin:0;padding:0;}
body{
    min-height:100vh;height:auto;margin:0;padding:0;
    font-family:"Segoe UI",Helvetica,Arial,sans-serif;
    background:transparent;color:var(--text);
    overflow-x:hidden;position:relative;
}
#vanta-bg{position:fixed !important;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;}

/* 页眉 */
header{
    position:relative;z-index:1;backdrop-filter:blur(5px);
    background:var(--card-bg) !important;
    border-bottom:1px solid var(--border);
    padding:40px 20px;text-align:center;
}
header h1{margin:0 0 8px;font-size:34px;font-weight:700;color:var(--accent);
    text-shadow:0 0 8px rgba(96,165,250,0.35);}
header p{margin:0;color:var(--text-muted);opacity:.85}

.container{position:relative;z-index:1;max-width:980px;margin:28px auto;padding:0 16px;}
.post-card{
    background:var(--card-bg);border:1px solid var(--border);
    backdrop-filter:blur(6px);border-radius:14px;padding:20px;margin:18px 0;
}
.post-card h2.card-title{
    margin:0 0 10px;color:var(--accent);cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;font-size:20px;
}
.toggle-icon{color:var(--accent);opacity:0.85;transition:transform .3s;}
.post-card:hover .toggle-icon{transform:rotate(180deg);}
.post-card p{margin:0;color:var(--text-muted)}

footer{position:relative;z-index:1;text-align:center;padding:22px;font-size:14px;color:var(--text-muted);}
footer span{color:var(--accent)}

/* 布局 */
.compress-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.controls{padding:12px;display:flex;flex-direction:column;gap:10px;}

/* 拖拽区 */
.dropzone{
    border:2px dashed var(--border);border-radius:10px;padding:16px;
    text-align:center;cursor:pointer;
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
}

/* 缩略图 & 按钮 */
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{width:120px;background:var(--card-bg);border-radius:8px;padding:8px;text-align:center;font-size:12px;color:var(--text-muted);}
.thumb img{max-width:100%;max-height:80px;border-radius:6px;display:block;margin:0 auto 6px;}

.btn{
    display:inline-block;padding:8px 12px;border-radius:8px;
    border:1px solid var(--border);background:var(--btn-bg);
    color:var(--text);cursor:pointer;margin:6px 6px 0 0;user-select:none;transition:all .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,0.35);border-color:var(--accent);color:var(--accent);}
.btn.active{background:rgba(96,165,250,0.25);border-color:var(--accent);color:var(--accent);}

/* 表单元素 */
label.small,.small{font-size:13px;color:var(--text-muted);display:block;margin-bottom:6px}
/* --- 统一输入框背景色为略微不透明的浅色 --- */
input[type="number"],select,input[type="range"],#guestbook-panel input,#guestbook-panel textarea{
    width:100%;padding:6px;border-radius:8px;
    border:1px solid var(--border);
    /* ✅ 修复点：使用变量 */
    background: var(--input-bg);
    color:var(--text);
}
#guestbook-panel textarea {
    resize: vertical;
    font-size: 14px;
}

.file-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-content{overflow:hidden;max-height:9999px;transition:max-height .35s ease,padding .35s ease;padding:12px 0 0 0}
.card-content.collapsed{max-height:0;padding:0}

/* 下拉框箭头 */
select{
    padding:6px 30px 6px 8px;
    /* ✅ 修复点：使用变量 */
    background: var(--input-bg); /* Select box background */
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='var(--select-arrow)' d='M0 0l6 8 6-8z'/%3e%3c/svg%3e");
    background-repeat:no-repeat;background-position:right 10px center;
    color:var(--text);border-radius:8px;cursor:pointer;appearance:none;
}
select:focus{border-color:var(--accent);box-shadow:0 0 8px rgba(96,165,250,0.3);outline:none;}

/* ==================== 优化点：Select 下拉菜单主题适配 (新方案) ==================== */
select {
    /* 确保使用变量，且!important确保覆盖前面的 select 块 */
    background: var(--input-bg) !important; 
    color: var(--select-color) !important;
}

select option {
    background: var(--select-bg) !important; 
    color: var(--select-color) !important;
}
/* ====================================================================== */

/* 进度条 */
input[type="range"]{
    -webkit-appearance:none;appearance:none;height:6px;border-radius:3px;
    background:var(--range-track);
    cursor:pointer; 
    vertical-align: middle; 
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--range-thumb);border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;
    margin-top: -5px; 
}
input[type="range"]::-webkit-slider-runnable-track { 
    height: 6px;
    border-radius: 3px;
    background: var(--range-track);
}
input[type="range"]::-moz-range-track{
    height:6px;border-radius:3px;background:var(--range-track);border:none;
}
input[type="range"]::-moz-range-thumb{
    background:var(--range-thumb);border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;
}

/* 复选框 */
input[type="checkbox"]{
    -webkit-appearance:none;appearance:none;
    width:18px;height:18px;border:2px solid var(--checkbox-border);
    border-radius:6px;position:relative;cursor:pointer;vertical-align:middle;margin-right:8px;
}
input[type="checkbox"]:checked{
    background:var(--checkbox-border);
}
input[type="checkbox"]:checked::after{
    content:"✓";color:#fff;font-weight:bold;
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}

/* ==================== 固定按钮样式 (统一) ==================== */
#bg-switcher-btn, #net-monitor-btn, #music-player-btn, #time-btn, #guestbook-btn { /* 添加 #guestbook-btn */
    position:fixed;width:54px;height:54px;border-radius:50%;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:99999;transition:all .25s;font-size:22px;
    color: var(--accent);
}
#bg-switcher-btn:hover, #net-monitor-btn:hover, #music-player-btn:hover, #time-btn:hover, #guestbook-btn:hover { /* 添加 #guestbook-btn:hover */
    transform:scale(1.08);box-shadow:0 0 14px rgba(96,165,250,0.4);
    color: #fff;
}

/* 各个按钮的具体定位 */
#bg-switcher-btn{
    top:28px;
    left:24px;
}
#music-player-btn{
    bottom:28px;
    left:24px;
}
#net-monitor-btn{
    bottom:28px;
    right:24px;
}
#time-btn{ /* 时间按钮的定位 */
    top:28px;
    right:24px;
}
/* ⭐ NEW: 留言板按钮定位 ⭐ */
#guestbook-btn { 
    top: 28px;
    right: 90px; /* 54px (按钮宽度) + 24px (右边距) + 12px (间距) */
}

/* 面板通用样式 */
#bg-switcher-panel,#net-monitor-panel,#music-player-panel,#time-panel, #guestbook-panel { /* 添加 #guestbook-panel */
    position:fixed;
    width:280px; /* 大部分面板的固定宽度 */
    padding:16px;border-radius:14px;
    background:rgba(255,255,255,0.08);border:1px solid var(--border);
    backdrop-filter:blur(12px);color:var(--text);display:none;z-index:99999;
}
/* 统一面板标题样式 (居中) */
#bg-switcher-panel h3,#net-monitor-panel h3,#music-player-panel h3,#time-panel h3, #guestbook-panel h3{ /* 添加 #guestbook-panel h3 */
    margin:0 0 12px;font-size:16px;color:var(--accent);
    text-align: center; 
}

/* 时间面板修正宽度和居中 */
#time-panel {
    top: 92px; 
    right: 24px;
    width: 280px; 
    text-align: center; 
}
.time-detail-item {
    margin: 6px 0;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap; 
}


/* 背景和网络面板内容居中设置 */
#bg-switcher-panel, #net-monitor-panel {
    text-align: center;
}

/* 背景面板 → 左上角按钮下方 */
#bg-switcher-panel{
    top:92px;
    left:24px;
}

/* 音乐面板 → 左下角按钮上方 */
#music-player-panel{
    bottom:92px;
    left:24px;
    display: none; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}

/* 网络面板 → 右下角按钮上方 */
#net-monitor-panel{
    bottom:92px;
    right:24px;
}

/* ⭐ NEW: 留言板面板定位和宽度 ⭐ */
#guestbook-panel {
    top: 92px; 
    right: 24px;
    width: 320px; /* 略宽一些，以容纳内容 */
}

/* 确保网络监控列表项文本居中 */
.net-item{margin:6px 0;font-size:14px;color:var(--text); text-align: center;} 

.bg-options{display:flex;flex-direction:column;gap:8px}
.bg-opt{
    padding:9px 12px;border-radius:8px;background:transparent;
    border:1px solid var(--border);color:var(--text);font-size:13.5px;
    cursor:pointer;transition:all .2s;
    text-align:center; /* 按钮文本居中 */
}
.bg-opt:hover,.bg-opt.active{
    background:rgba(96,165,250,0.25);border-color:var(--accent);color:#fff;
}



/* 响应式 */
@media(max-width:860px){
    .compress-grid{grid-template-columns:1fr}
    .thumb{width:45%}
}

/* ==================== 音乐播放器专用样式优化 (V3) ==================== */

/* 1. 三个播放控制按钮（圆形） */
#prevBtn, #playBtn, #nextBtn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 36px !important;
    background: rgba(96,165,250,0.25) !important;
    border: 1px solid var(--accent) !important;
    margin: 0 6px !important;
    cursor: pointer; 
    color: var(--text); 
    transition: all 0.2s; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
}
#prevBtn:hover, #playBtn:hover, #nextBtn:hover { 
    background: rgba(96,165,250,0.4) !important;
    transform: scale(1.1);
    color: #fff;
}
.controls-row { 
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px 0;
    width: 100%;
}
#songTitle { 
    font-weight:600;
    cursor:pointer;
    margin-bottom:12px;
}

/* 2. 进度条和音量条等长且自适应 */
/* 容器 */
.player-row { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 6px 0;
    gap: 0;
}
/* 侧边占位 (确保对齐) */
.player-side-item { 
    width: 40px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
}
.player-side-item.icon { 
    font-size: 16px;
    opacity: 0.8;
}

/* 进度条 */
#progress, #volume {
    flex: 1; 
    width: auto !important;
    margin: 0 6px;
    max-width: 100%;
}
/* 歌单 */
#playlistContainer { 
    width: 100%;
    text-align: left;
}
#music-player-panel .panel-title { 
    position: relative;
    width: 100%;
    text-align: center;
}


/* 终极补丁：完美双模式（最高优先级） */
.dropzone-title,
#dropzone > div:first-child,    /* 修正图片压缩拖拽区 */
#dropzoneImg > div:first-child,  /* 修正图片转 PDF 拖拽区 */
#dropzonePdf > div:first-child,  /* 修正 PDF 转图片拖拽区 */
.params-title,
.controls h3 {
    font-weight: 600 !important;
    color: var(--accent-light) !important;
    margin: 0 0 8px 0 !important;
    font-size: 15px !important;
}

header h1,
.post-card h2.card-title,
.toggle-icon,
#time-btn,
#guestbook-btn, /* 确保按钮颜色正确 */
.btn:hover,
.bg-opt:hover,
.bg-opt.active {
    color: var(--accent) !important;
}

/* ==================== 留言板面板内样式 (用于 #guestbook-panel) ==================== */
#panel-messages-list {
    max-height: 250px;
    overflow-y: auto;
}
#panel-messages-list::-webkit-scrollbar {width:8px;background:transparent}
#panel-messages-list::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.15);border-radius:4px;}
#panel-messages-list::-webkit-scrollbar-thumb:hover {background:rgba(255,255,255,0.3);}

/* 留言列表项样式 */
.guestbook-item {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
    padding: 8px 0;
}
.guestbook-item:last-child {
    border-bottom: none;
}
/* 修正此处，确保关闭了可能的多余花括号 */


/* === ⭐ V3 样式修复：统一输入框与选择框的样式 (确保高度/内边距完全一致) ⭐ === */

/* 统一输入框、密码框、数字输入框和选择框的视觉样式 */
.post-card input[type="text"], 
.post-card input[type="number"], 
.post-card input[type="password"], 
.post-card select {
    width: 100% !important;
    /* 核心修复：确保 padding 统一，覆盖掉所有其他冲突的样式 */
    padding: 10px 12px !important; 
    margin-top: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    /* 核心修复：使用 --input-bg 变量，并给一个浅色回退值，确保日间模式为白框 */
    background-color: var(--input-bg, rgba(255, 255, 255, 0.9)) !important; 
    color: var(--text);
    transition: border-color 0.2s;
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

/* 焦点状态保持一致 */
.post-card input:focus, 
.post-card select:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--accent);
}

/* 针对select元素，手动添加一个向下的小箭头 */
.post-card select {
    /* 覆盖掉在文件前面定义的 select 样式中的 padding 和 background-image */
    padding-right: 30px !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2394a3b8' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 1em !important;
}

/* =========================================================
      ⭐ 全站日志框统一样式（最终版，强制覆盖） ⭐
   ========================================================= */
#log, #imgLog, #pdfLog, #encLog, #decLog, .log-box, #dogEncLog, #dogDecLog {
    margin-top: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;

    background: rgba(255,255,255,0.05) !important; /* 透明白 5% */
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;

    color: var(--text-muted) !important;

    max-height: 160px !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
}

/* 滚动条统一 */
#log::-webkit-scrollbar,
#imgLog::-webkit-scrollbar,
#pdfLog::-webkit-scrollbar,
#encLog::-webkit-scrollbar,
#decLog::-webkit-scrollbar {
    width: 8px !important;
}

#log::-webkit-scrollbar-thumb,
#imgLog::-webkit-scrollbar-thumb,
#pdfLog::-webkit-scrollbar-thumb,
#encLog::-webkit-scrollbar-thumb,
#decLog::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 4px !important;
}

#log::-webkit-scrollbar-thumb:hover,
#imgLog::-webkit-scrollbar-thumb:hover,
#pdfLog::-webkit-scrollbar-thumb:hover,
#encLog::-webkit-scrollbar-thumb:hover,
#decLog::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3) !important;
}

#dogOutputLog, #dogDecodeLog {
    /* --- 1. 解决换行符显示问题 (核心) --- */
    white-space: pre-wrap;   /* 确保保留并显示所有换行符和空格 */
    word-break: break-all;   /* 防止超长密文撑破容器 */
    
    /* --- 2. 解决内容溢出（无拖动条）问题 --- */
    height: 200px;           /* 设置一个固定的最大高度（请根据需要调整此值） */
    overflow: auto;          /* 当内容超出高度时，显示滚动条 */
    
    /* --- 3. 可选：优化日志视觉效果 --- */
    padding: 10px;           /* 文本与边框的内边距 */
    background-color: #f7f7f7;/* 浅灰色背景，看起来像代码块 */
    border: 1px solid #ccc;  /* 边框 */
    border-radius: 4px;      /* 轻微的圆角 */
    font-family: monospace;  /* 使用等宽字体，使字符对齐更整齐 */
}
}