/* --- 100% 恢复原始精致布局 CSS --- */
:root {
    --primary-color: #4a90e2;
    --text-color: #ffffff;
    --electric-color: #4facfe;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(125% 125% at 50% 10%, #000 40%, #1a1a2e 100%);
    margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: var(--text-color); overflow-x: hidden;
}

.bg-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%234facfe" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); background-size: cover; pointer-events: none; z-index: 0; }

.container {
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); padding: 10px; border-radius: 16px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5); width: 95%; max-width: 600px; margin: 8px auto; position: relative; z-index: 1; box-sizing: border-box; transition: all 0.4s ease;
    overflow: hidden;
}

/* 整体容器跑马灯特效 (纯净硬边短线条、慢速流光) */
.container.effects-active::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    /* 优雅长流光：保留 50 度的亮色区域，其余全部透明 */
    background: conic-gradient(transparent 0deg, transparent 155deg, #4facfe 160deg, #00f2fe 210deg, transparent 215deg, transparent 360deg);
    animation: rotate 20s linear infinite; z-index: -1; opacity: 1;
    /* 120Hz 极致丝滑优化：硬件加速与合成层隔离 */
    will-change: transform, opacity; transform: translate3d(0,0,0); backface-visibility: hidden;
}
.container.effects-active::after {
    content: ''; position: absolute; inset: 2px; background: rgba(15, 15, 25, 0.95); border-radius: 14px; z-index: -1; backdrop-filter: blur(20px);
}

@media (min-width: 1024px) {
    .container { max-width: 950px; display: grid; grid-template-columns: 320px 1fr; gap: 20px; padding: 22px; }
    .pc-header { grid-column: 1 / -1; position: relative; }
}

.settings-trigger {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: all 0.3s ease; color: var(--electric-color); font-size: 16px;
}
.settings-trigger:hover { background: rgba(79, 172, 254, 0.15); transform: rotate(90deg); }

/* --- 三种面板模式样式 (修复重叠 Bug) --- */
.panel-inline { grid-column: 1 / -1; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; margin-bottom: 10px; overflow: hidden; max-height: 0; opacity: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 12px; display: none; position: relative; }

/* 设置面板跑马灯特效 (纯净硬边短线条、慢速流光) */
.panel-inline.effects-active::before, .panel-popover.effects-active::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    /* 优雅长流光：保留 50 度的亮色区域，其余全部透明 */
    background: conic-gradient(transparent 0deg, transparent 155deg, #4facfe 160deg, #00f2fe 210deg, transparent 215deg, transparent 360deg);
    animation: rotate 20s linear infinite; z-index: -1; opacity: 0.8;
    /* 120Hz 极致丝滑优化：硬件加速与合成层隔离 */
    will-change: transform, opacity; transform: translate3d(0,0,0); backface-visibility: hidden;
}
.panel-inline.effects-active::after, .panel-popover.effects-active::after {
    content: ''; position: absolute; inset: 2px; background: rgba(20, 20, 35, 0.98); border-radius: 10.5px; z-index: -1;
}
.panel-inline.active-mode { display: block; }
.panel-inline.open { max-height: 800px; opacity: 1; padding: 12px; margin-top: 8px; border-color: rgba(79, 172, 254, 0.2); }

