/* style.css */
:root{
  --bg:#e6e6e6;
  --panel:#f2f2f2;
  --border:#bdbdbd;
  --text:#222;
  --focus:#888;
}

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  overflow:hidden;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

/* Back arrow (top-left, smaller, auto-hide until hover) */

/* home arrow */
.nav-home{
  position:fixed;
  top:12px;
  left:10px;
  color:#444;
  opacity:.3;
}
.nav-home:hover{opacity:1;color:#444}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  width:min(1380px, 98vw);
  height:min(84vh, 980px);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}

.title{
  font-size:16px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
}

.bar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}



.btn{
  padding:7px 10px;
  border:1px solid var(--border);
  background:#e9e9e9;
  border-radius:8px;
  cursor:pointer;
  font:13px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  user-select:none;
  line-height:1;
}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:translateY(1px)}
.btn-mini{min-width:34px;text-align:center;padding:7px 8px}

.chk{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:#555;
  user-select:none;
}

.split{
  flex:1;
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(0,0.42fr);
  gap:8px;
  min-height:0;
}

.codewrap{
  min-height:0;
  max-height:100%;
}

code, pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
  font-size:15px;
  line-height:1.35;
}

/* Console */

#js_console{
  margin:0;
  padding:10px;
  border-radius:10px;
  border:0;
  background:#f7f7f7;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  min-height:0;
  box-sizing:border-box;
  color:#333;
  outline:0;
}
#js_console:focus{
  outline:1px solid var(--focus);
}

/* Help */

#help_panel{
  border-radius:10px;
  border:0;
  background:#f7f7f7;
  padding:10px;
  font-size:13px;
  color:#333;
}

.help_grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.help_block h4{
  margin:0 0 6px 0;
  font-size:13px;
  font-weight:600;
}

.help_block ul{
  margin:0;
  padding-left:18px;
}

.help_block li{
  margin:4px 0;
}

.help_links{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,0.10);
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.help_links a{
  font-size:13px;
  color:#444;
  text-decoration:none;
  border-bottom:1px dotted #888;
}
.help_links a:hover{
  color:#000;
  border-bottom-color:#000;
}

.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;
}

.console-time{
  color:#64748b;     
  font-size:13px;
  margin-top:4px;
  user-select:none;
}


@media (max-width:980px){
  .panel{height:90vh}
  .help_grid{grid-template-columns:1fr}
  .split{grid-template-rows:minmax(0,1fr) minmax(0,0.55fr)}
  body::before{width:90px;height:90px}
}