*{box-sizing:border-box}
body,html{margin:0;padding:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;display:flex;flex-direction:column;background-color:#f5f5f5}
.ace-editor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 14px; }
.main-header{display:flex;align-items:center;background:#fff;padding:0 20px;height:60px;box-shadow:0 2px 8px rgba(0,0,0,0.05);flex-shrink:0;position:sticky;top:0;z-index:1000}
.logo{font-size:18px;font-weight:bold;color:#333;margin-right:30px;margin-left:20px}
.logo img{height:40px}
.main-nav{display:flex;align-items:center;height:100%}
.nav-item{height:100%;display:flex;align-items:center;position:relative}
.nav-item>a{text-decoration:none;color:#606266;font-size:14px;padding:0 15px;display:flex;align-items:center;height:100%;transition:color 0.3s}
.nav-item>a:hover{color:#017cfd}
.nav-item.active>a{color:#017cfd}

.arrow-down{display:inline-block;margin-left:4px;border-top:4px solid #999;border-left:4px solid transparent;border-right:4px solid transparent;transition:transform 0.2s}
.nav-item:hover .arrow-down{border-top-color:#017cfd;transform:rotate(180deg)}
.mega-menu{visibility:hidden;opacity:0;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,0.1);padding:20px;border-radius:4px;border-top:2px solid #017cfd;transition:all 0.2s;transform:translateY(-5px);width:auto;min-width:600px}
.nav-item:hover .mega-menu{visibility:visible;opacity:1;transform:translateY(0)}

.mega-grid{display:grid;grid-template-columns:repeat(3,auto);gap:12px 30px}
.mega-grid a{color:#333;text-decoration:none;font-size:13px;white-space:nowrap;transition:color 0.2s}
.mega-grid a:hover{color:#017cfd}
.mega-grid a.active{color:#017cfd}

/* 面包屑样式 */
.breadcrumb{font-size:13px;color:#606266;display:flex;align-items:center}
.breadcrumb a{color:#606266;text-decoration:none;transition:color 0.2s}
.breadcrumb a:hover{color:#017cfd}
.breadcrumb .separator{margin:0 8px;color:#c0c4cc}
.breadcrumb .current{color:#303133;font-weight:bold}

/* 语言切换下拉框样式 */
.lang-switcher{margin-left:auto;margin-right:20px;position:relative;display:flex;align-items:center;cursor:pointer;height:100%}
.lang-switcher-btn{padding:6px 12px;border-radius:4px;border:1px solid #dcdfe6;background:#fff;font-size:13px;color:#606266;display:flex;align-items:center;gap:6px;transition:all 0.3s}
.lang-switcher:hover .lang-switcher-btn{border-color:#c0c4cc;color:#333}.lang-switcher-menu{visibility:hidden;opacity:0;position:absolute;top:100%;right:0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.1);border-radius:4px;border:1px solid #ebeef5;margin-top:5px;padding:5px 0;min-width:120px;transform:translateY(-5px);transition:all 0.2s;z-index:1000}
.lang-switcher:hover .lang-switcher-menu{visibility:visible;opacity:1;transform:translateY(0)}.lang-switcher-item{display:block;padding:8px 15px;color:#606266;text-decoration:none;font-size:13px;transition:background 0.2s,color 0.2s}
.lang-switcher-item:hover,.lang-switcher-item.active{background:#f5f7fa;color:#017cfd}


/* 主体内容区 */
.main-content{flex:1;display:flex;flex-direction:column}

.page-scroll-wrapper { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: #f5f7fa; }
.container { display: flex; padding: 20px; height: calc(100vh - 120px); min-height: 550px; flex: none; gap: 0; }
        
.panel { display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); overflow: hidden; }
#panel-left { width: calc(50% - 8px); flex-shrink: 0; }
#panel-right { flex: 1; min-width: 0; background: #fafafa; }

.panel-header { padding: 10px 15px; background: #fafafa; border-bottom: 1px solid #ebeef5; display: flex; justify-content: space-between; align-items: center; }
.panel-title { font-size: 14px; color: #606266; font-weight: bold; }

textarea{flex:1;width:100%;height:100%;resize:none;border:none;padding:15px 10px;font-family:Consolas,Monaco,"Courier New",monospace;font-size:14px;line-height:1.6;color:#333;outline:none;background:transparent;white-space:pre;overflow:auto;}
textarea:focus{box-shadow:inset 0 0 0 1px #017cfd;}


.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.toolbar button { background: #fff; border: 1px solid #dcdfe6; color: #606266; padding: 5px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; transition: all 0.2s; outline: none; }
.toolbar button:hover { color: #017cfd; border-color: #017cfd; background-color: #f0f8fe; }
.toolbar button.btn-primary { background: #017cfd; color: #fff; border-color: #017cfd; }
.toolbar button.btn-primary:hover { background: #4cb2ff; border-color: #4cb2ff; color: #fff; }
.toolbar button.btn-danger { background: #e5351e; color: #fff; border-color: #e5351e; }
.toolbar button.btn-danger:hover { background: #ef6755; border-color: #ef6755; color: #fff; }
.toolbar button.btn-success { background: #67c23a; color: #fff; border-color: #67c23a; }
.toolbar button.btn-success:hover { background: #85ce61; border-color: #85ce61; color: #fff; }


.resizer { width: 16px; cursor: col-resize; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; z-index: 10; }
.resizer::after { content: ''; width: 4px; height: 40px; background: #dcdfe6; border-radius: 2px; transition: background-color 0.2s; }
.resizer:hover::after, .resizer.dragging::after { background: #017cfd; }
body.resizing { cursor: col-resize !important; user-select: none !important; }



.editor-wrapper { display: flex; flex-direction: row; width: 100%; height: 100%; flex: 1; position: relative; min-height: 0; background: #fff; overflow: hidden; }
.code-content { flex: 1; resize: none; border: none; padding: 15px; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 14px; line-height: 1.6; color: #333; outline: none; background: transparent; white-space: pre; overflow: auto; }


/* 代码高亮 */
.hl-key { color: #e6a23c; font-weight: bold; }
.hl-keyword { color: #d81e06; font-weight: bold; }
.hl-type { color: #e6a23c; }
.hl-string { color: #67c23a; }
.hl-macro { color: #e6a23c; }
.hl-comment { color: #909399; font-style: italic; }
.hl-tag { color: #d81e06; }
.hl-decorator { color: #e6a23c; }
.hl-annotation { color: #409eff; }
.hl-attr { color: #e6a23c; }
.hl-value { color: #333; }
.hl-symbol { color: #606266; }
.hl-property { color: #409eff; }
.hl-method { color: #67c23a; }
.hl-number { color: #e6a23c; }

.error-msg { color: #f56c6c; padding: 15px; font-family: monospace; white-space: pre-wrap; display: none; background: #fef0f0; border-top: 1px solid #fbc4c4; }

.direction-indicator { font-size: 20px; color: #017cfd; font-weight: bold; margin: 0 10px; }

.line-numbers{width:45px;min-width:45px;text-align:right;padding:15px 10px 15px 0;color:#999;background:#f8f8f9;border-right:1px solid #eee;font-family:Consolas,Monaco,"Courier New",monospace;font-size:14px;line-height:1.6;overflow:hidden;user-select:none;}


/* Switch 开关样式 */
.switch-wrapper { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #606266; cursor: pointer; user-select: none; }
.switch-wrapper input { display: none; }
.switch-slider { position: relative; width: 32px; height: 18px; background-color: #dcdfe6; border-radius: 9px; transition: .3s; }
.switch-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.switch-wrapper input:checked + .switch-slider { background-color: #017cfd; }
.switch-wrapper input:checked + .switch-slider::after { transform: translateX(14px); }

.input-group { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #606266; }
.config-input { padding: 4px 8px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 12px; outline: none; width: 100px; color: #333; }
.config-input:focus { border-color: #fbc4c4; box-shadow: 0 0 0 2px rgba(216, 30, 6, 0.1); }

.jsoneditor-wrapper { flex: 1; height: 100%; }
.jsoneditor { border: none !important; }
.jsoneditor-menu { background-color: #fafafa !important; border-bottom: 1px solid #ebeef5 !important; color: #333 !important; }
.jsoneditor-menu > button, .jsoneditor-menu > div.jsoneditor-modes > button { color: #333 !important; }
.jsoneditor-poweredBy { display: none !important; }

/* 自定义下拉框样式 */
.custom-select-wrapper { position: relative; user-select: none; box-sizing: border-box; min-width: 120px; }
.custom-select { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; background: #fff; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 12px; color: #606266; cursor: pointer; transition: .2s; white-space: nowrap; }
.custom-select:hover { border-color: #c0c4cc; }
.custom-select.active { border-color: #017cfd; box-shadow: 0 0 0 2px rgba(216, 30, 6, 0.1); }
.custom-select::after { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #606266; margin-left: 6px; transition: .2s; }
.custom-select.active::after { transform: rotate(180deg); }
.custom-options { position: absolute; top: 100%; left: 0; min-width: 100%; margin-top: 4px; background: #fff; border: 1px solid #e4e7ed; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.1); z-index: 100; display: none; max-height: 250px; overflow-y: auto; width: max-content; }
.custom-options.show { display: block; }
.custom-option { padding: 6px 10px; font-size: 12px; color: #606266; cursor: pointer; transition: .2s; white-space: nowrap; }
.custom-option:hover { background: #f5f7fa; }
.custom-option.selected { color: #017cfd; background: #e4ebff; font-weight: bold; }


.info-section { margin: 0 20px 20px 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); padding: 20px 25px; color: #333; line-height: 1.8; }
.info-section h3 { margin-top: 0; font-size: 16px; color: #333333; border-bottom: 1px solid #ebeef5; padding-bottom: 10px; margin-bottom: 15px; }
.info-section h4 { font-size: 14px; color: #333; margin: 15px 0 5px 0; }
.info-section p, .info-section li { font-size: 13px; color: #606266; margin: 5px 0; }
.info-section ul { padding-left: 20px; margin-top: 5px; }
.info-section code { background: #f4f4f5; padding: 2px 6px; border-radius: 3px; color: #d81e06; font-family: Consolas, Monaco, monospace; font-size: 12px; }



/* 底部区域 */
.main-footer{padding:15px 0;background:#fff;color:#909399;font-size:13px;border-top:1px solid #ebeef5;flex-shrink:0;z-index:1000}
.main-footer .footer-content{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:15px}
.main-footer a{color:#909399;text-decoration:none;transition:color 0.2s}
.main-footer a:hover{color:#017cfd}
.main-footer .footer-item{display:inline-flex;align-items:center;white-space:nowrap}
.main-footer .police-icon{width:14px;height:14px;margin-right:4px}