/* 主页同系外观覆盖（保留原编辑器布局与功能） */
:root{
  --bg:#0a0e17;
  --panel:#141b2d;
  --line:rgba(255,255,255,.08);
  --text:#e8ecf4;
  --blue:#3b82f6;
  --blue2:#2563eb;
}

html,body.arkfz-theme{
  background:var(--bg)!important;
  color:var(--text)!important;
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif!important;
}

#header{
  height:56px!important;
  background:rgba(10,14,23,.96)!important;
  background-image:none!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px);
}
#logo{
  height:34px!important;
  margin:11px 0 0 14px!important;
}
.brand-link{
  display:inline-flex!important;
  align-items:center;
  gap:10px;
  height:56px;
  padding-left:4px;
  text-decoration:none!important;
}
.brand-text{
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
#name-menu{
  left:260px!important;
  top:14px!important;
}
#name{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:8px!important;
  color:#fff!important;
  padding:2px 12px!important;
}
#name-status,#name-status a{color:rgba(255,255,255,.4)!important}

#menu{top:12px!important;right:16px!important}
#menu ul li{
  border:none!important;
  height:auto!important;
  margin-left:8px!important;
  background:transparent!important;
}
#menu ul li:first-child{border:none!important}
#menu ul li:hover{background:transparent!important}
#menu a{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:64px;
  padding:7px 12px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(255,255,255,.85)!important;
  font-size:13px!important;
  line-height:1.2!important;
  transition:all .15s;
}
#menu a:hover{
  border-color:rgba(59,130,246,.5)!important;
  background:rgba(59,130,246,.18)!important;
  color:#93c5fd!important;
}
#menu li.nav-home a{
  background:linear-gradient(135deg,var(--blue),var(--blue2))!important;
  border-color:transparent!important;
  color:#fff!important;
  font-weight:600;
}
#menu ul li ul{
  background:#141b2d!important;
  border:1px solid var(--line)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.45)!important;
  border-radius:10px!important;
  overflow:hidden;
}
#menu ul li ul li a{color:rgba(255,255,255,.8)!important;border:none!important;background:transparent!important;border-radius:0!important}
#menu ul li ul li:hover,#menu ul li ul li a:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}

/* 原布局按 40px 顶栏计算，这里同步改成 56px */
#auto{
  margin:-56px 0 -48px!important;
  padding:56px 0 48px!important;
  background:var(--bg)!important;
}
#contents{
  background:var(--panel)!important;
}
#codeEditor,#treeEditor,div.jsoneditor,div.jsoneditor-outer{
  background:#0f1524!important;
  border-color:var(--line)!important;
}
div.jsoneditor-menu{
  background:#101624!important;
  border-bottom:1px solid var(--line)!important;
}
div.jsoneditor-field,div.jsoneditor-value,div.jsoneditor-readonly,div.jsoneditor td,div.jsoneditor th{
  color:var(--text)!important;
}
div.jsoneditor-readonly{color:rgba(255,255,255,.45)!important}
div.jsoneditor-value.jsoneditor-string{color:#86efac!important}
div.jsoneditor-value.jsoneditor-number{color:#93c5fd!important}
div.jsoneditor-value.jsoneditor-boolean{color:#fbbf24!important}
div.jsoneditor-value.jsoneditor-null{color:#f9a8d4!important}

#splitter{background:#101624!important;border-color:var(--line)!important}
#buttons .convert{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:56px;
  height:36px;
  padding:0 12px!important;
  background:linear-gradient(135deg,var(--blue),var(--blue2))!important;
  border:none!important;
  border-radius:8px!important;
  box-shadow:0 4px 14px rgba(59,130,246,.35);
  color:#fff!important;
  font-size:14px!important;
  font-weight:700!important;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif!important;
  letter-spacing:.08em;
  cursor:pointer!important;
  line-height:1!important;
}
#buttons .convert:hover{filter:brightness(1.08)}
#buttons .convert:active{transform:translateY(1px)}
#drag{background:rgba(255,255,255,.1)!important}

.ace-jsoneditor.ace_editor,.ace_editor{
  background-color:#0f1524!important;
  color:#e8ecf4!important;
}
.ace-jsoneditor .ace_gutter,.ace_gutter{
  background:#101624!important;
  color:rgba(255,255,255,.35)!important;
  border-right:1px solid var(--line)!important;
}
.ace-jsoneditor .ace_scroller,.ace_scroller{background-color:#0f1524!important}
.ace-jsoneditor .ace_cursor{border-left-color:#93c5fd!important}
.ace-jsoneditor .ace_marker-layer .ace_selection{background:rgba(59,130,246,.35)!important}
.ace-jsoneditor .ace_marker-layer .ace_active-line,
.ace_marker-layer .ace_active-line{background:rgba(255,255,255,.04)!important}
/* JSON 键名等：覆盖 Ace 默认黑色，深色底可读 */
.ace-jsoneditor .ace_variable,
.ace-jsoneditor .ace_meta.ace_tag,
.ace_editor .ace_variable,
.ace_editor .ace_meta.ace_tag{color:#7dd3fc!important}
.ace-jsoneditor .ace_string,
.ace_editor .ace_string{color:#86efac!important}
.ace-jsoneditor .ace_constant.ace_numeric,
.ace_editor .ace_constant.ace_numeric{color:#fca5a5!important}
.ace-jsoneditor .ace_constant.ace_language,
.ace_editor .ace_constant.ace_language{color:#fbbf24!important}
.ace-jsoneditor .ace_paren,
.ace-jsoneditor .ace_punctuation,
.ace_editor .ace_paren,
.ace_editor .ace_punctuation{color:rgba(232,236,244,.75)!important}
.ace-jsoneditor .ace_indent-guide,
.ace_editor .ace_indent-guide{background:none!important;border-right:1px solid rgba(255,255,255,.06)}
.ace-jsoneditor .ace_print-margin,
.ace_editor .ace_print-margin{background:rgba(255,255,255,.06)!important}

#footer{
  height:48px!important;
  background:rgba(10,14,23,.96)!important;
  border-top:1px solid var(--line)!important;
  color:rgba(255,255,255,.4)!important;
  box-shadow:none!important;
}
#footer-inner{margin:14px 0!important;font-size:12px}
#footer a{color:#7dd3fc!important;text-decoration:none}
#footer a:hover{color:#bfdbfe!important}

@media (max-width:900px){
  .brand-text{display:none}
  #name-menu{left:90px!important}
}