/* 核心样式.css - Delosha Editor 全局视觉定义 */
:root {
    --bg-color: #1a1625;
    --container-bg: #241f2d;
    --header-bg: #3d2b4d;
    --text-color: #d1c9db;
    --accent-color: #ffb3ff;
    --border-color: #4a3b52;
    --toolbar-width: 230px;
    --h-bl: 4px solid var(--header-bg);
    --h-br: 0px solid transparent;
    --h-bt: 0px solid transparent;
    --h-bb: 0px solid transparent;
    --h-bg: transparent;
    --h-pad: 5px 10px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "MS PGothic", "Hiragino Sans GB", "Microsoft YaHei", serif;
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    min-width: 1300px;
}

/* --- 左侧工具栏 --- */
#toolbar {
    width: var(--toolbar-width);
    background: #2a2435;
    border-right: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 10;
}

.tool-group {
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
}

.tool-group label {
    display: block;
    font-size: 11px;
    color: #8a7fa1;
    margin-bottom: 5px;
    text-transform: uppercase;
}

input[type="text"], textarea, select {
    width: 100%;
    background: #1a1625;
    border: 1px solid var(--border-color);
    color: var(--accent-color);
    padding: 5px;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-size: 13px;
}

button {
    background: #3d2b4d;
    border: 1px solid var(--border-color);
    color: white;
    padding: 5px 10px;
    margin: 2px;
    cursor: pointer;
    font-size: 12px;
    transition: 0.2s;
}

button:hover { background: var(--accent-color); color: black; }
.btn-primary { background: #6a4c93; width: 100%; margin: 10px 0; font-weight: bold; }

/* --- 编辑/预览区域 --- */
#editor-viewport {
    flex: 1;
    overflow-y: auto;
    padding:  0;
    background: #110e16;
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 0;
}

.post-container {
    border: 2px solid var(--border-color) !important;
    background: var(--container-bg) !important;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    width: 95%;              /* 对应你正文的宽度比例 */
    max-width: 1200px;       /* 对应你正文的最大宽度限制 */
    table-layout: fixed;     /* 必须固定，防止内容撑破容器 */
    word-wrap: break-word;   /* 强制换行逻辑 */
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;  
}
#main-editor {
padding: 40px 50px;
min-height: 500px;
outline: none;
line-height: 1.8;
text-align: justify;
color: var(--text-color);
font-size: 16px;
background-color: var(--container-bg);
position: relative;
word-wrap: break-word;
word-break: break-word;
z-index: 2; /* 确保编辑器内容作为定位基准 */
}

/* 确保段落间距生效：取消默认的上下边距冲突 */
#main-editor p, #main-editor div, #main-editor blockquote {
    margin-top: 0;
    margin-bottom: 20px; /* 默认间距 */
    transition: margin-bottom 0.2s;
}

.post-header { 
    background: var(--header-bg) !important; 
    color: var(--text-color) !important;  
    padding: 12px 20px !important; 
    font-size: 14px !important; 
    border-bottom: 2px solid var(--border-color) !important;
    text-align: left;
}

.post-meta { 
    background: var(--bg-color) !important; 
    border-bottom: 1px dashed var(--border-color) !important;  
    padding: 12px 20px !important; 
    font-size: 12px !important; 
    color: var(--accent-color) !important; 
    text-align: left;
}
/* 优化特效基础样式：解决定位与模糊 */
/* 优化艺术字基础，确保层级正确且不会被背景遮挡 */
.art-text {
    display: inline;
    position: relative;
    /* 强制重置可能干扰清除的属性 */
    background-color: transparent !important;
}
.text-gradient {
    display: inline !important; 
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-color: transparent !important;
    background-size: cover;
}
/* 引用块优化：增加对比度 */
#main-editor blockquote {
    border-left: 4px solid var(--accent-color);
    padding: 12px 20px;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-color);
    font-style: normal;
    border-radius: 0 4px 4px 0;
}

/* 分割线优化：解决在深色主题下不可见的问题 */
#main-editor hr {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 20px 0;
    height: 0;
}

.tag-box { 
    background: var(--header-bg) !important;  
    color: var(--accent-color) !important; 
    padding: 2px 8px !important; 
    border-radius: 3px !important;
    margin-right: 5px;
    border: 1px solid var(--accent-color) !important;
}

#main-editor {
    padding: 40px 50px;
    min-height: 500px;
    outline: none;
    line-height: 1.8;
    text-align: justify;
    color: var(--text-color);
    font-size: 16px;
    background-color: var(--container-bg);
    position: relative;
    word-wrap: break-word; 
    word-break: break-word;
}

/* 动态标题装饰样式 */
#main-editor h1, #main-editor h2, #main-editor h3, 
#main-editor h4, #main-editor h5, #main-editor h6 {
    color: var(--accent-color) !important;
    padding: var(--h-pad, 5px 10px);
    margin: 1.5em 0 0.8em 0 !important;
    border-left: var(--h-bl, 4px solid var(--header-bg));
    border-right: var(--h-br, 0px solid transparent);
    background: var(--h-bg, transparent);
    border-top: var(--h-bt, 0px solid transparent);
    border-bottom: var(--h-bb, 0px solid transparent);
    transition: 0.3s;
}   

.memo-area { 
    border: 1px double var(--accent-color) !important; /* 修改这里 */
    background: var(--bg-color) !important; 
    padding: 20px !important; 
    margin: 25px 0 !important; 
    color: var(--text-color) !important; 
    border-radius: 4px;
}

