.studio{
  max-width:1120px;margin:0 auto;padding:0 24px 40px;
  display:flex;flex-direction:column;min-height:calc(100vh - 92px);
}

/* 标签栏 */
.tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:2px 0 0}
.tab{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:7px 10px 7px 12px;border-radius:10px 10px 0 0;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-bottom:0;
  font-size:13px;color:var(--dim);cursor:pointer;max-width:200px;transition:.15s;
}
.tab:hover{color:var(--fg);background:rgba(255,255,255,.07)}
.tab.on{color:var(--fg);background:var(--panel);border-color:var(--line-2)}
.tab .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab .dot-unsaved{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;display:none}
.tab.dirty .dot-unsaved{display:block}
.tab .x{
  border:0;background:transparent;color:var(--dim-2);font-size:15px;line-height:1;
  cursor:pointer;padding:0 2px;border-radius:4px;
}
.tab .x:hover{color:var(--bad);background:rgba(255,107,129,.12)}
.tab-add{
  flex:none;border:1px dashed var(--line-2);background:transparent;color:var(--dim);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1;
}
.tab-add:hover{color:var(--accent);border-color:var(--accent)}

/* 工具栏 */
.toolbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 10px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:0 12px 0 0;
}
.group{display:flex;align-items:center;gap:4px}
.sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.spacer{flex:1}
.tb{
  border:1px solid transparent;background:transparent;color:var(--fg);
  min-width:30px;height:28px;padding:0 8px;border-radius:7px;font-size:12.5px;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.tb:hover{background:rgba(255,255,255,.07);border-color:var(--line)}
.tb.on{background:rgba(110,168,255,.18);border-color:rgba(110,168,255,.4);color:#cfe0ff}
.tb.select{padding:0 4px;background:rgba(255,255,255,.04);border-color:var(--line)}
.tb.select option{background:#131828;color:var(--fg)}
.color-pick{position:relative;gap:6px;cursor:pointer}
.color-pick input{width:18px;height:18px;border:0;padding:0;background:transparent;cursor:pointer}
.sw{width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0}
.sw:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.35)}

/* 编辑区 */
.editor-wrap{
  flex:1;display:flex;background:var(--panel);
  border:1px solid var(--line-2);border-top:0;
  border-radius:0 0 14px 14px;overflow:hidden;min-height:420px;
}
.editor,.source{
  flex:1;width:100%;padding:22px 26px;outline:none;
  font:15px/1.75 "Segoe UI","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
  color:var(--fg);overflow:auto;min-height:420px;box-sizing:border-box;
}
.editor:empty::before{content:"在这里输入内容。选中文字后点颜色即可上色。";color:var(--dim-2)}
.source{
  border:0;resize:none;background:rgba(0,0,0,.18);
  font-family:"Cascadia Mono",Consolas,monospace;font-size:13px;line-height:1.65;
}

/* 状态栏 */
.statusbar{
  display:flex;align-items:center;gap:16px;
  padding:8px 4px;font-size:12px;color:var(--dim-2);
}

@media (max-width:700px){
  .studio{padding:0 12px 26px}
  .toolbar{border-radius:0}
  .editor,.source{padding:16px;min-height:320px}
}