body {
  font-family: 'Inter', 'Open Sans', Arial, 'Segoe UI', 'Liberation Sans', 'DejaVu Sans', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 15px;
  background: linear-gradient(120deg, #f8fafc 0%, #e8f0fe 100%);
  color: #222;
  overflow: hidden;
  margin: 0;
  line-height: 1.6;
}


#vsplitter {
  width: 100%;
  overflow: hidden;
  margin-left: 72px; /* 56px toolbar + 16px gap */
}

#wrapper {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(80, 120, 200, 0.09);
  margin: 18px auto;
  padding-bottom: 16px;
}


#code { width: 100%; overflow: hidden; }
#edit { width: 100%; overflow: hidden; background: #000; font-size: 1rem; font-size: 1rem;}
#status { width: 100%; height: 20px; overflow: hidden; padding: 4px; font-size: 12px; }
#status-info { float: right; padding-right: 8px; }
.vsplitbar { background: #aaa; }

#github {
  width: 36px;
  height: 36px;
  padding: 8px 3px;
  position: static;
  margin-bottom: 10px;
}


#toolbar {
  width: 56px;
  padding: 55px 8px 0px 8px;
  height: 100vh;
  background: #f4f6fb;
  border-right: 1px solid #dbeafe;
  border-left: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  box-shadow: 2px 0 12px rgba(80, 120, 200, 0.07);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}


#tool_select img {
  border: 2px solid transparent;
  opacity: 0.6;
  border-radius: 10px;
  transition: box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 2px 8px rgba(80,120,200,0.07);
  margin-bottom: 10px;
}

#tool_select img:hover {
  opacity: 1.0;
  box-shadow: 0 4px 12px rgba(80,120,200,0.13);
}
#tool_select a.toolbar_selected img {
  border: 2px solid #2563eb;
  opacity: 1.0 !important;
  background: #e0e7ff;
  box-shadow: 0 2px 12px rgba(80,120,200,0.18);
}


.toolbox {
  width: 250px;
  background: #fff;
  border: 1px solid #d1d5db;
  position: absolute;
  right: 292px;
  top: 20px;
  z-index: 9;
  display: none;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(80,120,200,0.10);
}

.toolbox_header {
  font-weight: 600;
  background: #f3f4f6;
  padding: 8px 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.toolbox_close { display: inline-block;}
.toolbox_main {
  padding: 12px;
}


#graph_wrapper { width: 100%; height: 100%; width: 100%; z-index: 2; margin-right: 250px; background-color: #000;}
#graph_wrapper:hover { cursor: crosshair;}
#graph_wrapper:active { cursor: move;}
#graph { width: 100%; height: 100%;}

h1 { margin: 0; padding: 0;}

.options_list { line-height: 25px;}
.option { color: #666; border: 1px solid #BBB; background: #E7E7E7; border-radius: 5px; padding: 1px 4px;}
.option_selected { font-weight: bold; color: #000; background: #F6F6F6; border: 1px solid #999; }

a { text-decoration: none;}
a:hover { text-decoration: underline;}

.fancybutton {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  border-radius: 8px;
  border: none;
  color: #fff;
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 20px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(80,120,200,0.11);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  cursor: pointer;
}
.fancybutton:hover {
  background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 4px 16px rgba(80,120,200,0.18);
  transform: translateY(-2px) scale(1.03);
}

.fancybutton:active {
  position:relative;
  top:1px;
}

.greybutton {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
  background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
  background-color:#f9f9f9;
  border:1px solid #dcdcdc;
  color:#666666;
}.greybutton:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
  background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
  background-color:#e9e9e9;
}

.hidden { display: none;}


/*!
 * StyleSheet for JQuery splitter Plugin
*/
.splitter_panel {
  position: relative;
}
.splitter_panel .vsplitter {
    background-color: grey;
    cursor: col-resize;
    z-index:900;
    width: 7px;
}

.splitter_panel .hsplitter {
    background-color: #5F5F5F;
    cursor: row-resize;
    z-index: 800;
    height: 7px;
}
.splitter_panel .vsplitter.splitter-invisible,
.splitter_panel .hsplitter.splitter-invisible {
    background: none;
}
.splitter_panel .vsplitter, .splitter_panel .left_panel, .splitter_panel .right_panel,
.splitter_panel .hsplitter, .splitter_panel .top_panel, .splitter_panel .bottom_panel {
    position: absolute;
    overflow: auto;
}
.splitter_panel .vsplitter, .splitter_panel .left_panel, .splitter_panel .right_panel {
  height: 100%;
}
.splitter_panel .hsplitter, .splitter_panel .top_panel, .splitter_panel .bottom_panel {
  width: 100%;
}
.splitter_panel .top_panel, .splitter_panel .left_panel, .splitter_panel .vsplitter {
   top: 0;
}
.splitter_panel .top_panel, .splitter_panel .bottom_panel, .splitter_panel .left_panel, .splitter_panel .hsplitter {
   left: 0;
}
.splitter_panel .bottom_panel {
   bottom: 0;
}
.splitter_panel .right_panel {
   right: 0;
}
.splitterMask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}