:root{
    --背景:#0b1020;
    --前景:#e6eef8;
    --次前景:#c8d3e0;
    --强调:#d9b1a2;
    --强调2:#3fa9f5;
    --边:#1a2133;
    --边淡:#223049;
    --面:#11172a;
    --面2:#141c33;
    --黄:#f1c40f;
    --红:#ff615d;
    --绿:#2ecc71;
    --蓝:#3498db;
    --紫:#9b59b6;
    --橙:#e67e22;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--背景);color:var(--前景);font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Noto Sans CJK SC", sans-serif;}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--强调)}
.工具栏{
    display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
    border-bottom:1px solid var(--边);background:linear-gradient(180deg,#0f162b,#0b1222);
    position:sticky;top:0;z-index:20;
}
.工具栏 .品牌{font-weight:700;letter-spacing:.5px;color:#fff}
.工具栏 .分隔{width:1px;height:28px;background:var(--边);margin:0 .25rem}
.工具栏 button,.工具栏 select,.工具栏 input[type="range"]{background:var(--面);border:1px solid var(--边);border-radius:8px;padding:.35rem .6rem;}
.工具栏 button:hover{border-color:var(--边淡);background:var(--面2)}
.工具栏 .主要{background:linear-gradient(180deg,#1b7bd6,#1169c8);border-color:#0e58a6}
.工具栏 .成功{background:linear-gradient(180deg,#1f9d67,#178b59);border-color:#116b45}
.工具栏 .危险{background:linear-gradient(180deg,#d64c4c,#bd3434);border-color:#972525}
.工具栏 .次要{background:linear-gradient(180deg,#2a3352,#222a45);border-color:#1a2238}
.工具栏 label{opacity:.9}
.主区{
    height:calc(100% - 56px);
    display:grid;
    grid-template-columns: 260px 1fr 320px;
    gap:8px;
    padding:8px;
}
.侧栏,.右栏{
    background:var(--面2);border:1px solid var(--边);border-radius:10px;overflow:hidden;
    display:flex;flex-direction:column;min-height:0;
}
.侧栏标题,.右栏标题{
    position:sticky;top:0;z-index:3;
    background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
    padding:.6rem .75rem;border-bottom:1px solid var(--边);font-weight:700;display:flex;align-items:center;gap:.5rem;
}
.侧栏内容{padding:.6rem .6rem;display:flex;flex-direction:column;gap:.5rem;overflow:auto;}
.标签{font-size:.82rem;opacity:.8}
.插入按钮{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.5rem .6rem;background:var(--面);border:1px solid var(--边);border-radius:8px;cursor:pointer;
}
.插入按钮:hover{border-color:var(--边淡);background:linear-gradient(180deg,#141c33,#121a2d)}
.中栏{display:grid;grid-template-rows:50% 50%;gap:8px;min-height:0;}
.编辑器区,.画布区{
    background:var(--面2);border:1px solid var(--边);border-radius:10px;overflow:hidden;min-height:0;display:flex;flex-direction:column;
}
#脚本编辑器容器,#日志编辑器容器,#功能编辑器容器{flex:1;min-height:0;}
#脚本编辑器容器>.monaco-editor,#日志编辑器容器>.monaco-editor,#功能编辑器容器>.monaco-editor{height:100%;}
.编辑器头,.画布头{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.4rem .6rem;border-bottom:1px solid var(--边);background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.编辑器头 .右,.画布头 .右{display:flex;gap:.4rem;align-items:center}
.画布容器{position:relative;flex:1;min-height:0;}
canvas{display:block;width:100%;height:100%;}
.徽记{
    position:absolute;right:.5rem;bottom:.5rem;background:rgba(0,0,0,.35);
    padding:.2rem .4rem;border-radius:6px;font-size:.75rem;pointer-events:none;
}
.暂停遮罩{
    position:absolute;inset:0;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px);
}
.暂停遮罩.显示{display:flex}
.暂停遮罩 .盒{
    background:rgba(0,0,0,.4);padding:1rem 1.2rem;border:1px solid var(--边淡);border-radius:12px;font-weight:700;
}
.状态栏{
    border-top:1px solid var(--边);padding:.4rem .6rem;font-size:.85rem;display:flex;gap:1rem;align-items:center;color:var(--次前景);
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.03));
}
.徽章{display:inline-flex;align-items:center;gap:.35rem;padding:.1rem .45rem;background:#0e1630;border:1px solid #1f2a4d;border-radius:999px;font-size:.78rem}
.右栏{gap:8px;overflow:hidden;}
.右栏部分{
    flex:1;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--边);position:relative;
}
.右栏部分:first-child{border-top:none;}
.右栏部分 .右栏标题{border-bottom:1px solid var(--边);}
.右栏部分 .编辑器外壳{flex:1;min-height:0;position:relative;padding:8px;}
.右栏部分 .编辑器外壳::before{
    content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,0.04);border-radius:8px;pointer-events:none;
}
.右栏部分 .编辑器内层{position:absolute;inset:12px;display:flex;flex-direction:column;min-height:0;}
.右栏部分 .编辑器内层>.monaco-editor{border-radius:6px;overflow:hidden;}
.选项行{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.输入{background:#0f1730;border:1px solid #23325a;color:var(--前景);border-radius:8px;padding:.3rem .5rem}
.选择{background:#0f1730;border:1px solid #23325a;color:var(--前景);border-radius:8px;padding:.35rem .4rem}
.提示{opacity:.75;font-size:.85rem}
.热键{opacity:.75;font-size:.82rem}
@media (max-width: 1200px){
    .主区{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto}
    .侧栏,.右栏{order:2}
    .中栏{order:1;height:70vh}
    .工具栏{flex-wrap:wrap}
}
@media (max-width: 768px){
    .主区{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto}
    .中栏{grid-template-rows:340px 360px}
    .右栏{height:480px}
}
    .画布容器 {
      position: relative;
    }
    #画布,
    #反射画布 {
      display: block;
      width: 100%;
      height: 100%;
    }
    #画布 {
      position: relative;
      z-index: 1;
    }
    #反射画布 {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      pointer-events: none;
    }
    .分类区 {
      margin-bottom: 1rem;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .分类区:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    .分类标题 {
      font-size: 0.82rem;
      color: #a6bbff;
      margin: 0.4rem 0 0.2rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .主要 {
        background: var(--背景);
    }
    .次要 {
        background: var(--背景);
    }