.img-table { 
    border: 1px solid var(--border-color) !important; 
    background: var(--bg-color) !important; 
    margin: 0 0 15px 20px; 
    
}
#main-editor .block-align-left { float: left !important; margin: 10px 20px 10px 0 !important; position: relative !important; left: auto !important; top: auto !important; text-align: left;}
#main-editor .block-align-right { float: right !important; margin: 10px 0 10px 20px !important; position: relative !important; left: auto !important; top: auto !important;text-align: right; }
#main-editor .block-align-center { display: block !important; margin: 20px auto !important; float: none !important; clear: both !important; position: relative !important; left: auto !important; top: auto !important; text-align: center;}

/* 组件管理 UI 样式 */
#layer-list { background: #1a1625; border: 1px solid var(--border-color); max-height: 200px; overflow-y: auto; display: none; margin-bottom: 10px; }
.layer-item { display: flex; align-items: center; padding: 5px; border-bottom: 1px solid #332a40; font-size: 11px; }
.layer-item:hover { background: #3d2b4d; }
.layer-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.layer-btns { display: flex; gap: 5px; }
.layer-btns span { cursor: pointer; padding: 0 2px; filter: grayscale(1); }
.layer-btns span.active { filter: grayscale(0); border-bottom: 1px solid var(--accent-color); }

.wiki-notice {
    position: relative;
    background: transparent !important;
    border: none !important;
    transition: box-shadow 0.3s;
}
.wiki-notice table { 
    border: 1px solid var(--border-color);
}
/* 碰撞与环绕逻辑 */
/* 统一 Block 基础行为：默认就是“碰撞模式”（即跟随文档流并排） */
.editor-block { 
    display: inline-block !important; 
    vertical-align: top !important; /* 确保高度不同时顶部对齐 */
    position: relative;
    box-sizing: border-box;
    margin: 5px; 
    min-height: 50px; /* 防止高度塌陷 */
    transition: margin 0.3s, float 0.3s;
    overflow-wrap: break-word;
}
.block-align-left { float: left; margin-right: 20px; clear: none; }
.block-align-right { float: right; margin-left: 20px; clear: none; }
.block-align-center { display: block; margin-left: auto !important; margin-right: auto !important; float: none; clear: both; }
/* 覆盖旧样式，删除 float 和 clear */
.memo-area, .img-table { 
    float: none !important; 
    clear: none !important; 
    display: inline-block !important; 
    margin: 10px !important;
}
/* 侧边栏可视化调节 UI 样式 */
.layer-detail {
    background: #241f2d;
    padding: 10px;
    margin-top: 5px;
    border-radius: 4px;
    display: none; /* 默认隐藏，点击展开 */
}
.layer-detail label { font-size: 10px; color: #8a7fa1; }
.layer-item.expanded .layer-detail { display: block; }

#main-editor h1, #main-editor h2, #main-editor h3, 
#main-editor h4, #main-editor h5, #main-editor h6 {
    display: block;
    width: 100%; /* 默认满宽，调小时可并排 */
    transition: 0.3s;
    box-sizing: border-box;
}
/* 允许重叠模式：脱离文档流 */
.overlap-mode { position: absolute !important; z-index: 10; cursor: move; float: none !important; margin: 0 !important; }
#main-editor::after { content: ""; display: table; clear: both; }

.post-footer { 
    border-top: 1px dashed var(--border-color) !important; 
    background: var(--bg-color) !important;
    padding: 12px 20px !important;
    font-size: 11px !important; 
    color: var(--text-color) !important; 
/* 编辑状态下手柄可见，导出时通过媒体查询或后续脚本隐藏 */
.resizer { width: 8px; height: 8px; background: var(--accent-color); position: absolute; z-index: 15; cursor: nwse-resize; }
.resizer.tl { top: -4px; left: -4px; }
.resizer.tr { top: -4px; right: -4px; }
.resizer.bl { bottom: -4px; left: -4px; }
.resizer.br { bottom: -4px; right: -4px; cursor: nwse-resize; }
[contenteditable="false"] .resizer { display: none; } /* 锁定后隐藏手柄 */

/* 导出适配：去掉手柄 */
@media print, screen { .resizer { display: none !important; } }
.block-align-left { float: left !important; margin: 10px 20px 10px 0 !important; clear: none; }
.block-align-right { float: right !important; margin: 10px 0 10px 20px !important; clear: none; }
.block-align-center { display: block !important; margin: 15px auto !important; float: none !important; clear: both; }
/* 确保编辑器能看到环绕效果 */
#main-editor { overflow: auto; }
}

.art-text {
    display: inline;
    position: relative;
    /* 防止继承背景色干扰 */
    background-color: transparent !important; 
}

/* 渐变文字 */
.text-gradient {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-color: transparent !important;
}

/* 描边修复：确保中文笔画不被覆盖 */
.art-stroke-apply {
    /* 核心属性：设置描边绘画顺序，先画描边再画填充 */
    paint-order: stroke fill;
    -webkit-text-stroke-width: 1px; /* 脚本会动态覆盖 */
    /* 避免文字颜色丢失 */
    color: inherit; 
}

/* 阴影确保文字本身清晰 */
.art-text[style*="text-shadow"] {
    color: inherit;
    /* 防止某些浏览器下阴影导致文字模糊 */
    -webkit-font-smoothing: antialiased;
}