.panel-popover { position: absolute; top: 50px; right: 12px; width: 270px; background: rgba(15, 15, 25, 0.95); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); z-index: 2000; display: none; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; pointer-events: none; overflow: hidden; }
.panel-popover.active-mode { display: none; } /* 仅在 open 时显示 */
.panel-popover.open { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* 移除侧边栏样式 */

/* 面板内容样式 */
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.panel-header h2 { margin: 0; font-size: 0.95em; color: var(--electric-color); letter-spacing: 0.5px; }
.close-btn { cursor: pointer; font-size: 20px; color: rgba(255,255,255,0.3); }

.setting-group { margin-bottom: 10px; }
.setting-group label { color: rgba(255,255,255,0.6); font-size: 0.72em; margin-bottom: 5px; display: block; font-weight: 600; text-transform: uppercase; }

.mode-tabs { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.03); padding: 3px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); }
.mode-tab-btn { flex: 1; padding: 6px; text-align: center; cursor: pointer; border: 1px solid transparent; background: transparent; font-size: 0.7em; color: rgba(255, 255, 255, 0.4); border-radius: 6px; transition: all 0.3s ease; }
.mode-tab-btn.active { color: #ffffff; background: rgba(79, 172, 254, 0.15); border-color: rgba(79, 172, 254, 0.2); }

/* 核心 UI 样式 (100% 还原) */
h1 { text-align: center; margin-bottom: 10px; font-size: 1.32em; font-weight: 700; background: linear-gradient(75deg, #4facfe, #00f2fe, #a974ff, #ff45da); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 10px rgba(79, 172, 254, 0.3); user-select: none; }
.security-tip { background: rgba(79, 172, 254, 0.08); border: 1px solid rgba(79, 172, 254, 0.15); color: #4facfe; padding: 6px 10px; border-radius: 8px; margin-bottom: 8px; font-size: 0.76em; }
.electric-wrapper { position: relative; padding: 1.5px; border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.04); transition: all 0.3s ease; }
.electric-wrapper::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent 0deg, transparent 155deg, #4facfe 160deg, #00f2fe 210deg, transparent 215deg, transparent 360deg); animation: rotate 20s linear infinite; opacity: 0; transition: opacity 0.3s ease; z-index: -1; }
.electric-wrapper.active::before, .electric-wrapper:focus-within::before { opacity: 1; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.electric-inner { background: #0f0f0f; border-radius: 9px; width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
input[type="text"], input[type="password"], input[type="file"] { width: 100%; padding: 7px 9px; border: none; border-radius: 9px; box-sizing: border-box; font-size: 0.86em; background: rgba(255, 255, 255, 0.03); color: #ffffff; outline: none; height: 32px; }
.password-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: rgba(255, 255, 255, 0.3); cursor: pointer; font-size: 0.85em; padding: 4px; z-index: 20; }
label { display: block; margin-bottom: 4px; font-weight: 600; color: rgba(255, 255, 255, 0.7); font-size: 0.78em; }
.tabs { display: flex; margin-bottom: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 3px; }
.tab-button { flex-grow: 1; padding: 6px 0; text-align: center; cursor: pointer; border: none; background: transparent; font-size: 0.83em; color: rgba(255, 255, 255, 0.5); border-radius: 7px; transition: all 0.3s ease; font-weight: 600; }
.tab-button.active { color: #ffffff; background: rgba(79, 172, 254, 0.15); border-bottom: 2px solid #4facfe; }
.tab-content { display: none; padding: 2px 0; }
.tab-content.active { display: block; }
button.action-button { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 8px 14px; border: none; border-radius: 9px; cursor: pointer; width: 100%; font-size: 0.92em; font-weight: bold; transition: all 0.3s ease; position: relative; overflow: hidden; height: 32px; display: flex; align-items: center; justify-content: center; }
button.action-button .progress-bg { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: rgba(255, 255, 255, 0.2); transition: width 0.3s ease; z-index: 0; }
button.action-button .button-text { position: relative; z-index: 1; }
button.danger-button { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }
#log-output { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 9px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.73em; color: #00f2fe; margin-top: 6px; }

/* 移动端专用优化 - 原始布局 80% 紧凑度适配 */
/* 文件查看编辑模态框样式 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; align-items: center; justify-content: center; z-index: 3000; }
.modal-overlay.active { display: flex; }
.modal-content { background: rgba(15, 15, 25, 0.98); backdrop-filter: blur(25px); border: 1px solid rgba(79, 172, 254, 0.2); border-radius: 12px; padding: 15px; width: 92%; max-width: 900px; min-width: 300px; max-height: 90vh; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; }
.modal-header h2 { margin: 0; font-size: 0.95em; color: var(--electric-color); letter-spacing: 0.5px; }
#fileNameInput { background: transparent; border: 1px solid transparent; color: #fff; font-size: 1em; width: 100%; outline: none; padding: 4px 8px; border-radius: 4px; transition: all 0.3s; }
#fileNameInput:focus { border-color: rgba(79, 172, 254, 0.5); background: rgba(255, 255, 255, 0.05); }
#fileNameInput:disabled { color: #888; cursor: default; }
#filePreview { font-family: 'Consolas', 'Monaco', monospace; font-size: 0.82em; line-height: 1.5; color: #e0e0e0; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; overflow-x: auto; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
#fileEditor { width: 100%; height: 50vh; background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(79, 172, 254, 0.3); border-radius: 8px; padding: 10px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.82em; line-height: 1.5; outline: none; resize: vertical; white-space: pre-wrap; word-break: break-all; }
.modal-body { flex: 1; overflow-y: auto; margin-bottom: 10px; }
.file-preview { background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 15px; font-family: 'Consolas', monospace; font-size: 14px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; overflow-x: auto; color: #eee; min-height: 200px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: rgba(15, 15, 25, 0.98); padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 10px; }
.btn-edit, .btn-save, .btn-cancel, .btn-close { padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; border: none; transition: all 0.3s ease; }
.btn-edit { background: #4facfe; color: white; }
.btn-save { background: #2ecc71; color: white; }
.btn-cancel { background: #95a5a6; color: white; }
.btn-close { background: rgba(255,255,255,0.1); color: white; }